Bring your web application architecture to the next level with React.JS

Transcript

1. Bring your web application to the next level with React.JS @BastianHofmann
2. Let's talk about...
3. Application architecture
4. Code and component
   re-use
5. Rapid Development
6. Handling large code-bases
7. With React.js
8. With small and independent components
9. webserver HTML browser JS controller
10. webserver HTML browser JS Ajax controller
11. webserver HTML browser JS Ajax controller
12. de duplication ode duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplicatio code duplicat code duplic code dup code du code cod co co
13. So?
14. A few words about me
17. http://speakerdeck.com/u/bastianhofmann
18. Application architecture
19. many roads
21. status quo
22. webserver HTML browser JS Ajax controller
23. webserver loadbalancer pgsql memcached mongodb services
24. webserver
26. MVC
27. Duplication and only some Code re- use
28. We can do
    better
29. Small components over big controllers
38. Self contained
39. Can be used everywhere
40. JS is part of the component
41. CSS can be part of the component
42. http://facebook.github.io/react/
43. JavaScript UI Library
44. Many small, self contained, reusable components
45. var HelloMessage = React.createClass(
 {
 render: function () {
 return <div>Hello {this.props.name}</div>;
 }
 }
 );
 
 React.render(<HelloMessage name="John" />, mountNode);
46. var Timer = React.createClass({
 getInitialState: function () {
 return {secs: 0};
 },
 tick: function () {
 this.setState({secs: this.state.secs + 1});
 },
 componentDidMount: function () {
 this.interval = setInterval(this.tick, 1000);
 },
 componentWillUnmount: function () {
 clearInterval(this.interval);
 },
 render: function () {
 return (<div> Seconds Elapsed: {this.state.secs}</div> );
 }
 });
 
 React.render(<Timer />, mountNode);
47. var TodoList = React.createClass(
 {
 render: function () {
 var createItem = function (itemText) {
 return <li>{itemText}</li>;
 };
 return ( <ul> {this.props.items.map(createItem)} </ul> );
 }
 }
 );
48. var TodoApp = React.createClass({
 render: function () {
 return (
 <div>
 <h3>TODO</h3>
 <TodoList items={this.props.items} />
 </div>
 );
 }
 });
49. Getting the data in there
50. PHP Backend JSON React Frontend
51. PHP Backend JSON React Frontend
52. PHP Backend JSON React Frontend
53. PHP Backend JSON React Frontend
54. var TodoApp = React.createClass({
 getInitialState: function () {
 return {items: […]};
 },
 render: function () {
 return (
 <div>
 <h3>TODO</h3>
 <TodoList items={this.state.items} />
 </div>
 );
 }
 });
55. Problematic
56. Remember
57. Self-contained
58. Reusable
59. PHP Backend JSON React Frontend
60. PHP Backend JSON React Frontend
61. PHP Backend JSON React Frontend
62. Overfetching
63. Underfetching
64. Solutions
65. Flux Datastores
66. PHP Backend React Frontend Datastores
67. GraphQL https://gist.github.com/wincent/598fa75e22bdfa44cf47
68. Requirements
69. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Institution Menu React Frontend
70. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu PHP Backend Request Response Institution
71. LeftColumn Image Menu React Frontend
72. LeftColumn Image Menu Request Response PHP Backend
73. Remember:
    self contained
74. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Account Account Account Account Account Publication1 Publication2 Publication3 Institution
75. Do not fetch data directly
76. Sssssssllllooooowww
77. Require stuff
78. http://www.infoq.com/presentations/Evolution-of-Code- Design-at-Facebook/
80. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations
81. Widget Widget Widget Widget Preparer Fetch Requirements Resolver Resolver Services Connector Interfaces Connector Implementations
82. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Batch requirements and pass them to resolvers
83. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Call Services as effective as possible (Multi-GET,...)
84. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Attach fetched data to Requirements and pass them back to the preparer
85. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Distribute fetched data to the widgets that required it
86. public function collect() {
 return [
 new EntityRequirement(
 'account',
 Account::class,
 ['id' => $this->request->get('id')]
 ),
 ];
 }
87. Request Cache
88. Multi-GET
89. Futures
90. Data dependencies within a widget
91. public function collect() {
 yield [
 new EntityRequirement(
 'account',
 Account::class,
 ['id' => $this->request->get('id')]
 ),
 ];
 
 yield [
 new ServiceRequirement(
 'scienceDisciplines',
 AccountService::class,
 'getScienceDisciplines',
 ['account' => $this->account]
 )
 ];
 }
92. Assembling the tree
93. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu PHP Backend Request Response Institution
94. Widget
    Requirement
95. class PublicationKeywordSearch {
 
 public $publications;
 public $publicationListItems = [];
 
 public function collect() {
 yield [
 serviceRequirement(
 'publications',
 PublicationService::getCall()->getByKeywords(
 ['virology', 'cancer'], 10, 0
 )
 )
 ];
 foreach ($this->publications as $publication) {
 yield new WidgetRequirement(
 'publicationListItems',
 PublicationItem::CLASS,
 [ 'publicationId' => $publication->getId() ]
 );
 }
 }
 }
96. class PublicationItem {
 
 public $publicationId;
 public $publication;
 
 public function collect() {
 yield new RequestDataRequirement('publicationId');
 yield [
 new EntityRequirement(
 'publication',
 Publication::class,
 ['id' => $this->publicationId]
 )
 ];
 }
 }
97. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
98. Getting the data to React.js
99. public function getData() {
 return [
 'key' => 'value',
 'other' => 'data',
 'number' => 42,
 'subComponent' => $this->subComponent,
 'someArray' => [1, 2, 3],
 'subComponentList' => [ $this->items[0], $this->items[1] ]
 ];
 }
100. {
 "ParentComponent-1234": {
 "component": "ParentComponent.jsx",
 "id": "ParentComponent-1234",
 "data": {
 "key": "value",
 "other": "data",
 "number": 42,
 "subComponent": "SubComponent",
 "someArray": [1, 2, 3],
 "subComponentList": [ "ListItem-444", "ListItem-555"]
 }
 },
 "SubComponent": {
 "component": "SubComponent.jsx",
 "id": "SubComponent",
 "data": { "boolValue": true }
 },
 "ListItem-444": {
 "component": "ListItem",
 "id": "ListItem-444",
 "data": { "title": "444s title“ }
 },
 "ListItem-555": {
 "component": "ListItem",
 "id": "ListItem-555",
 "data": { "title": "555s title" }
 }
 }
101. var React = require('react');
 var SubComponent = require('SubComponent');
 var ListItem = require('ListItem');
 
 module.exports = React.createClass(
 {
 displayName: 'ParentComponent',
 render: function () {
 var items = [];
 
 for (var key in this.props.subComponentList) {
 if (this.props.subComponentList.hasOwnProperty(key)) {
 items.push(
 <li>
 <ListItem componentId={this.props.subComponentList[key]}/>
 </li>
 );
 }
 }
 
 return (
 <div className="{this.props.key}">
 <h1>{this.props.other} Hello PHP {this.props.number}</h1>
 <SubComponent componentId={this.props.subComponent} />
 <ul>{items}</ul>
 </div>
 );
 }
 }
 );
102. var React = require('react');
 
 module.exports = React.createClass(
 {
 displayName: 'ListItem',
 render: function () {
 return (
 <div>
 {this.props.title}
 </div>
 );
 }
 }
 );
103. Server side rendering
104. SEO
105. Better user experience
106. Several approaches
107. NodeJS service
108. Request HTML Preparer nodeJS service PHP process Data JSON Rendered HTML string React Hogan
109. Bundling
110. http://webpack.github.io/
112. Whoa
113. This looks awfully complicated to debug
116. Benefits
117. Enables developers to only focus on their components
118. Rapid prototyping
119. Easier Refactoring
120. Easy re-using of components
121. Error Handling
122. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
123. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu EXCEPTION Institution
124. Profile Publications Publication Publication Publication LeftColumn Image Menu Institution
125. Experiments (A/B Testing)
126. Feature toggles
127. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
128. Profile Publications Publication Publication Publication AboutMeNew LeftColumn Image Menu Institution
129. Caching of Components
130. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu <esi:include src="..." /> Institution
131. Load components asynchronously
132. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu <div id="placeholder"></div> <script>loadWidget('/aboutMe', function(w) { w.render({ replace : '#placeholder' }); })</script> Institution
133. Conclusion?
134. Think about your architecture
135. Refactor and make it better continuously
136. Frontend and backend are part of the same application
137. Don't rewrite your whole codebase in one go
138. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de