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
370
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
260
Creating a fast Kubernetes Development Workflow
bastianhofmann
0
85
Highly available cross-region deployments with Kubernetes
bastianhofmann
1
120
From source to Kubernetes in 30 minutes
bastianhofmann
0
120
Introduction to Kubernetes
bastianhofmann
1
140
CI/CD with Kubernetes
bastianhofmann
0
140
Creating a fast Kubernetes Development Workflow
bastianhofmann
1
240
Deploying your first Micro-Service application to Kubernetes
bastianhofmann
2
160
Creating a fast Kubernetes Development Workflow
bastianhofmann
0
160
Other Decks in Programming
See All in Programming
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
What We Can Learn From OSS
inouehi
0
420
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
960
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
170
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
禅の心を手に入れよ
eltociear
1
130
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
Ruby Pattern Matching
bkuhlmann
0
930
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
1
110
Ruby GitHub Packages
bkuhlmann
0
630
Goのmultiple errorsについて (2024年4月版)
syumai
4
980
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Visualization
eitanlees
136
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Unsuck your backbone
ammeep
663
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Infographics Made Easy
chrislema
238
18k
The Language of Interfaces
destraynor
151
23k
RailsConf 2023
tenderlove
4
540
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]