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
2
390

Creating Scalable Web-Applications

Talk from Web Developer Conference 2012, Hamburg

Avatar for Bastian Hofmann

Bastian Hofmann

September 17, 2012
Tweet

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
130
Highly available cross-region deployments with Kubernetes
Avatar for Bastian Hofmann bastianhofmann
1
150
From source to Kubernetes in 30 minutes
Avatar for Bastian Hofmann bastianhofmann
0
180
Introduction to Kubernetes
Avatar for Bastian Hofmann bastianhofmann
1
140
CI/CD with Kubernetes
Avatar for Bastian Hofmann bastianhofmann
0
220
Creating a fast Kubernetes Development Workflow
Avatar for Bastian Hofmann bastianhofmann
1
270
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
250

Other Decks in Programming

See All in Programming
CSC307 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
470
社内規程RAGの精度を73.3% → 100%に改善した話
Avatar for oharu121 oharu121
13
8k
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
170
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.3k
grapheme_strrev関数が採択されました（あと雑感）
Avatar for てきめん tekimen youkidearitai
PRO
1
210
PostgreSQL を使った快適な go test 環境を求めて
Avatar for Kotaro Otaka otakakot
0
540
New in Go 1.26 Implementing go fix in product development
Avatar for sunecosuri sunecosuri
0
420
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
560
The Ralph Wiggum Loop: First Principles of Autonomous Development
Avatar for Ryuichiro Semba sembayui
0
3.7k
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
190
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
Avatar for n4mlz n4mlz
0
130
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
Avatar for ya_ma23 ya_ma23
0
370

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
160
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
67
37k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
170
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k

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]