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

Why React is Awesome ・ #BCBK 6

Why React is Awesome ・ #BCBK 6

My talk about React at BarCamp Bangkhen 2015

47fd6e7bd2b7bf8f2e3f2a51c7ffa53d?s=128

Thai Pangsakulyanont

November 22, 2015
Tweet

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!!