Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why React & Flux Rock?

Why React & Flux Rock?

This is a talk given to Taipei Javascript Enthusiasts meetup members on July 9, 2014, held in Mozilla Taipei Office.

Jeremy Lu

July 09, 2014
Tweet

More Decks by Jeremy Lu

Other Decks in Technology

Transcript

  1. Build Component, not template The Problems ! - Components are

    the right way to separate concerns - Not "templates" and "display logic" - Markup and the code that drives it are intimately tied together - Display logic is often very complex, using template languages to express it becomes cumbersome - Think: logic-less template like handlebar
  2. Build Component, not template The Solution ! - Generate markup

    directly from the JavaScript code - Can use expressive power of programming language to build UIs - JSX is the sugar coating (but not required)
  3. It’s reusable - Stateless - Encapsulation - Configurability (pass in

    data and callbacks via props during invokation)
  4. <EditorCore isFocusEditor={item.focused} content={item.content ? item.content : 'default texts'} ! ref={item.uid}

    ! onChange={this.handleContentChange} onClick={this.onClick} onCursorActivity={this.handleCursorActivity} onToggleOutline={this.handleToggleOutline} 2 3 4 1 Sample React component
  5. It’s composable - Build many simple components that does one

    thing really well - Then compose them into a bigger functional unit - Which allows you to structure the application better with more flexibility
  6. Complete Life-Cycle Methods for fine-grained control of everything inside the

    component * componentWillMount() * shouldComponentUpdate() * render()
  7. Easy to Test - Each component is a unit -

    Components sync with system states - Testcases can easily mock different state and verify the view conforms
  8. Divide and Conquer - Everyone works on their own set

    of components - Components are fully decoupled - Components can be easily composed to provide bigger function later
  9. JSX is designer-friendly - They can contribute code too! -

    It really strikes a perfect balance between accessibility of templates and the power of JavaScript <Toolbar onAdd={this.add} />
  10. One-way Data Flow - Data changing in time is the

    root of all evils - Lot of errors occurred while handling state changes
  11. One-way Data Flow - What if we could just describe

    what the ui should look like at any point in time, and let view take care of updating itself?
  12. One-way Data Flow - That is how model and data

    binding work in React - Whenever model changes, component redraws itself * every redraw is like the first draw, only with different initial values
  13. One-way Data Flow - In short, you take care of

    the model, view will take care of the rest
  14. Virtual DOM - High efficiency handling of diffing and batch

    updating DOM - Eliminating layout thrashing (read/write/read/ write...)
  15. Virtual DOM - No dirty checking on models needed, just

    redraw everytime - No more manual DOM manipulations, everything is declarative - Could be even faster with immutable model in place
  16. Virtual DOM - Native support for server pre-rendering - SEO

    friendly - Serving first page much faster (just like twitter and facebok)
  17. Problems of MVC - When models and views grows complicated,

    application become messy and hard to maintain quickly - Difficult to debug - slow to add in new features
  18. In Short - Flux handles data flow - React handles

    view update - Taking "Single source of truth" to the next level - by making the workflow uni-directional
  19. Docknote - Notebook for developer - Creat technotes and share

    with colleagues easily - Web based, offline-support, code-friendly
  20. Docknote - First version written in Angular - 65% of

    the time spent figuring out and fighting the framework
  21. Docknote - Second version built with React/Flux, completed in two

    weeks - Only spent 1 hour learning the approach, then deep dive into building the product - Runs constantly at 60fps while supporting IE8
  22. - No need to fight the framework - No black

    magic, no striking back - Smooth learning curve
  23. - A much simplified mindset goes a long way -

    Faster to develop - Less human errors - Unified development approach
  24. - Bringing cost down - Maintenance - Bug Fixing -

    Training (bringing newbie up real quick)
  25. References - React introduction - http://goo.gl/7vbhI1 - Flux introduction -

    http://goo.gl/SZ10b2 - Single source of truth - http://goo.gl/FuwXv