Awesome React

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