gpbl

Reflux stores and actions in a Master/Detail app

Example and reasonings when using Reflux stores and actions for a Master/Detail app with React – with an eye to server-side rendering. Some concepts apply to reflux#166 and reflux#180.

Requirements

Must work with a router

This hypotetical app would use a router to display a list of items (e.g. at the url example.org/items, the master view) and a single item (e.g. example.org/items/:id, the detail view).

iest

'use strict';

var React = require('react');

var BzIframe = React.createClass({

  propTypes: {
    src: React.PropTypes.string.isRequired,
    onLoad: React.PropTypes.func
  },

danharper

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var babel = require('babelify');

function compile(watch) {
  var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));

stephenlb

## =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
## URL Variables
## http://p.pubnub.com/stream/<SUBKEY>/<CHANNEL>/0/-1
## =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

## Demo Stream
while true; do (printf 'GET http://p.pubnub.com/stream/sub-c-5f1b7c8e-fbee-11e3-aa40-02ee2ddab7fe/pubnub-sensor-network/0/-1 HTTP/1.1\r\nHost: pubnub\r\n\r\n'; sleep 5) | nc p.pubnub.com 80; done

## Local tunnel
curl "http://0.0.0.0:80/publish/demo-36/demo-36/0/ch6/0/1"

chantastic

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

abhiaiyer91

Redux Selector Pattern

Imagine we have a reducer to control a list of items:

function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
  switch(action.type) {
    case 'SHOW_ALL_ITEMS':
      return action.data.items
    default:

coder36

import sinonStubPromise from 'sinon-stub-promise';
import sinon from 'sinon'
sinonStubPromise(sinon)


let stubedFetch = sinon.stub(window, 'fetch') )

window.fetch.returns(Promise.resolve(mockApiResponse()));

function mockApiResponse(body = {}) {

wojteklu

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

---

General rules

1. Follow standard conventions.
2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
3. Boy scout rule. Leave the campground cleaner than you found it.
4. Always find root cause. Always look for the root cause of a problem.

Design rules

crittermike

# One liner
wget --recursive --page-requisites --adjust-extension --span-hosts --convert-links --restrict-file-names=windows --domains yoursite.com --no-parent yoursite.com

# Explained
wget \
     --recursive \ # Download the whole site.
     --page-requisites \ # Get all assets/elements (CSS/JS/images).
     --adjust-extension \ # Save files with .html on the end.
     --span-hosts \ # Include necessary assets from offsite as well.
     --convert-links \ # Update links to still work in the static version.