Awesome React

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

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
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 }]
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
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.
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