Wednesday, December 23, 2015

Facebook web dev ecosystem: ReactJS, Flux, Flow and Nuclide

ReactJS
Facebook's framework (Instagram its entirely built with it) for writing view components.
It's not a complete web framework; it doesn't provide: modules, http, model, route support, dependency injection, etc.

It works as follows:
  1. Changes on the the UI performed on a fake DOM (virtual DOM).
  2. In order to render the UI an algorithm identifies the differences between the virtual and real DOM.
  3. Finally the changes are applied to the real DOM in batchs.
The result is that there are less updates (redundant modifications are removed)  and they are usually faster (batch DOM updates are faster than individual DOM updates due to the way browsers work).

The virtual DOM also provides other interesting uses like server-side rendering of views.

The UI is composed with components.Components can be nested in hierarchies (component made of components). Each component is built with pure JavaScript or, more declaratively, with JSX scripts: a mix of XML (HTML with some gotchas) and JavaScript.

The main responsibility of a Component is to translate raw data into HTML. The data is stored in the component as:
  • Props: external interface, immutable from the component. Can be changed from parent components.
  • State (optional): internal state, private and only changed by the component.
Since state increases complexity and reduces predictability, a component without state is preferable. Even though you clearly can't do without state in an interactive app, you should avoid having too many Stateful Components.


The key points when using React are:
  • Rebuilding the UI entirely from the data model each time (not incrementally).
  • Utilizing unidirectional data flow in contrast to the (two way) bindings.
They are enforced in the Flux architecture.

Flux
Facebook's internally used architecture/pattern for building ReactJS applications (MVC alternative).
It's not a framework or even a library (certainly there is small Dispatch library).

Their components are:

  • Actions – helper methods that facilitate passing data to the dispatcher
  • Dispatcher: receives actions and broadcasts payloads to registered callbacks
  • Stores: containers for application state & logic that have callbacks registered to the dispatcher
  • Controller views: React components that grab the state from stores and pass it down via props to child components.

Flow
Static type checker, designed to find type errors in JavaScript programs.

Nuclide
Atom based IDE (Atom plus Facebook custom packages).
  • Web development (ReactJS).
  • Native mobile development on iOS and Android (React Native) including device simulators (fast development cycle!).
  • Server side development (Hack and server side editing).
Tools

  • Browserify or webpack: so each component can be coded in it's own file.

Third party UI widget projects

1 comment:

  1. I'm following your blog for a while already and must sat that it is very useful for me. I've just started a page on FB about best virtual data rooms and actively use your hints. Thanks!
    Regards,
    Rick

    ReplyDelete