Save 37% off PRO during our Black Friday Sale! »

Awesome React

Awesome React

Open Discussion about Modern Web Design, Solution Forum, FSOFT HCM 28/09/2016

01fbb9415ce23ee879c1bc8c24aa1ec6?s=128

Nguyễn Nhật Hoàng

September 28, 2016
Tweet

Transcript

  1. Awesome React Nguyen Nhat Hoang @codeaholicguy

  2. Before we begin: Not a tutorial.

  3. Before we begin: Design decisions, not implementations.

  4. Meet React A library for creating user interfaces.

  5. Meet React Render your UI and responds to events.

  6. Meet React V in MVC

  7. What makes user interfaces difficult to build?

  8. What makes user interfaces difficult to build? Human verified

  9. What makes user interfaces difficult to build? Lot of states

  10. What makes user interfaces difficult to build? Tooling mismatch

  11. Lot of complexity

  12. How to solve that problems?

  13. Trying to be predictable.

  14. Trying to be reliable.

  15. How do we make user interfaces more reliable?

  16. UI is a dynamic process

  17. None
  18. Galaxy Note4 is online

  19. iPhone 5 is online

  20. Galaxy S5 is offline

  21. iPhone 5 is favorited

  22. iPhone 5 is utilizing

  23. ?

  24. It is very difficult for human to visualize dynamic processes

    that evolve over time!
  25. [{ "name": "Galaxy S5", "isOnline": true, "isUltilizing": false, "isFavorite": true

    }, { "name": "Galaxy Note4", "isOnline": false, "isUltilizing": false, "isFavorite": true }, { "name": "iPhone 5", "isOnline": true, "isUltilizing": true, "isFavorite": false }]
  26. Data binding!

  27. Data binding makes UI look more like a static program

    relative to your data model.
  28. Data binding sync state in your UI with state in

    your data model.
  29. Is it simple?

  30. Simplicity is prerequisite for reliability.

  31. Simplicity is that there is no interleaving.

  32. familiar things == simple things?

  33. Key-Value Observation Ember, Knockout, Backbone etc

  34. Observables & Computed Properties

  35. [{ "title": "Awesome React", "upvotes": 90, "downvotes": 5 }, {

    "title": "Progessive Web App", "upvotes": 112, "downvotes": 11 }, { "title": "Modern Web Technologies", "upvotes": 20, "downvotes": 8 }]
  36. None
  37. <script type="text/x-handlebars"> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> <ul> {{#each topTopics}}

    <li>{{title}} {{percent}}%</li> {{/each}} </ul> </script>
  38. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } var Topic

    = Ember.Object.extend({ percent: function() { return (this.upvotes * 100 / totalVotes(this)).toFixed(2); }.property('upvotes', 'downvotes') }); var AppModel = Ember.Object.extend({ topTopics: function() { return this.topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }).slice(0, 3) }.property('topics') }); var appModel = AppModel.create({ topics: topics.map(function(topic) { return Topic.create(topic) }) })
  39. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } var Topic

    = Ember.Object.extend({ percent: function() { return (this.upvotes * 100 / totalVotes(this)).toFixed(2); }.property('upvotes', 'downvotes') }); var AppModel = Ember.Object.extend({ topTopics: function() { return this.topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }).slice(0, 3) }.property('topics') }); var appModel = AppModel.create({ topics: topics.map(function(topic) { return Topic.create(topic) }) })
  40. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } var Topic

    = Ember.Object.extend({ percent: function() { return (this.upvotes * 100 / totalVotes(this)).toFixed(2); }.property('upvotes', 'downvotes') }); var AppModel = Ember.Object.extend({ topTopics: function() { return this.topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }).slice(0, 3) }.property(‘topics.@each.upvotes’, ‘topics.@each.downvotes’) }); var appModel = AppModel.create({ topics: topics.map(function(topic) { return Topic.create(topic) }) })
  41. Demo https://goo.gl/eXszlj

  42. Dirty Checking Angular

  43. None
  44. <div ng-app="app"> <div ng-controller="AvatarController"> <fb-avatar user="user"></fb-avatar> </div> </div>

  45. var app = angular.module('app',[]); app.controller('AvatarController', function($scope) { $scope.user = {

    username: 'codeaholicguy', fbid: '632571376813536', fullName: ‘Hoàng Nguyễn' } }); app.directive('fbAvatar', function() { return { restrict: 'E', scope: {user: '='}, template: '<div class="fbAvatar"><fb-pic user="user"></fb- pic>{{user.fullName}}</div>' } }) app.directive('fbPic', function() { return { restrict: 'E', scope: {user: '='}, template: '<img src="http://graph.facebook.com/{{user.fbid}}/ picture"></img>' } })
  46. var app = angular.module('app',[]); app.controller('AvatarController', function($scope) { $scope.user = {

    username: 'codeaholicguy', fbid: '632571376813536', fullName: ‘Hoàng Nguyễn' } }); app.directive('fbAvatar', function() { return { restrict: 'E', scope: {user: '='}, template: '<div class="fbAvatar"><fb-pic user="user"></fb- pic>{{user.fullName}}</div>' } }) app.directive('fbPic', function() { return { restrict: 'E', scope: {user: '='}, template: '<img src="http://graph.facebook.com/{{user.fbid}}/ picture"></img>' } })
  47. Demo https://goo.gl/iGuVrq

  48. What if we had a “reactive” JavaScript?

  49. Re-rendering on every change makes things simple.

  50. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } function renderApp(topics)

    { return DOM.ul({className: 'list'}, topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }) .slice(0, 3) .map(function(topic) { return DOM.li({className: 'item'}, topic.title, ' ', (topic.upvotes * 100 / totalVotes(this)).toFixed(2), '%' ); }) ); } var topics = getTopics(); render(renderApp(topics), document.body);
  51. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } function renderTopic(topic)

    { return DOM.li({className: 'item'}, topic.title, ' ', (topic.upvotes * 100 / totalVotes(this)).toFixed(2), '%' ); } function renderApp(topics) { return DOM.ul({className: 'list'}, topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }) .slice(0, 3) .map(renderTopic) ); } var topic = getTopics(); render(renderApp(topic), document.body);
  52. But

  53. JavaScript is not reactive.

  54. DOM is stateful!

  55. You can’t just throw out the DOM and rebuild it

    on each update.
  56. It’s EXPENSIVE!

  57. Virtual DOM

  58. Virtual DOM Whenever anything may have changed, re-render everything to

    a virtual DOM representation.
  59. Virtual DOM Diff the previous representation with the next one.

  60. Virtual DOM Only update the real DOM part which actually

    changed.
  61. None
  62. Every system has constrains.

  63. KVO entangles app code with observables.

  64. Angular-style dirty checking forces everything through $scope, $watch and directives.

  65. Data binding systems with domain specific language are not statically

    analyzable. Linting - Minification - Type checking
  66. Virtual DOM needs a signal to say anything may have

    changed.
  67. Most expressive way to build an user interface in JavaScript.

  68. Let’s see some React fundamentals

  69. Build components, not templates

  70. Separate of concerns Reduce coupling, increase cohesion

  71. Templates separate technologies, not concerns

  72. Use components to separate your concerns. Full power of JavaScript,

    no template language
  73. Components are reusable.

  74. Components are composable.

  75. Components are unit testable.

  76. render() { return ( <p>Hello {this.props.world}</p> ) }

  77. JSX is an optional preprocessor to let you use HTML-like

    syntax.
  78. render() { return ( React.DOM.p({}, 'Hello', this.props.world) ) }

  79. One way data flow

  80. Props and State

  81. Data handed from parent to child

  82. Events flow up, data flows down

  83. Virtual DOM is fast!

  84. DOM is slow!

  85. Computes minimal DOM operations

  86. Batched reads and writes for optimal DOM performance

  87. Automatic top-level event delegation (with cross- browser HMTL5 event)

  88. Provides hooks for custom update logic shouldComponentUpdate, forceUpdate

  89. It can run in Node.js

  90. Moreover

  91. Easy to test

  92. SVG, canvas support

  93. Key take aways

  94. Components, not templates

  95. Re-render, don’t mutate

  96. Virtual DOM is simple, powerful and fast

  97. Thank you Nguyen Nhat Hoang @codeaholicguy