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

Creating Scalable Web-Applications

Avatar for Bastian Hofmann Bastian Hofmann
September 17, 2012
Programming
400
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
370
Creating a fast Kubernetes Development Workflow
Avatar for Bastian Hofmann bastianhofmann
0
150
Highly available cross-region deployments with Kubernetes
Avatar for Bastian Hofmann bastianhofmann
1
170
From source to Kubernetes in 30 minutes
Avatar for Bastian Hofmann bastianhofmann
0
200
Introduction to Kubernetes
Avatar for Bastian Hofmann bastianhofmann
1
140
CI/CD with Kubernetes
Avatar for Bastian Hofmann bastianhofmann
0
250
Creating a fast Kubernetes Development Workflow
Avatar for Bastian Hofmann bastianhofmann
1
290
Deploying your first Micro-Service application to Kubernetes
Avatar for Bastian Hofmann bastianhofmann
2
210
Creating a fast Kubernetes Development Workflow
Avatar for Bastian Hofmann bastianhofmann
0
280

Other Decks in Programming

See All in Programming
AIと壁打ちしながら進めるコスト管理
Avatar for Ryoma Fujiwara fufuhu
1
1.4k
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
220
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.8k
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
150
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
2
350
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
Avatar for freee freee
PRO
0
350
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.6k
引き算の組織 ― アウトカムとAIに全振りするために辞めたこと ― / Organization by Subtraction
Avatar for ヤマモトヒロキ hirokiyamamoto14
PRO
0
270
SlackアプリとLambdaの 連携を構築した話
Avatar for pawn pawn_4_s
1
130
Android CLI
Avatar for Sungyong An fornewid
0
230
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
6
2.3k
まずはプロンプトガイドを読もう、話はそれからだ
Avatar for Akira TSURUDA kiakiraki
1
180

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
240
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
900
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.1k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
340
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
39k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
870
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Designing for Performance
Avatar for Lara Hogan lara
611
70k

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]