The App

We have charts...

grids...

forms...

...and other stuff.

August 2015

7 developers; 1.5 years;  ~100 KLOC; 

Backbone: good

and bad parts

Data are synchronous;

just handle the change.

Problem: form inputs

React: virtual DOM updates

Subviews and nested models

Problem: small UI widgets

What's wrong with Views

• Cannot use 'render on change' with forms.
  • Custom data binding.
• Subviews are unacceptable for small UI controls.
  • Use xtags/web components.
  • Restriction - text props only.
• Problems:
  • xtags renders really slow.
  • Design rules become too complex to follow.

React

• Can use 'render on change' with forms.
  • UI state is preserved on update.
• <Component /> is perfect for small and large UI controls.
  • "Subview" and "custom tag" is the same thing.
  • "Custom tag" can take complex props.
• Problems:
  • xtags slow down rendering.
  • Design rules become too complex to follow.
• Perfectly suites "just handle the change" pattern.

Aug 2015

An Approach

• Keep models for UI state management
  • "Update on change" pattern.
  • Unidirectional data flow.
  • Data layer is unchanged.
• React Components is first-class citizen:
  • Every View can be React component
  • Every React component can be View

1st stage

Make it React App from the top

• ES5 -> ES6
  • RequireJS -> webpack
  • Compile with "babel"
• ChaplinJS router -> react-router
• React-Backbone convergence layer.

NestedReact

Nov 2015

2nd stage

Bottom and the middle: phase out xtags

• Create UI components for forms
• Do new features with React
• Touch the code - remove xtags
• Keep "good" Backbone Views.

Summer 2016

NestedReact

http://labs.voronianski.com/flux-comparison

Flux Shop Demo

Product Model

Cart Collection

Application

Unidirectional data flow

Solution Size

React UI Guidlines

• Use stateless components as functions (React 0.14)
• Use valueLink for data binding.

Pure Components

Pure Components

TodoMVC Solution Size