Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Scalable Web-Applications

Creating Scalable Web-Applications

Talk from Web Developer Conference 2012, Hamburg

8e82eb7e128a14a16d642ae55227339b?s=128

Bastian Hofmann

September 17, 2012
Tweet

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

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  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?

  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. Questions? Ask!

  35. http://speakerdeck.com/u/bastianhofmann

  36. None
  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/

  46. None
  47. status quo

  48. webserver loadbalancer pgsql memcached mongodb services

  49. webserver

  50. None
  51. Large, Old Codebase

  52. MVC

  53. None
  54. complicated routing

  55. PHP templates

  56. lazy DB queries in view

  57. None
  58. Duplication and only some Code re-use

  59. We can do better

  60. Components

  61. None
  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

  72. None
  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

  87. None
  88. EntityRequirement

  89. None
  90. Request Cache

  91. Multi-GET

  92. ServiceRequirement

  93. None
  94. Required / Optional

  95. None
  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

  105. None
  106. RequestDataRequirement

  107. None
  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
  113. None
  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

  119. None
  120. None
  121. Rendering

  122. HTML

  123. JSON

  124. Templates

  125. Mustache } http://mustache.github.com/

  126. None
  127. Helper Methods

  128. • nl2br • truncate • pluralize • wordwrap • highlight

    • ...
  129. http://pecl.php.net/package/v8js V8js

  130. JavaScript

  131. WidgetViews

  132. None
  133. Loading widgets from JavaScript

  134. None
  135. Rendering callbacks

  136. None
  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

  145. None
  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