Structuring large code bases with small re-usable components

From JSUnconf

Transcript

1. Structuring a large code base with re-usable components @BastianHofmann
2. Let's talk about...
3. Web Application architecture
4. Handling large code-bases
5. Code and component
   re-use
6. Rapid Development
7. webserver HTML browser JS
8. webserver HTML browser JS Ajax
9. webserver HTML browser JS Ajax
10. 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
11. A few words about me
19. Questions? Ask
20. http://speakerdeck.com/u/bastianhofmann
22. webserver loadbalancer pgsql memcached mongodb services
23. webserver
24. status quo
26. PHP
27. MVC
28. PHP templates
29. Duplication and only some Code re- use
30. We can do
    better
31. Components
40. Self contained
41. Can be addressed and rendered separately
42. Server JS Browser JSON HTML HTML
44. PHP controller is part of the component
45. JS is part of the component
46. CSS can be part of the component
47. Share code between server and client
48. Templates, Validation, Entities,...
49. It needs to be fast
50. PHP Controller Mustache Template JavaScript view class Widget Providing data Handling browser events Displaying data CSS
52. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Institution Menu
53. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Server Request Response Institution
54. LeftColumn Image Menu Server Request Response
55. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Institution Menu
56. Widget
    Requirement
57. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
58. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
59. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
60. Remember:
    self contained
61. Do not fetch data directly
62. Sssssssllllooooowww
63. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Account Account Account Account Account Publication1 Publication2 Publication3 Institution
64. Require stuff
65. http://www.infoq.com/presentations/Evolution-of-Code- Design-at-Facebook/
67. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations
68. Widget Widget Widget Widget Preparer Fetch Requirements Resolver Resolver Services Connector Interfaces Connector Implementations
69. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Batch requirements and pass them to resolvers
70. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Call Services as effective as possible (Multi-GET,...)
71. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Attach fetched data to Requirements and pass them back to the preparer
72. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Distribute fetched data to the widgets that required it
73. public function collect() {
 return [
 new EntityRequirement(
 'account',
 Account::class,
 ['id' => $this->request->get('id')]
 ),
 ];
 }
74. Request Cache
75. Multi-GET
76. Futures
77. Data dependencies within a widget
78. => Callbacks
79. public function collect() {
 yield [
 new EntityRequirement(
 'account',
 Account::class,
 ['id' => $this->request->get('id')]
 ),
 ];
 
 yield [
 new ServiceRequirement(
 'scienceDisciplines',
 AccountService::class,
 'getScienceDisciplines',
 ['account' => $this->account]
 )
 ];
 }
80. Data dependencies between Widgets
81. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
82. Prefills
83. 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(), 'publication' => $publication ]
 );
 }
 }

84. class PublicationItem {
 
 public $publicationId;
 public $publication;
 
 public function collect() {
 yield new RequestDataRequirement('publicationId');
 yield [
 new EntityRequirement(
 'publication',
 Publication::class,
 ['id' => $this->publicationId]
 )
 ];
 }
 }
85. Whoa, this looks awfully complicated to debug
91. So that was the backend
93. Rendering
94. HTML
95. JSON
96. Templates
97. Mustache } http://mustache.github.com/
98. <div id="{{widgetId}}">
 <h3>
 Publications 
 <a href="javascript:" class="js-showAll">
 ({{count}})
 </a>
 </h3>
 <ul>
 {{#publicationItems}}
 <li>{{{.}}}</li>
 {{/publicationItems}}
 </ul>
 {{#showLegalFooter}}
 {{{legalFooter}}}
 {{/showLegalFooter}}
 </div>
99. http://pecl.php.net/package/v8js V8js
100. JavaScript
101. WidgetViews
102. <div id="{{widgetId}}">
 <h3>
 Publications 
 <a href="javascript:" class="js-showAll">
 ({{count}})
 </a>
 </h3>
 <ul>
 {{#publicationItems}}
 <li>{{{.}}}</li>
 {{/publicationItems}}
 </ul>
 {{#showLegalFooter}}
 {{{legalFooter}}}
 {{/showLegalFooter}}
 </div>
103. YUI.add('views.publicationList', function (Y) {
 Y.views.publicationList = Y.Base.create(Y.WidgetView, {
 events : {
 '.js-showALl' : {
 click : 'showALl'
 }
 },
 showAll : function () {
 var node = this.get('container');
 
 node.addClass('loading');
 
 Y.loadWidget(‚/publications/all', {
 keywords : this.data.keywords
 }, function (widget) {
 widget.render({
 replace : node
 });
 });
 }
 });
 });
104. http://twitter.github.io/flight/
105. http://facebook.github.io/react/
106. http://www.youtube.com/watch?v=fqULJBBEVQE
107. http://www.polymer-project.org/
108. <polymer-element name="tk-element" attributes="owner color">
 <template>
 <span>This is <strong>{{owner}}</strong>'s tk-element.</span>
 <span id="el" style="color: {{color}}">Not ready...</span>
 </template>
 <script> 
 Polymer('tk-element', {
 owner: "Bastian",
 color: "red",
 ready: function() {
 this.$.el.innerText = this.owner + " is ready!";
 }
 });
 </script>
 </polymer-element>
109. <!DOCTYPE html>
 <html>
 <head>
 <script src="bower_components/platform/platform.js"> </script>
 <link rel="import" href="elements/tk-element.html">
 </head>
 <body>
 <tk-element color="blue"></tk-element>
 </body>
 </html>
110. Benefits
111. Enables developers to only focus on their components
112. Rapid prototyping
113. Easier Refactoring
114. Error Handling
115. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
116. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu EXCEPTION Institution
117. Profile Publications Publication Publication Publication LeftColumn Image Menu Institution
118. Experiments (A/B Testing)
120. Caching of Components
121. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu <esi:include src="..." /> Institution
122. Easy re-using of components
124. Load components asynchronously
125. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu <div id="placeholder"></div> <script>loadWidget('/aboutMe', function(w) { w.render({ replace : '#placeholder' }); })</script> Institution
126. BigPipe https://www.facebook.com/note.php? note_id=389414033919
128. Profile Menu Header LeftColumn RightColumn
133. pushState
134. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Menu Institution
135. Profile Questions Question Question Question AboutMe LeftColumn Image Menu Institution
136. Conclusion?
137. Think about your architecture
138. Refactor and make it better continuously
139. Frontend and backend are part of the same application
140. Don't rewrite your whole codebase in one go
141. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann ! mail@bastianhofmann.de