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

More Decks by Jeremy Lu

Other Decks in Technology


  1. Why React & Flux Rock?

  2. Hi, I’m Jeremy Lu @thecat Founder and builder, Lovelyreader |

    Pubulous | Visualmarks | Docknote
  3. About React - Built by Facebook and Instagram - Battle-tested

    by millions of users around the world
  4. Key Highlights 1. Build Component, not template! 2. One-way Data

    Flow! 3. Virtual DOM
  5. 1. Build Component, not template 1. Build Component, not template!

    2. One-way Data Flow! 3. Virtual DOM
  6. 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
  7. 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)
  8. Build Component, not template JSX return <div>Hello {this.props.name}</div>; return React.DOM.div(null,

    "Hello ", this.props.name);
  9. Why component is good?

  10. It’s reusable - Stateless - Encapsulation - Configurability (pass in

    data and callbacks via props during invokation)
  11. <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
  12. 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
  13. Docknote

  14. Dissected

  15. Tree ToolBar <FileList> <Tree /> <BoolBar onAdd={this.add} /> </FileList> In

  16. Complete Life-Cycle Methods for fine-grained control of everything inside the

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

    Components sync with system states - Testcases can easily mock different state and verify the view conforms
  18. 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
  19. 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} />
  20. 2. One-way Data Flow 1. Build Component, not template! 2.

    One-way Data Flow! 3. Virtual DOM
  21. One-way Data Flow - Data changing in time is the

    root of all evils - Lot of errors occurred while handling state changes
  22. 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?
  23. 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
  24. One-way Data Flow - In short, you take care of

    the model, view will take care of the rest
  25. One-way Data Flow But redraw everytime is expensive, right?

  26. 3. Virtual DOM 1. Build Component, not template! 2. One-way

    Data Flow! 3. Virtual DOM
  27. Virtual DOM - High efficiency handling of diffing and batch

    updating DOM - Eliminating layout thrashing (read/write/read/ write...)
  28. 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
  29. Virtual DOM - Native support for server pre-rendering - SEO

    friendly - Serving first page much faster (just like twitter and facebok)
  30. FLUX

  31. What’s Flux? - Not really a MVC framework, but a

    set of best practices
  32. Problems of MVC When it begins

  33. Problems of MVC Out of control and burnt

  34. 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
  35. Flux Workflow

  36. 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
  37. What’s missing? - Pick a router and you’re all set

    - Flatiron Director recommended
  38. Case Study

  39. Docknote - Notebook for developer - Creat technotes and share

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

    the time spent figuring out and fighting the framework
  41. 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
  42. Docknote [Shameless Plug] Looking for beta testers for interviewing, drop

    me a line if interested.
  43. Recap

  44. - No need to fight the framework - No black

    magic, no striking back - Smooth learning curve
  45. - Only two things to take care of - State

    - Component
  46. - A much simplified mindset goes a long way -

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

    Training (bringing newbie up real quick)
  48. - Even better when paired with - Browserify - Gulp

    - Node.js
  49. References - React introduction - http://goo.gl/7vbhI1 - Flux introduction -

    http://goo.gl/SZ10b2 - Single source of truth - http://goo.gl/FuwXv
  50. lead developer of angularjs

  51. Jeremy Lu | @thecat | jeremy@pubulous.com Questions?