Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating Scalable Web-Applications
Search
Bastian Hofmann
September 17, 2012
Programming
2
380
Creating Scalable Web-Applications
Talk from Web Developer Conference 2012, Hamburg
Bastian Hofmann
September 17, 2012
Tweet
Share
More Decks by Bastian Hofmann
See All by Bastian Hofmann
Monitoring in Kubernetes with Prometheus and Grafana
bastianhofmann
0
320
Creating a fast Kubernetes Development Workflow
bastianhofmann
0
100
Highly available cross-region deployments with Kubernetes
bastianhofmann
1
140
From source to Kubernetes in 30 minutes
bastianhofmann
0
150
Introduction to Kubernetes
bastianhofmann
1
140
CI/CD with Kubernetes
bastianhofmann
0
180
Creating a fast Kubernetes Development Workflow
bastianhofmann
1
250
Deploying your first Micro-Service application to Kubernetes
bastianhofmann
2
180
Creating a fast Kubernetes Development Workflow
bastianhofmann
0
220
Other Decks in Programming
See All in Programming
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
PipeCDのプラグイン化で目指すところ
warashi
1
270
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
150
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
12k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
430
Deep Dive into ~/.claude/projects
hiragram
13
2.5k
XP, Testing and ninja testing
m_seki
3
240
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
75
24k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Gamification - CAS2011
davidbonilla
81
5.3k
Done Done
chrislema
184
16k
How to Ace a Technical Interview
jacobian
277
23k
Git: the NoSQL Database
bkeepers
PRO
430
65k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
BBQ
matthewcrist
89
9.7k
Speed Design
sergeychernyshev
32
1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Typedesign – Prime Four
hannesfritz
42
2.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
Creating scalable Web Applications @BastianHofmann
The usual Scaling Talk
Big Data Servers Caching Query Optimization Database Sharding Load Balancing
Indices
But what about the frontend?
Rendering performance Asset loading Content Delivery Networks HTTP Caching Minifying
JavaScript Image Compression Sprites Smooth animations
This talk will not be about any of this!
Application architecture
Structure
Code and component re-use
Rapid Development
Large code-bases
Frameworks to the rescue
?
Most Web Frameworks are incomplete
None
None
None
None
None
None
None
None
webserver HTML browser JS
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
So?
None
None
None
None
None
None
None
None
Questions? Ask!
http://speakerdeck.com/u/bastianhofmann
None
Mojito http://developer.yahoo.com/cocktails/mojito/
Meteor http://www.meteor.com
https://github.com/bashofmann/meteor_shoutbox_demo
DEMO
What about existing applications?
Legacy Code
Incremental Refactoring
many roads
The next SoundCloud http://backstage.soundcloud.com/2012/06/building-the- next-soundcloud/
None
status quo
webserver loadbalancer pgsql memcached mongodb services
webserver
None
Large, Old Codebase
MVC
None
complicated routing
PHP templates
lazy DB queries in view
None
Duplication and only some Code re-use
We can do better
Components
None
Self contained
Can be addressed and rendered separately
Server JS Browser JSON HTML HTML
JS is part of the component
Share code between server and client
Templates, Validation, Entities,...
It needs to be fast
We called them Widgets
PHP Controller Mustache Template JavaScript view class Widget Providing data
Handling browser events Displaying data
Why no models in the frontend? http://backbonejs.org/#Model
None
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
Remember: self contained
Do not fetch data directly
Sssssssslllloooooowww
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
Account Account Account Account Account Publication1 Publication2 Publication3
Require stuff
http://www.infoq.com/presentations/Evolution-of-Code- Design-at-Facebook/
The Preparer
Requirements
Resolver
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
None
EntityRequirement
None
Request Cache
Multi-GET
ServiceRequirement
None
Required / Optional
None
Hides storage specific logic from controllers
Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces
Connector Implementations
Widget Widget Widget Widget Preparer Fetch Requirements Resolver Resolver Services
Connector Interfaces Connector Implementations
Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces
Connector Implementations Batch requirements and pass them to resolvers
Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces
Connector Implementations Call Services as effective as possible (Multi-GET,...)
Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces
Connector Implementations Attach fetched data to Requirements and pass them back to the preparer
Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces
Connector Implementations Distribute fetched data to the widgets that required it
Requirement doesn't need to be only data
WidgetRequirement
None
RequestDataRequirement
None
Data dependencies within a widget
=> Callbacks
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
CALLBACK CALLBACK CALLBACK
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
CALLBACK CALLBACK CALLBACK
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
CALLBACK CALLBACK CALLBACK
None
PHP 5.5 Generators https://wiki.php.net/rfc/generators
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) ) ); }
Data dependencies between Widgets
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
Prefills
None
None
Rendering
HTML
JSON
Templates
Mustache } http://mustache.github.com/
None
Helper Methods
• nl2br • truncate • pluralize • wordwrap • highlight
• ...
http://pecl.php.net/package/v8js V8js
JavaScript
WidgetViews
None
Loading widgets from JavaScript
None
Rendering callbacks
None
Benefits
Enables developers to only focus on their components
Easier Refactoring
Error Handling
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
EXCEPTION
Profile Publications Publication Publication Publication LeftColumn Image Instiution Menu
Testing
None
Bandit Algorithm http://untyped.com/untyping/2011/02/11/stop-ab-testing- and-make-out-like-a-bandit/
Caching of Components
Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu
<esi:include src="..." />
Faster UX
window.history.pushState
Conclusion?
Think about your architecture
Refactor and make it better continuously
Frontend and backend are part of the same application
Don't rewrite your whole codebase in one go
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]