Why React & Flux Rock?

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

Transcript

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 details
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?