Designing Modern Web Applications
-
Upload
lucas-carlson -
Category
Technology
-
view
188 -
download
3
Transcript of Designing Modern Web Applications
![Page 1: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/1.jpg)
Designing Modern Web Applications
by
Lucas Carlson
![Page 2: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/2.jpg)
Programmer18 Years
Author• Ruby Cookbook
• Programming for PaaS
Entrepreneur• AppFog PaaS
• Mog Music Streaming Service
Current Role• Chief Innovation Officer at
CenturyLink
Who Am I?
![Page 3: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/3.jpg)
Structure
1
Who Am I?2
What’s Wrong
With Legacy Web
Architectures?
3
How to Design a
Modern Web
Application
4
The 6 Worst
Web Practices and
How to Avoid Them
5
Getting the
Most From the
Cloud
6
Conclusions
![Page 4: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/4.jpg)
What’s Wrong With
Legacy Web Architectures?
If it ain’t broke, don’t fix it… right?
![Page 5: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/5.jpg)
Legacy Web Architectures
Web
Server2b
5
Application
Server
AppThena
Web App
Other
Web App
Other
Web App
Other
Web App
53
Database
Server
4
Data
CSS
Images
Pages
2a
BROWSE
R
![Page 6: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/6.jpg)
Legacy Web Architectures
Web
Server2b
5
Application
Server
AppThena
Web App
Other
Web App
Other
Web App
Other
Web App
53
Database
Server
4
Data
CSS
Images
Pages
BROWSE
R
![Page 7: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/7.jpg)
Browser
6
Web
Server2b
5
Application
Server
AppThena
Web App
Other
Web App
Other
Web App
Other
Web App
53
Database
Server
4
Data
CSS
Images
Pages
Legacy Web Architectures
Limited
Redundancy
Error 500
![Page 8: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/8.jpg)
Legacy Web Architectures
Web
Server
Application
Server
AppThena
Web App
Other
Web App
Other
Web App
Other
Web App
53
Database
Server
4
Data
CSS
Images
Pages
BROWSE
R
![Page 9: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/9.jpg)
Legacy Web Architectures
Web
Server
Application
Server
AppThena
Web App
Other
Web App
Other
Web App
Other
Web App
53
Database
Server
4
Data
CSS
Images
Pages
BROWSE
R
![Page 10: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/10.jpg)
Legacy Web Architectures
Browser
6
Web
Server
Application
Server
AppThena
Web App
Other
Web App
Other
Web App
Other
Web App
53
Database
Server
4
Data
CSS
Images
Pages
Limited
Scale
Error 500
![Page 11: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/11.jpg)
Limited
Scale
Legacy Web Architectures
1
5
Browser
6
Web
Server
5
2b
5
Application
Server
AppThena
Web App
Other
Web App
Other
Web App
Other
Web App
53
Database
Server
4
Data
CSS
Images
Pages
2a
Error 500
![Page 12: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/12.jpg)
Legacy Web Architectures
3-Tier
Systems
Scale… Up to a Point
Databases are
limited by disk size and
IO rates
Applications
are limited by RAM and CPU
As they get
more complex,they end up
breaking
![Page 13: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/13.jpg)
Legacy Web
Architectures are
![Page 14: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/14.jpg)
How to Design a
Modern Web Application
![Page 15: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/15.jpg)
What’s the opposite of
fragile?
Hint: It’s not robustness
![Page 16: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/16.jpg)
What’s the opposite of
fragile?
Answer : Antifragile
![Page 17: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/17.jpg)
Anti-fragile
Definition
![Page 18: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/18.jpg)
Examples
Break under
stress
Don’t care about
stress
Grow under
stress
![Page 19: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/19.jpg)
The “Heart of Africa”
![Page 20: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/20.jpg)
Characteristics
Monolithic Decentralized
Tightly coupled Loosely coupled
Heavyweight Lightweight
Complicated Simple
No redundancy Extra redundancy
AgileSluggish
Locked-in Interoperable
![Page 21: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/21.jpg)
Anti-fragile
actively randomly kills
its own servers to
ensure its architectural
anti-fragility
![Page 22: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/22.jpg)
Web Architectures Are Changing
To lightweight
distributed share-
nothing systems
From heavy
monolithic
backend systems
![Page 23: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/23.jpg)
Legacy Web Architectures
Web
Server
Application
Server
AppThena
Web App
Other
Web App
Other
Web App
Other
Web App
53
Database
Server
4
Data
CSS
Images
Pages
BROWSE
R
![Page 24: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/24.jpg)
Modern Web Architectures
App App App AppLoad
Balancer
DB DB
BROWSE
R
Worker WorkerLoad
Balancer
Message Bus / Distributed Service Discovery
![Page 25: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/25.jpg)
Resiliency
App App App AppLoad
Balancer
DB DB
BROWSE
R
Worker WorkerLoad
Balancer
Message Bus / Distributed Service Discovery
![Page 26: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/26.jpg)
The 6 Worst Web Practices
and How to Avoid Them
![Page 27: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/27.jpg)
Bad Practice #1:
Synchronicity
3-Tier Systems are like synchronous information factory lines
If one area chokes, the entire system fails
Usually leads to complex logical units
![Page 28: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/28.jpg)
Bad Practice #2:
Dependency on Filesystems
State data (sessions, uploaded
files, etc) stored on hard drives is
very hard to scale
Requires NFS or equivalent which
are complex and chatty
Lock you into monolithic coding
practices
![Page 29: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/29.jpg)
Bad Practice #3:
Heavy Server-Side Processing
Generating all the HTML server-
side made sense when client
hardware was slow
No REST/JSON/Javascript
All the information from a request
needs to be compiled before
returning any data
![Page 30: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/30.jpg)
Bad Practice #4:
Expecting Services to Always Be Available
Designing for Success is Failure
Cloud infrastructure has higher
failure rates than dedicated
hardware
Disaster recovery can be slow
and prone to errors
![Page 31: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/31.jpg)
Bad Practice #5:
Moving to the Cloud without a Plan
Cloud migration is often thought
of as simply a cost issue, not a
technical one
Higher failure rates in cloud
infrastructure will break fragile
applications
Migrations without a good plan
can cost a lot of unexpected
time and money
![Page 32: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/32.jpg)
Bad Practice #6:
Lack of Redundancy
All single points of failure are
terrible monsters (DNS, Load
Balancers, Network, etc.)
Not only choke points, but can
take down an otherwise robust
system
All your eggs in one basket
![Page 33: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/33.jpg)
![Page 34: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/34.jpg)
Good Practice #1:
Asynchronous Processes
Small decoupled apps
Communicate through a queue,
REST APIs, or a message bus
Each one should do one thing very
well: simple and specialized
![Page 35: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/35.jpg)
Good Practice #2:
Distributed Object Storage
Memcached, Redis, MongoDB,
CouchDB, etc.
Use instead of filesystems in legacy
web applications (sessions, file
uploads, etc.)
Consider replacing or caching the
largest and fastest growing relational
database tables with object storage
![Page 36: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/36.jpg)
Good Practice #3:
Micro-Services
Leverage increased CPU capacity on
browsers with client-side Javascript
• AngularJS, Ember, Backbone
Simple and specialized REST APIs
• Java: Spring, Spark, Jersey
• .NET: WCF, OpenRasta
• Ruby: Sinatra
• Python: Flask, Bottle
• PHP: Slim
BONUS: Power your mobile apps
![Page 37: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/37.jpg)
Good Practice #4:
Architecting for Failure
Think about anti-fragility upfront
Pro-actively stress your system
and study how it fails (not just load
testing, think of Netflix’s chaos
monkey)
Make all failures an opportunity to
eliminate bottlenecks, increase
redundancies and prepare for the
unexpected
![Page 38: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/38.jpg)
Good Practice #5:
Use Cloud Migration as an Opportunity to
Modernize Architecture
Don’t half-do it
Not all applications will do well in cloud
environments
Automation is vital in cloud environments
where infrastructure isn’t reliable, traditional
IT can’t respond quickly enough
![Page 39: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/39.jpg)
Good Practice #6:
Redundancy Everywhere
Audit every area of your application
for redundancy
2x or 3x redundancy is not enough
(the failure of one or two will over-
load and choke the remaining
systems)
Google’s rule of thumb is for 5x
redundancy
Be like the Hydra, kill one head and
grow two in its spot
![Page 40: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/40.jpg)
Getting the Most From the Cloud
![Page 41: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/41.jpg)
Portfolio of Cloud Services
EASY
HARD
SaaS and Cloud Managed
Services
IaaS and PaaS
DevOps and Orchestration
![Page 42: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/42.jpg)
SaaS and Cloud Managed Services
Errors
Exceptional, Airbrake
Analytics
Statsmix, NewRelic,
Blitz
Other
Zerigo, CloudFlare,
Recurly, Stripe
Mobile
Urban Airship, Pusher,
Realtime.io
Data
ClearDB, Amazon
RDS, Heroku
Postgres, MongoLab
Search
Searify, Websolr, AWS
CloudSearch
Mailgun, Sendgrid,
CloudMailin
Logging
Loggly, Logentries,
Papertrail
Background
Tasks
Iron.io, CloudAMQP
![Page 43: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/43.jpg)
IaaS and PaaS
Heroku
AppFog
Cloud Foundry
OpenShift
Google App Engine
Azure
IaaS PaaS
AWS
Azure
DigitalOcean
Rackspace
CenturyLink Cloud
![Page 44: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/44.jpg)
DevOps and Orchestration
Apache
Mesos/Mesosphere
Kubernetes
CoreOS Fleet
OpenStack Heat
Chef
Puppet
SaltStack
Ansible
ZooKeeper
DevOps Orchestration
![Page 45: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/45.jpg)
What’s Orchestration?
![Page 46: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/46.jpg)
![Page 47: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/47.jpg)
API-Driven Automation Built on Top of
DevOps Tools for Declaratively Deploying
Complex Cloud Apps
Orchestration :
![Page 48: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/48.jpg)
Before Orchestration
Application
Job Scheduling
Engine
Job
Worker
Job
Worker
Job
Worker
Job
Worker
Database
![Page 49: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/49.jpg)
After Orchestration
Orchestration API
Job Scheduling
Engine
App App DBJob
Worker
![Page 50: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/50.jpg)
Modern App Architecture
Orchestration API
Job Scheduling
Engine
App App DBJob
Worker
App AppLoad
Balancer
DB WorkerLoad
Balancer
Message Bus / Distributed
Service Discovery
![Page 51: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/51.jpg)
Conclusions
![Page 52: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/52.jpg)
Conclusions
1. Legacy web architectures are
fragile
2. Think about anti-fragility (not
scalability) up-front
3. Micro-services are the anti-fragile
future:
Lightweight distributed
Share-nothing systems built with
APIs
1
2
3
![Page 53: Designing Modern Web Applications](https://reader033.fdocuments.net/reader033/viewer/2022042716/55a6ec5e1a28abd3058b4732/html5/thumbnails/53.jpg)
Thank You!
@cardmagic
LucasCarlson.com