Why React is Awesome ・ #BCBK 6

My talk about React at BarCamp Bangkhen 2015

Transcript

1. Slide № 1 1 Why React is Awesome Barcamp BangKhen 6 Thai Pangsakulyanont
2. Slide № 2 About Me Thai Pangsakulyanont (@dtinth), a frontend enthusiast.
 My Blog: http://me.dt.in.th/
 My Toys: http://spacet.me/ Working at Taskworld as web engineer.
 We use React and Node.js. Building a free web-based rhythm game, Bemuse.
 Please check it out at https://bemuse.ninja/
 The front-end part uses React.
3. Slide № 3 Note: Since I used Angular.js a lot, there will be many comparisons with Angular.
4. Slide № 4 Note: This session aims at showing the awesomeness of React. Therefore, many details are left out.
5. Slide № 5 Awesome #1 Declarative UI
6. Slide № 6 let todos = [ ]
7. Slide № 7 let todos = [ ] function addTodo (text) { }
8. Slide № 8 let todos = [ ] let nextId = 1 function addTodo (text) { let id = nextId++ }
9. Slide № 9 let todos = [ ] let nextId = 1 function addTodo (text) { let id = nextId++ todos.push({ id: id, text: text }) }
10. Slide № 10 function removeTodo (idToRemove) { }
11. Slide № 11 function removeTodo (idToRemove) { todos = todos.filter( ({ id }) => id !== idToRemove ) }
12. Slide № 12 Imperative UI You tell what to do.
13. Slide № 13 let todos = [ ] let nextId = 1 function addTodo (text) { let id = nextId++ todos.push({ id: id, text: text }) }
14. Slide № 14 let todos = [ ] let nextId = 1 function addTodo (text) { let id = nextId++ todos.push({ id: id, text: text }) $('<li></li>') .text(text).attr('id', 'todo' + id) .appendTo('#todos') }
15. Slide № 15 function removeTodo (idToRemove) { todos = todos.filter( ({ id }) => id !== idToRemove ) }
16. Slide № 16 function removeTodo (idToRemove) { todos = todos.filter( ({ id }) => id !== idToRemove ) $('#todo' + idToRemove).remove() }
17. Slide № 17 function removeTodo (idToRemove) { todos = todos.filter( ({ id }) => id !== idToRemove ) $('#todo' + idToRemove).remove() } Simple and Straightforward
18. Slide № 18 How about editing to-dos? Marking them as completed? How about filtering?
19. Slide № 19 If we update DOM manually, our code would quickly become a spaghetti.
20. Slide № 20
21. Slide № 21 Declarative UI You say what you want.
22. Slide № 22 let todos = [ ] let nextId = 1 function addTodo (text) { let id = nextId++ todos.push({ id: id, text: text }) }
23. Slide № 23 let todos = [ ] let nextId = 1 function addTodo (text) { let id = nextId++ todos.push({ id: id, text: text }) updateUI() }
24. Slide № 24 function removeTodo (idToRemove) { todos = todos.filter( ({ id }) => id !== idToRemove ) }
25. Slide № 25 function removeTodo (idToRemove) { todos = todos.filter( ({ id }) => id !== idToRemove ) updateUI() }
26. Slide № 26 function updateUI () { }
27. Slide № 27 function updateUI () { $('#app').html(render(todos)) }
28. Slide № 28 function updateUI () { $('#app').html(render(todos)) } function render (todos) { return ( '<ul>' + todos.map(todo => '<li>' + todo.text + '</li>' ).join('') + '</ul>' ) }
29. Slide № 29 function updateUI () { $('#app').html(render(todos)) } function render (todos) { return ( '<ul>' + todos.map(todo => '<li>' + todo.text + '</li>' ).join('') + '</ul>' ) } Very simple! Predictable! Testable!
30. Slide № 30 Problem: Very inefficient
31. Slide № 31 Each time updateUI() is called the browser throws away old UI, and renders the new one.
32. Slide № 32 Problem: Insecure
33. Slide № 33 function updateUI () { $('#app').html(render(todos)) } function render (todos) { return ( '<ul>' + (todos.map(todo => '<li>' + todo.text + '</li>' )).join('') + '</ul>' ) }
34. Slide № 34 function updateUI () { $('#app').html(render(todos)) } function render (todos) { return ( '<ul>' + (todos.map(todo => '<li>' + escapeHtml(todo.text) + '</li>' )).join('') + '</ul>' ) }
35. Slide № 35 With React
36. Slide № 36 function render (todos) { return ( <ul> {todos.map(todo => <li>{todo.text}</li> )} </ul> ) }
37. Slide № 37 JSX function render (todos) { return ( <ul> {todos.map(todo => <li>{todo.text}</li> )} </ul> ) }
38. Slide № 38 Plain JS function render (todos) { return ( React.createElement('ul', null, todos.map(todo => React.createElement('li', null, todo.text) ) ) ) }
39. Slide № 39 function render (todos) { return ( React.createElement('ul', null, todos.map(todo => React.createElement('li', null, todo.text) ) ) ) } Returns a “virtual DOM”
40. Slide № 40 function updateUI () { let view = render(todos) }
41. Slide № 41 function updateUI () { let view = render(todos) let container = document.querySelector('#app') }
42. Slide № 42 function updateUI () { let view = render(todos) let container = document.querySelector('#app') ReactDOM.render(view, container) }
43. Slide № 43 function updateUI () { let view = render(todos) let container = document.querySelector('#app') ReactDOM.render(view, container) } Blazing fast!
44. Slide № 44 http://calendar.perfplanet.com/2013/diff/ Reconciliation
45. Slide № 45 function render (todos) { return ( <ul> {todos.map(todo => <li>{todo.text}</li> )} </ul> ) }
46. Slide № 46 function render (todos) { return ( <ul> {todos.map(todo => <li>{todo.text}</li> )} </ul> ) } JSX ReactDOM.render()
47. Slide № 47 Awesome #2 Components = Basic
48. Slide № 48 <div class="setting-section" ng-if="!self.display"> <div class="container"> <h2>Preview</h2> <div title="Click to save" sign-display="settings" ng-click="save()" ng-style="previewSize(setti class="preview-container"></div> </div> </div> <div class="setting-section" ng-if="!self.display"> <div class="container"> <h2>Appearance</h2> <div class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-3">Font</label> <div class="col-sm-4"> <input class="form-control" ng-model="settings.fontFamily"> </div> <div class="col-sm-2"> <button type="button" ng-class="{ btn: true, 'btn-default': true, 'btn-block': true, activ settings.fontBold }" ng-click="settings.fontBold = !settings.fontBold">Bold</button> </div> </div> <div class="form-group"> <label class="control-label col-sm-3">Color</label> <div class="col-sm-6"> <div class="row"> <div class="col-xs-5"> <input class="form-control" ng-model="settings.colorFg"> </div> <div class="col-xs-2 text-center text-muted"> <div class="form-control-static">on</div> </div> <div class="col-xs-5"> <input class="form-control" ng-model="settings.colorBg"> </div> </div> </div> </div> </div> </div> </div>
49. Slide № 49
50. Slide № 50
51. Slide № 51 Thinking in React https://facebook.github.io/react/docs/thinking-in-react.html
52. Slide № 52 Step 1: break the UI into a component hierarchy https://facebook.github.io/react/docs/thinking-in-react.html
53. Slide № 53
54. Slide № 54 Options
55. Slide № 55 Options Panel Panel Panel
56. Slide № 56 Options OptionsPlayer OptionsInput OptionsAdvanced Panel Panel Panel
57. Slide № 57 const Options = React.createClass({
58. Slide № 58 const Options = React.createClass({ render () { }
59. Slide № 59 const Options = React.createClass({ render () { return <div className="Options"> </div> }
60. Slide № 60 const Options = React.createClass({ render () { return <div className="Options"> <Panel title="Player Settings"> <OptionsPlayer onClose={this.props.onClose} /> </Panel> <div className="Optionsͷvgroup"> <Panel title="Input Settings"> <OptionsInput /> </Panel> <Panel title="Advanced Settings"> <OptionsAdvanced /> </Panel> </div> </div> }
61. Slide № 61 const Options = React.createClass({ render () { return <div className="Options"> <Panel title="Player Settings"> <OptionsPlayer onClose={this.props.onClose} /> </Panel> <div className="Optionsͷvgroup"> <Panel title="Input Settings"> <OptionsInput /> </Panel> <Panel title="Advanced Settings"> <OptionsAdvanced /> </Panel> </div> </div> } Let’s look at <Panel>
62. Slide № 62 const Panel = React.createClass({ render () { return ( ) } })
63. Slide № 63 const Panel = React.createClass({ render () { return ( <div className="Panel"> <div className="Panelͷtitle"> {this.props.title} </div> <div className="Panelͷcontent"> {this.props.children} </div> </div> ) } })
64. Slide № 64 const Panel = React.createClass({ render () { return ( <div className="Panel"> <div className="Panelͷtitle"> {this.props.title} </div> <div className="Panelͷcontent"> {this.props.children} </div> </div> ) } })
65. Slide № 65 const Panel = React.createClass({ render () { return ( <div className="Panel"> <div className="Panelͷtitle"> {this.props.title} </div> <div className="Panelͷcontent"> {this.props.children} </div> </div> ) } }) <Panel title="Hello"> <div>Hi!</div> </Panel>
66. Slide № 66 const Panel = React.createClass({ render () { return ( <div className="Panel"> <div className="Panelͷtitle"> Hello </div> <div className="Panelͷcontent"> <div>Hi!</div> </div> </div> ) } }) <Panel title="Hello"> <div>Hi!</div> </Panel>
67. Slide № 67 const Panel = React.createClass({ render () { return ( <div className="Panel"> <div className="Panelͷtitle"> {this.props.title} </div> <div className="Panelͷcontent"> {this.props.children} </div> </div> ) } }) Very reusable
68. Slide № 68 Panel Panel Panel
69. Slide № 69 Panel Very reusable
70. Slide № 70 Component
71. Slide № 71 Data Component
72. Slide № 72 Data Virtual DOM Component
73. Slide № 73 Awesome #3 Just The Views
74. Slide № 74 React view model, framework, etc… Flux Redux Rx.JS Angular Backbone Meteor Bacon.js (none)
75. Slide № 75 React view model, framework, etc… Flux Redux Rx.JS Angular Backbone Meteor Bacon.js (none)
76. Slide № 76 React view model, framework, etc… Flux Redux Rx.JS Angular Backbone Meteor Bacon.js (none)
77. Slide № 77 Awesome #4 Isomorphic
78. Slide № 78 Data Virtual DOM Component
79. Slide № 79 Data Virtual DOM Component Virtual DOM Real DOM ReactDOM.render()
80. Slide № 80 Data Virtual DOM Component Virtual DOM Real DOM ReactDOM.render() Does not require browser Requires browser
81. Slide № 81 Data Virtual DOM Component Virtual DOM HTML String ReactDOMServer.renderToString() Does not require browser Does not require browser
82. Slide № 82 Also, React Native
83. Slide № 83 Awesome #5 Hot Reloading
84. Slide № 84 render Data Virtual DOM
85. Slide № 84 Data Virtual DOM render
86. Slide № 85 Awesome #6 Community
87. Slide № 86 Official Forum https://discuss.reactjs.org/
88. Slide № 87 Awesome React https://github.com/enaqx/awesome-react
89. Slide № 88 Reactiflux http://www.reactiflux.com/
90. Slide № 89 SurviveJS http://survivejs.com/
91. Slide № 90 Este https://github.com/este/este
92. Slide № 91 Q/A?
93. Slide № 92 Thank you!!