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

Creating Scalable Web-Applications

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Bastian Hofmann Bastian Hofmann
September 17, 2012
Programming
390
2

Creating Scalable Web-Applications

Talk from Web Developer Conference 2012, Hamburg

Avatar for Bastian Hofmann

Bastian Hofmann

September 17, 2012

More Decks by Bastian Hofmann

See All by Bastian Hofmann
Monitoring in Kubernetes with Prometheus and Grafana
Avatar for Bastian Hofmann bastianhofmann
0
350
Creating a fast Kubernetes Development Workflow
Avatar for Bastian Hofmann bastianhofmann
0
140
Highly available cross-region deployments with Kubernetes
Avatar for Bastian Hofmann bastianhofmann
1
160
From source to Kubernetes in 30 minutes
Avatar for Bastian Hofmann bastianhofmann
0
190
Introduction to Kubernetes
Avatar for Bastian Hofmann bastianhofmann
1
140
CI/CD with Kubernetes
Avatar for Bastian Hofmann bastianhofmann
0
230
Creating a fast Kubernetes Development Workflow
Avatar for Bastian Hofmann bastianhofmann
1
280
Deploying your first Micro-Service application to Kubernetes
Avatar for Bastian Hofmann bastianhofmann
2
190
Creating a fast Kubernetes Development Workflow
Avatar for Bastian Hofmann bastianhofmann
0
260

Other Decks in Programming

See All in Programming
The Less-Told Story of Socket Timeouts
Avatar for Misaki Shioi(塩井美咲/しおい) coe401_
3
1.1k
Road to RubyKaigi: Play Hard(ware)
Avatar for makicamel makicamel
1
560
【26新卒研修資料】TDD実装演習
Avatar for ディップ株式会社 dip_tech
PRO
0
180
サークル参加から学ぶ、小さな事業の回し方
Avatar for yuzneri yuzneri
0
150
【26新卒研修】OpenAPI/Swagger REST API研修
Avatar for ディップ株式会社 dip_tech
PRO
0
150
Agent Skills を社内で育てる仕組み作り
Avatar for jackchuka jackchuka
1
1.7k
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
1
680
when storing skills in S3 file
Avatar for watany watany
3
1.4k
Back to the roots of date
Avatar for jinroq jinroq
0
770
AlarmKitで明後日起きれるアラームアプリを作る
Avatar for Trickart trickart
0
130
継続的な負荷検証を目指して
Avatar for Kazuhiko Yamashita pyama86
3
1k
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
Avatar for akase244 akase244
0
1.4k

Featured

See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
300
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
560
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
HDC tutorial
Avatar for Michiel Stock michielstock
2
650
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
740
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
510
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
240
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.4k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.3k

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 [email protected]