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
110
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
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
580
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
130
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
910
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
330
効率的な開発手段として VRTを活用する
ishkawa
1
170
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
530
ソフトウェア設計とAI技術の活用
masuda220
PRO
23
6.2k
Workers を定期実行する方法は一つじゃない
rokuosan
0
110
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
101
38k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
640
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Gamification - CAS2011
davidbonilla
81
5.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Balancing Empowerment & Direction
lara
1
480
Being A Developer After 40
akosma
90
590k
4 Signs Your Business is Dying
shpigford
184
22k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Rails Girls Zürich Keynote
gr2m
95
14k
A designer walks into a library…
pauljervisheath
207
24k
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 mail@bas2anhofmann.de