Thinking Reactively

4. ! twitter.com/sabinmarcu "facebook.com/sabinmarcu # linkedin.com/in/sabinmarcu $ github.com/sabinmarcu

5. • Startup in Analytics ! twitter.com/sabinmarcu "facebook.com/sabinmarcu # linkedin.com/in/sabinmarcu $ github.com/sabinmarcu

6. • Startup in Analytics • Developer (not Web Developer / Java Developer, etc) • 3rd Year – Computer Science @ Southampton Uni • Experience: ๏ Java, C++, PHP, JavaScript ๏ Projects starting from CMS / whole systems, to libraries and experiments ! twitter.com/sabinmarcu "facebook.com/sabinmarcu # linkedin.com/in/sabinmarcu $ github.com/sabinmarcu

7. • Startup in Analytics • Developer (not Web Developer / Java Developer, etc) • 3rd Year – Computer Science @ Southampton Uni • Experience: ๏ Java, C++, PHP, JavaScript ๏ Projects starting from CMS / whole systems, to libraries and experiments • Web Development since 2009 • Node JS since 2011 • Angular JS since 2013 • React since 2015 ! twitter.com/sabinmarcu "facebook.com/sabinmarcu # linkedin.com/in/sabinmarcu $ github.com/sabinmarcu

8. • Startup in Analytics • Developer (not Web Developer / Java Developer, etc) • 3rd Year – Computer Science @ Southampton Uni • Experience: ๏ Java, C++, PHP, JavaScript ๏ Projects starting from CMS / whole systems, to libraries and experiments • Web Development since 2009 • Node JS since 2011 • Angular JS since 2013 • React since 2015 • HackaSoton director since the beginning ! twitter.com/sabinmarcu "facebook.com/sabinmarcu # linkedin.com/in/sabinmarcu $ github.com/sabinmarcu

11. • Overview • Competition

12. • Overview • Competition • Facebook’s Reasoning • Comparison with Angular

13. • Overview • Competition • Facebook’s Reasoning • Comparison with Angular • Redux • Flux • React

14. • Overview • Competition • Facebook’s Reasoning • Comparison with Angular • Redux • Flux • React • Examples

15. • Overview • Competition • Facebook’s Reasoning • Comparison with Angular • Redux • Flux • React • Examples • Recap • Questions

16. • Overview • Competition • Facebook’s Reasoning • Comparison with Angular • Redux • Flux • React • Examples • Recap • Questions • ???

17. • Overview • Competition • Facebook’s Reasoning • Comparison with Angular • Redux • Flux • React • Examples • Recap • Questions • ??? • Proﬁt

18. React

19. React UI Framework

20. React UI Framework Facebook

34. Basic Websites / General Website Frontend

35. Basic Websites / General Website Frontend Small Scripts / Fiddles

36. Basic Websites / General Website Frontend Small Scripts / Fiddles Showing off as a beginner

37. Basic Websites / General Website Frontend Small Scripts / Fiddles Showing off as a beginner

38. Basic Websites / General Website Frontend Small Scripts / Fiddles Showing off as a beginner NOT to be used as a primary tool with an app

41. Web applications

42. Web applications works with dom / svg at best

43. Web applications works with dom / svg at best two way data bindings

44. Web applications works with dom / svg at best two way data bindings

45. Web applications works with dom / svg at best two way data bindings scope tree

46. Web applications works with dom / svg at best two way data bindings scope tree

47. Web applications works with dom / svg at best two way data bindings scope tree digest loops

49. ScopeScopeScopeScopeScope

50. one comment ScopeScopeScopeScopeScope

51. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope

52. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope one comment box author timestamp comment

53. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope

54. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope one comment box

55. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope one comment box Comment form

56. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope one comment box Comment form Comment section

58. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope

59. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Comment Section

60. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Comment Section Article

61. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Comment Section Article Admin

62. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope cope cope cope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope S Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scop Scope Scop Scop Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope

70. React

72. Workflow

73. 1. Reducers Workflow

74. 1. Reducers 2. Store Workflow

75. 1. Reducers 2. Store 3. Virtual DOM Workflow

76. 1. Reducers 2. Store 3. Virtual DOM 4. Actual Dom Workflow

77. 1. Reducers 2. Store 3. Virtual DOM 4. Actual Dom 5. Action Workflow

78. 1. Reducers 2. Store 3. Virtual DOM 4. Actual Dom 5. Action 6. Dispatch Workflow

79. 1. Reducers Workflow

80. 1. Reducers 2. Store Workflow

81. Reducers & Store

82. 1. Initial State Reducers & Store

83. 1. Initial State 2. Reducers Reducers & Store

84. 1. Initial State 2. Reducers 3. Final State Reducers & Store

85. Reducers & Store 1. Initial State 2. Reducers 3. Intermediary State

86. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope one comment box Comment form Comment section

88. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Sco S Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope S Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Store

91. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Sco S Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope S Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Store Dispatch

92. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Sco S Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope S Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Store Dispatch

93. Diffs Only changes where it’s needed

98. Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Scope Legend: • Affected • Dispatcher

100. React (Facebook)

101. Ember React (Facebook)

102. Incremental DOM (Google) Ember React (Facebook)

103. Incremental DOM (Google) Ember React (Facebook)

106. • DOM

107. • DOM • SVG

108. • DOM • SVG • Canvas

109. • DOM • SVG • Canvas • WebGL

110. • DOM • SVG • Canvas • WebGL …

111. • DOM • SVG • Canvas • WebGL … • Serverside?

112. • DOM • SVG • Canvas • WebGL … • Serverside? AngularJS

113. • DOM • SVG • Canvas • WebGL … • Serverside? Incremental DOM

114. • DOM • SVG • Canvas • WebGL … • Serverside? Ember

115. • DOM • SVG • Canvas • WebGL … • Serverside? jQuery

116. • DOM • SVG • Canvas • WebGL … • Serverside? React

117. React

118. React Flux Redux

119. React Flux Redux UI DATA

120. React REDUX FLUX

121. Reducers Initial state final state Redux

122. Reducers Initial state final state

123. Reducers Initial state final state Flux Reducers Initial state final state Reducers Initial state final state Reducers Initial state final state Reducers Initial state final state Reducers final state Reducers Initial state final state

124. Reducers Initial state final state Redux

125. Reducers Initial state final state React

126. Reducers Initial state final state React virtual dom

127. Reducers Initial state final state React REAL dom SVGWEBGL virtual dom

128. Reducers Initial state final state React REAL dom SVGWEBGL static page rest api virtual dom

129.   EXAMPLES

135. Own Projects • http://sabinmarcu.github.io/labs/ • http://sabinmarcu.github.io/labs/react-demo/ • http://sabinmarcu.github.io/labs/sortable-paper/ Canvas & WebGL • http://react.rocks/tag/Canvas • http://react.rocks/tag/WebGL Serverside Render • https://github.com/mhart/react-server-example Real life examples • https://www.messenger.com/ • http://react.rocks/

Thinking Reactively

Recommended

Recommended

More Related Content

Similar to Thinking Reactively

Similar to Thinking Reactively (20)

Recently uploaded

Recently uploaded (20)

Thinking Reactively