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

Thai Pangsakulyanont

November 22, 2015
Tweet

More Decks by Thai Pangsakulyanont

Other Decks in Programming

Transcript

  1. Slide № 1
    1
    Why React is Awesome
    Barcamp BangKhen 6
    Thai Pangsakulyanont

    View full-size slide

  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.

    View full-size slide

  3. Slide № 3
    Note:
    Since I used Angular.js a lot,
    there will be many comparisons
    with Angular.

    View full-size slide

  4. Slide № 4
    Note:
    This session aims at showing
    the awesomeness of React.
    Therefore, many details are left out.

    View full-size slide

  5. Slide № 5
    Awesome #1
    Declarative UI

    View full-size slide

  6. Slide № 6
    let todos = [ ]

    View full-size slide

  7. Slide № 7
    let todos = [ ]
    function addTodo (text) {
    }

    View full-size slide

  8. Slide № 8
    let todos = [ ]
    let nextId = 1
    function addTodo (text) {
    let id = nextId++
    }

    View full-size slide

  9. Slide № 9
    let todos = [ ]
    let nextId = 1
    function addTodo (text) {
    let id = nextId++
    todos.push({ id: id, text: text })
    }

    View full-size slide

  10. Slide № 10
    function removeTodo (idToRemove) {
    }

    View full-size slide

  11. Slide № 11
    function removeTodo (idToRemove) {
    todos = todos.filter(
    ({ id }) => id !== idToRemove
    )
    }

    View full-size slide

  12. Slide № 12
    Imperative UI
    You tell what to do.

    View full-size slide

  13. Slide № 13
    let todos = [ ]
    let nextId = 1
    function addTodo (text) {
    let id = nextId++
    todos.push({ id: id, text: text })
    }

    View full-size slide

  14. Slide № 14
    let todos = [ ]
    let nextId = 1
    function addTodo (text) {
    let id = nextId++
    todos.push({ id: id, text: text })
    $('')
    .text(text).attr('id', 'todo' + id)
    .appendTo('#todos')
    }

    View full-size slide

  15. Slide № 15
    function removeTodo (idToRemove) {
    todos = todos.filter(
    ({ id }) => id !== idToRemove
    )
    }

    View full-size slide

  16. Slide № 16
    function removeTodo (idToRemove) {
    todos = todos.filter(
    ({ id }) => id !== idToRemove
    )
    $('#todo' + idToRemove).remove()
    }

    View full-size slide

  17. Slide № 17
    function removeTodo (idToRemove) {
    todos = todos.filter(
    ({ id }) => id !== idToRemove
    )
    $('#todo' + idToRemove).remove()
    }
    Simple and
    Straightforward

    View full-size slide

  18. Slide № 18
    How about editing to-dos?
    Marking them as completed?
    How about filtering?

    View full-size slide

  19. Slide № 19
    If we update DOM manually,
    our code would quickly
    become a spaghetti.

    View full-size slide

  20. Slide № 20

    View full-size slide

  21. Slide № 21
    Declarative UI
    You say what you want.

    View full-size slide

  22. Slide № 22
    let todos = [ ]
    let nextId = 1
    function addTodo (text) {
    let id = nextId++
    todos.push({ id: id, text: text })
    }

    View full-size slide

  23. Slide № 23
    let todos = [ ]
    let nextId = 1
    function addTodo (text) {
    let id = nextId++
    todos.push({ id: id, text: text })
    updateUI()
    }

    View full-size slide

  24. Slide № 24
    function removeTodo (idToRemove) {
    todos = todos.filter(
    ({ id }) => id !== idToRemove
    )
    }

    View full-size slide

  25. Slide № 25
    function removeTodo (idToRemove) {
    todos = todos.filter(
    ({ id }) => id !== idToRemove
    )
    updateUI()
    }

    View full-size slide

  26. Slide № 26
    function updateUI () {
    }

    View full-size slide

  27. Slide № 27
    function updateUI () {
    $('#app').html(render(todos))
    }

    View full-size slide

  28. Slide № 28
    function updateUI () {
    $('#app').html(render(todos))
    }
    function render (todos) {
    return (
    '' +
    todos.map(todo =>
    '' + todo.text + ''
    ).join('') +
    ''
    )
    }

    View full-size slide

  29. Slide № 29
    function updateUI () {
    $('#app').html(render(todos))
    }
    function render (todos) {
    return (
    '' +
    todos.map(todo =>
    '' + todo.text + ''
    ).join('') +
    ''
    )
    }
    Very simple!
    Predictable!
    Testable!

    View full-size slide

  30. Slide № 30
    Problem:
    Very inefficient

    View full-size slide

  31. Slide № 31
    Each time updateUI() is called
    the browser throws away old UI,
    and renders the new one.

    View full-size slide

  32. Slide № 32
    Problem:
    Insecure

    View full-size slide

  33. Slide № 33
    function updateUI () {
    $('#app').html(render(todos))
    }
    function render (todos) {
    return (
    '' +
    (todos.map(todo =>
    '' + todo.text + ''
    )).join('') +
    ''
    )
    }

    View full-size slide

  34. Slide № 34
    function updateUI () {
    $('#app').html(render(todos))
    }
    function render (todos) {
    return (
    '' +
    (todos.map(todo =>
    '' + escapeHtml(todo.text) + ''
    )).join('') +
    ''
    )
    }

    View full-size slide

  35. Slide № 35
    With React

    View full-size slide

  36. Slide № 36
    function render (todos) {
    return (

    {todos.map(todo =>
    {todo.text}
    )}

    )
    }

    View full-size slide

  37. Slide № 37
    JSX
    function render (todos) {
    return (

    {todos.map(todo =>
    {todo.text}
    )}

    )
    }

    View full-size slide

  38. Slide № 38
    Plain JS
    function render (todos) {
    return (
    React.createElement('ul', null,
    todos.map(todo =>
    React.createElement('li', null, todo.text)
    )
    )
    )
    }

    View full-size slide

  39. Slide № 39
    function render (todos) {
    return (
    React.createElement('ul', null,
    todos.map(todo =>
    React.createElement('li', null, todo.text)
    )
    )
    )
    }
    Returns a “virtual DOM”

    View full-size slide

  40. Slide № 40
    function updateUI () {
    let view = render(todos)
    }

    View full-size slide

  41. Slide № 41
    function updateUI () {
    let view = render(todos)
    let container = document.querySelector('#app')
    }

    View full-size slide

  42. Slide № 42
    function updateUI () {
    let view = render(todos)
    let container = document.querySelector('#app')
    ReactDOM.render(view, container)
    }

    View full-size slide

  43. Slide № 43
    function updateUI () {
    let view = render(todos)
    let container = document.querySelector('#app')
    ReactDOM.render(view, container)
    }
    Blazing fast!

    View full-size slide

  44. Slide № 44
    http://calendar.perfplanet.com/2013/diff/
    Reconciliation

    View full-size slide

  45. Slide № 45
    function render (todos) {
    return (

    {todos.map(todo =>
    {todo.text}
    )}

    )
    }

    View full-size slide

  46. Slide № 46
    function render (todos) {
    return (

    {todos.map(todo =>
    {todo.text}
    )}

    )
    }
    JSX
    ReactDOM.render()

    View full-size slide

  47. Slide № 47
    Awesome #2
    Components = Basic

    View full-size slide

  48. Slide № 48


    Preview





    Appearance


    Font




    ng-click="settings.fontBold = !settings.fontBold">Bold



    Color






    on










    View full-size slide

  49. Slide № 49

    View full-size slide

  50. Slide № 50

    View full-size slide

  51. Slide № 51
    Thinking in React
    https://facebook.github.io/react/docs/thinking-in-react.html

    View full-size slide

  52. Slide № 52
    Step 1: break the UI into a
    component hierarchy
    https://facebook.github.io/react/docs/thinking-in-react.html

    View full-size slide

  53. Slide № 53

    View full-size slide

  54. Slide № 54
    Options

    View full-size slide

  55. Slide № 55
    Options
    Panel
    Panel
    Panel

    View full-size slide

  56. Slide № 56
    Options
    OptionsPlayer
    OptionsInput
    OptionsAdvanced
    Panel
    Panel
    Panel

    View full-size slide

  57. Slide № 57
    const Options = React.createClass({

    View full-size slide

  58. Slide № 58
    const Options = React.createClass({
    render () {
    }

    View full-size slide

  59. Slide № 59
    const Options = React.createClass({
    render () {
    return

    }

    View full-size slide

  60. Slide № 60
    const Options = React.createClass({
    render () {
    return












    }

    View full-size slide

  61. Slide № 61
    const Options = React.createClass({
    render () {
    return












    }
    Let’s look at

    View full-size slide

  62. Slide № 62
    const Panel = React.createClass({
    render () {
    return (
    )
    }
    })

    View full-size slide

  63. Slide № 63
    const Panel = React.createClass({
    render () {
    return (


    {this.props.title}


    {this.props.children}


    )
    }
    })

    View full-size slide

  64. Slide № 64
    const Panel = React.createClass({
    render () {
    return (


    {this.props.title}


    {this.props.children}


    )
    }
    })

    View full-size slide

  65. Slide № 65
    const Panel = React.createClass({
    render () {
    return (


    {this.props.title}


    {this.props.children}


    )
    }
    })

    Hi!

    View full-size slide

  66. Slide № 66
    const Panel = React.createClass({
    render () {
    return (


    Hello


    Hi!


    )
    }
    })

    Hi!

    View full-size slide

  67. Slide № 67
    const Panel = React.createClass({
    render () {
    return (


    {this.props.title}


    {this.props.children}


    )
    }
    })
    Very reusable

    View full-size slide

  68. Slide № 68
    Panel
    Panel
    Panel

    View full-size slide

  69. Slide № 69
    Panel
    Very reusable

    View full-size slide

  70. Slide № 70
    Component

    View full-size slide

  71. Slide № 71
    Data Component

    View full-size slide

  72. Slide № 72
    Data Virtual DOM
    Component

    View full-size slide

  73. Slide № 73
    Awesome #3
    Just The Views

    View full-size slide

  74. Slide № 74
    React
    view
    model, framework, etc…
    Flux
    Redux
    Rx.JS
    Angular Backbone
    Meteor
    Bacon.js
    (none)

    View full-size slide

  75. Slide № 75
    React
    view
    model, framework, etc…
    Flux
    Redux
    Rx.JS
    Angular Backbone
    Meteor
    Bacon.js
    (none)

    View full-size slide

  76. Slide № 76
    React
    view
    model, framework, etc…
    Flux
    Redux
    Rx.JS
    Angular Backbone
    Meteor
    Bacon.js
    (none)

    View full-size slide

  77. Slide № 77
    Awesome #4
    Isomorphic

    View full-size slide

  78. Slide № 78
    Data Virtual DOM
    Component

    View full-size slide

  79. Slide № 79
    Data Virtual DOM
    Component
    Virtual DOM Real DOM
    ReactDOM.render()

    View full-size slide

  80. Slide № 80
    Data Virtual DOM
    Component
    Virtual DOM Real DOM
    ReactDOM.render()
    Does not require browser
    Requires browser

    View full-size slide

  81. Slide № 81
    Data Virtual DOM
    Component
    Virtual DOM HTML String
    ReactDOMServer.renderToString()
    Does not require browser
    Does not require browser

    View full-size slide

  82. Slide № 82
    Also,
    React Native

    View full-size slide

  83. Slide № 83
    Awesome #5
    Hot Reloading

    View full-size slide

  84. Slide № 84
    render
    Data Virtual DOM

    View full-size slide

  85. Slide № 84
    Data Virtual DOM
    render

    View full-size slide

  86. Slide № 85
    Awesome #6
    Community

    View full-size slide

  87. Slide № 86
    Official Forum
    https://discuss.reactjs.org/

    View full-size slide

  88. Slide № 87
    Awesome React
    https://github.com/enaqx/awesome-react

    View full-size slide

  89. Slide № 88
    Reactiflux
    http://www.reactiflux.com/

    View full-size slide

  90. Slide № 89
    SurviveJS
    http://survivejs.com/

    View full-size slide

  91. Slide № 90
    Este
    https://github.com/este/este

    View full-size slide

  92. Slide № 91
    Q/A?

    View full-size slide

  93. Slide № 92
    Thank you!!

    View full-size slide