Opening: Christopher Chedeau (Vjeux)
React-router
Innovation around react-router happened in Ember, copied router concepts.
Compilation
Advise against browserify/webpack -> don't wait for compilation. In stead do incremental updates and code splitting (still needs a lot of work)
UX/DX
Developer experience matters in React (native). One of the goals is to improve the DX. Call to work together.
Inline styles: Michael Chan (chantastic)
Moving towards a single unifying language that addresses the web (in the future). Components should be reused not repurposed.
CSS == styles
styles != CSS
Stateful representations (through user interactivity) were becoming messy as HTML, CSS and JS are entangled. Bring back state to JS.
features
- Most of the features of SASS and similar add 'fake' features (like variables) that can be just as easily be done inside JS.
:before || :aftersemantics are done as easy with regular elements that get styles.:hoveror media queries are covered with Radium, which can decorate the defined React class.
Framework usage
Don't apply classes (of say bootstrap) directly to the component just wrap the component in a div. Inline styles might overrule the defined styles of the framework.
Flux over the wire: Elie Rotenberg (elierotenberg)
Stores allow shared mutable state. Should be symmetrical, the React component should talk to stores in symetrical way. Events on either side trigger similar listeners. Between those eventful applications there can be a component that talks over the wire. (websockets, pouchdb etc)
Created a project called Nexus flux, works around eventemitting, sockets, webworkers to sync state to server side.
React Native: Spencer Ahrens (sahrens)
Interpolate positional values and style properties to mimic the animation. Has a bunch of predefined animations that are passed as properties. Works pretty decent in react native due to webview. (note: wondering how performant this will be in browsers vs. native CSS defined animations)
GraphQL: Lee Byron (leeb)
FQL (Facebook data API) was not sufficient covering the data structure and usage, GraphQL is about connections and properties of connected objects. This is a big part of the tech behind Relay.
GraphQL matches the JSON structure that is returned by the service. Native support for connected objects, e.g. properties that return as array and would otherwise be a JOIN (e.g. 'friends').
JSON like query supports extended type fetching, e.g. custom objects.
http://facebook.github.io/graphql/
Dont rewrite react: Ryan Florence (ryanflorence)
Start bottom up and stead of top down. Rewriting large components with multiple child components at once will block development of all child components. This also does not interfere with DOM mutations.
Live react: Dan Abramov (dan_abramov)
Proxies native methods of the component (render, componentDidUpdate, etc), replaces the function and runs the proxies. Simplify the store to a object watcher to the point where it is a (state, action) => state, e.g. (acc, val) => acc.
See redux, reducer with flux. Simple convention around object state changes. This allows live reloading while keeping state changes (internal tree representation). Works around functional programming.
Relay: Joseph Savona (en_js)
Provide a smart way to load data while keeping fast UX. Decouple data fetching from client side rendering through relay and combine it with the flux pattern.
Wrap React components in a Relay Container that will provide the data as properties to the wrapped component
Relay will defer rendering until all data is available that is required for rendering. Until that point a simple spinner is shown.
Relay is planned to be OS-ed in August.
Back to text UI: Mikhail Davydov (azproduction)
Cool :)
DOM as 2nd class citizen: Sebastian Markbåge (sebmarkbage)
React seems to be a good alternative for web components. Native virtual DOM will possibly be implemented against the DOM/CSSOOM API and would run into the same limitations as Reacts' virtual DOM does. Ideally React should be a complete replacement of the DOM/CSSOM en HTML/CSS API's. Facebook's aim replace the DOM/CSS API's.
Improving the workflow: Sebastian McKenzie (sebmck)
Babel seperates transformations from code generation (vs jstransformer). Enables faster iteration on features. Has features to optimize JSX (from 0.14) hoisting what render returns to static vars. ES7 features are community driven and might change in the future.
State of animation; Cheng Lou (_chenglou)
API on top of components that mimic setState, for example tweenState concept that transitions the value over time in stead of setting it directly.
Simplifying the data layer: Kevin Robinson (krob)
Twitter implemented a state and props service that feeds a flux like pattern to easily create the state that a component needs. Components can call a method which connects to the log to get the latest state/props. The log keeps all data.
It does not mutate data in place but actually appends states to a collection of states. E.g. map reduce the entire state log back to a specific state in time (state, ...changes) => state. To prevent overflowing (finite) memory, data is compacted (to disk) to a certain range of data that is most impactful to the user. This happens through an async process to ensure the data stays immutable.
Going mobile with React: Jed Watson (JedWatson)
Most apps that feel native can be build in webviews. Touch events are really important to get right as there is no abstraction layer (e.g. mouse/keyboard) between the user and the interface. Predefined packages available to improve the mobile experience e.g. http://npmjs.org/package/react-tappable or https://www.npmjs.com/package/touchstonejs
React router: Michael Jackson (mjackson)
Router matches the child components and allows a declarative style. Latest feature support async loading of assets from a specific route. This is achieved through webpack (note: investigate, seems like overkill with respect to simply async including assets).
GraphQL server: Nick Schrock (schrockn)
GraphQL can query the core/server before committing code to ensure the queries are correct. Released early without a working backend, this is done to ensure a ecosystem of contributing developers.
The type system of GraphQL replaces the different endpoints of an API to ensure data is similar across the client. This removes the need for endpoint versions/feature per client side version/feature.
Isomorphic flux: Michael Ridgway (TheRidgway)
Server needs to accomodate for different stores and dispatchers per request. Usually these are seperated in the client through different routes. Fluxible solves this by not being singletonian.
Building submarines that don't leak: Aria Buckles (ariabuckles)
Encapsulate modules! Small components work better without having state. E.g. input elements that are wrapped by higher level components are better encapsulated if they delegate state to higher level components, pass props.value and props.onChange.
Create explicit definition in the place where they are required. E.g. don't do onChange (value) => this.setState(value) with explicit definition in a lower level component onChange({ username: 'test' }).
Extensible platforms: Evan Morikawa (E0M)
Think of components as data that is part of a store, which can be injected. (note: but if you don't you still can't plugin, also Plugin === component, centralized store === store)