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
Git Lint
bkuhlmann
4
750
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Snowflakeで眠ったデータを起こそう!
estie
0
120
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
ONE WEDGE_company_guide
1wedge_one
0
490
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
Thoughts on Productivity
jonyablonski
58
3.8k
Atom: Resistance is Futile
akmur
259
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
4 Signs Your Business is Dying
shpigford
175
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Writing Fast Ruby
sferik
621
60k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Gamification - CAS2011
davidbonilla
76
4.6k
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]