Creating Scalable Web-Applications

Talk from Web Developer Conference 2012, Hamburg

Transcript

1. Creating scalable Web Applications @BastianHofmann
2. The usual Scaling Talk
3. Big Data Servers Caching Query Optimization Database Sharding Load Balancing Indices
4. But what about the frontend?
5. Rendering performance Asset loading Content Delivery Networks HTTP Caching Minifying JavaScript Image Compression Sprites Smooth animations
6. This talk will not be about any of this!
7. Application architecture
8. Structure
9. Code and component re-use
10. Rapid Development
11. Large code-bases
12. Frameworks to the rescue
13. ?
14. Most Web Frameworks are incomplete
23. webserver HTML browser JS
24. e duplication 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
25. So?
34. Questions? Ask!
35. http://speakerdeck.com/u/bastianhofmann
37. Mojito http://developer.yahoo.com/cocktails/mojito/
38. Meteor http://www.meteor.com
39. https://github.com/bashofmann/meteor_shoutbox_demo
40. DEMO
41. What about existing applications?
42. Legacy Code
43. Incremental Refactoring
44. many roads
45. The next SoundCloud http://backstage.soundcloud.com/2012/06/building-the- next-soundcloud/
47. status quo
48. webserver loadbalancer pgsql memcached mongodb services
49. webserver
51. Large, Old Codebase
52. MVC
54. complicated routing
55. PHP templates
56. lazy DB queries in view
58. Duplication and only some Code re-use
59. We can do better
60. Components
62. Self contained
63. Can be addressed and rendered separately
64. Server JS Browser JSON HTML HTML
65. JS is part of the component
66. Share code between server and client
67. Templates, Validation, Entities,...
68. It needs to be fast
69. We called them Widgets
70. PHP Controller Mustache Template JavaScript view class Widget Providing data Handling browser events Displaying data
71. Why no models in the frontend? http://backbonejs.org/#Model
73. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
74. Remember: self contained
75. Do not fetch data directly
76. Sssssssslllloooooowww
77. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu Account Account Account Account Account Publication1 Publication2 Publication3
78. Require stuff
79. http://www.infoq.com/presentations/Evolution-of-Code- Design-at-Facebook/
80. The Preparer
81. Requirements
82. Resolver
83. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
84. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
85. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
86. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
88. EntityRequirement
90. Request Cache
91. Multi-GET
92. ServiceRequirement
94. Required / Optional
96. Hides storage specific logic from controllers
97. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations
98. Widget Widget Widget Widget Preparer Fetch Requirements Resolver Resolver Services Connector Interfaces Connector Implementations
99. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Batch requirements and pass them to resolvers
100. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Call Services as effective as possible (Multi-GET,...)
101. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Attach fetched data to Requirements and pass them back to the preparer
102. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces Connector Implementations Distribute fetched data to the widgets that required it
103. Requirement doesn't need to be only data
104. WidgetRequirement
106. RequestDataRequirement
108. Data dependencies within a widget
109. => Callbacks
110. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu CALLBACK CALLBACK CALLBACK
111. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu CALLBACK CALLBACK CALLBACK
112. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu CALLBACK CALLBACK CALLBACK
114. PHP 5.5 Generators https://wiki.php.net/rfc/generators
115. public function collect() { yield array( new EntityRequirement( 'account', Account::class, array('accountId' => $this->requestContect->getAccountId()) ), ); yield array( new ServiceRequirement( 'scienceDisciplines', AccountService::class, 'getScienceDisciplines', array('account' => $this->account) ) ); }
116. Data dependencies between Widgets
117. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
118. Prefills
121. Rendering
122. HTML
123. JSON
124. Templates
125. Mustache } http://mustache.github.com/
127. Helper Methods
128. • nl2br • truncate • pluralize • wordwrap • highlight • ...
129. http://pecl.php.net/package/v8js V8js
130. JavaScript
131. WidgetViews
133. Loading widgets from JavaScript
135. Rendering callbacks
137. Benefits
138. Enables developers to only focus on their components
139. Easier Refactoring
140. Error Handling
141. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
142. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu EXCEPTION
143. Profile Publications Publication Publication Publication LeftColumn Image Instiution Menu
144. Testing
146. Bandit Algorithm http://untyped.com/untyping/2011/02/11/stop-ab-testing- and-make-out-like-a-bandit/
147. Caching of Components
148. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu <esi:include src="..." />
149. Faster UX
150. window.history.pushState
151. Conclusion?
152. Think about your architecture
153. Refactor and make it better continuously
154. Frontend and backend are part of the same application
155. Don't rewrite your whole codebase in one go
156. h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann h"p://speakerdeck.com/u/bas2anhofmann h"ps://github.com/bashofmann mail@bas2anhofmann.de