© 2013 SpringSource, A division of VMware. All rights reserved
Re-distribution allowed with author’s consent.
Architecture of a Modern Web App
Scott Andrews
@scothis
Re-distribution allowed with author’s consent.2
About Me
Joined SpringSource in 2008
Wearer of many hats
Drifter• frameworks ⇆ applications
• open source ⇆ commercial
• client ⇆ server
• front-end ⇆ back-end
Teams• Spring Web
• tc Server
• Spring Insight
• Cloud Foundry
• SpringSource JavaScript
Re-distribution allowed with author’s consent.3
Agenda
Where we’ve been
Where we’re going
How we’ll get there
Further resources
Questions
Re-distribution allowed with author’s consent.4
Agenda
Where we’ve been
Where we’re going
How we’ll get there
Further resources
Questions
Re-distribution allowed with author’s consent.5
In the beginning...
Re-distribution allowed with author’s consent.6
In the beginning...
Sites were static HTML Pros:• low computational overhead
• highly cacheable
• highly indexable
Cons:
• hard (easy?) to update
• no personalization
• usually poor UI
Re-distribution allowed with author’s consent.7
Let there be CGI
Re-distribution allowed with author’s consent.8
Let there be CGI
Introduced dynamic generated pages
Pros:• dynamic!
• selectively cacheable
• highly indexable
• personalizable
Cons:
• “high” computational overhead
• hard to create
• usually poor UI
Re-distribution allowed with author’s consent.9
LiveScript JavaScript
http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg
Re-distribution allowed with author’s consent.10
LiveScript JavaScript
Dynamic pages
Lightweight complement to applets
Mostly used for simple scripting• basic form validation
• popup ads
• comet cursor trails
Pros:• enhanced usability, maybe
• reduced trips to the server
Cons:
• abuses annoyed users
• business logic often implemented twice: client and server
http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg
Re-distribution allowed with author’s consent.11
AJAX - Web 2.0
Google Maps sparked Web 2.0
GMail• required JavaScript
Pros:• killer UI
• more responsive apps
Cons:
• difficult to cache
• impossible to index
• required JavaScript
Re-distribution allowed with author’s consent.12
Unobtrusive JavaScript
No JavaScript, no problem
Provide features for user agents that support them• fall back to basic HTML
Pros:• wider compatibility
• just as rich UI
• just as responsive
Cons:
• higher development costs
• requires thoughtful engineering
Re-distribution allowed with author’s consent.13
Client Side Applications
Business logic lives on the client
Resources and permanent state stored on the server
Application and session state stored on client
Pros:• reduce server workloads
• application is highly cacheable
• extremely rich UI
Cons:
• content not indexable
• requires JavaScript
• often requires a ‘modern’ browser
Re-distribution allowed with author’s consent.14
Agenda
Where we’ve been
Where we’re going
How we’ll get there
Further resources
Questions
Re-distribution allowed with author’s consent.15
From server-side app to smart clients and services
Browser-based
HTML Rendering
(progressive enhancement)
HTML HTTP
ApplicationServer
ViewGeneration Controllers
Client
Server
Browser
Service Layer
Channels Repositories RDBMSCRUD
Re-distribution allowed with author’s consent.16
From server-side app to smart clients and services
Client
ServerRDBMSCRUD
HTML5 & JS Engine
ControllersDOM
Client-side model
Service Layer
Channels Repositories
web stg
HTTP &WebSockets
events ¬ificationsJSON
Browser app orembedded in native
Re-distribution allowed with author’s consent.17
From server-side app to smart clients and services
Client
RDBMSCRUD
HTML5 & JS Engine
ControllersDOM
Client-side model
Service Layer
Channels Repositories
web stg
HTTP &WebSockets
events ¬ificationsJSON
Service Service Service
Browser app orembedded in native
Server
business / domain services
Re-distribution allowed with author’s consent.18
From server-side app to smart clients and services
Client
RDBMSCRUD
HTML5 & JS Engine
ControllersDOM
Client-side model
Channels Repositories
web stg
HTTP &WebSockets
events ¬ificationsJSON
Service Service Servicebusiness / domain services
Browser app orembedded in native
Server
platform services,web APIs
Re-distribution allowed with author’s consent.19
From server-side app to smart clients and services
ClientHTML5 & JS Engine
ControllersDOM
Client-side model web stg
HTTP &WebSockets
events ¬ificationsJSON
Service Service Servicebusiness / domain services
Browser app orembedded in native
Service Service Service
SQL NoSQL otherPaaS
Re-distribution allowed with author’s consent.
DemoApplications as Services
Monty Hall
20
Re-distribution allowed with author’s consent.21
Agenda
Where we’ve been
Where we’re going
How we’ll get there
Further resources
Questions
Re-distribution allowed with author’s consent.22
Client side code as a first class citizen
Apply design patterns• all of your old favorites still apply
• functional and OO patterns
Modularize• decompose applications
• let loaders reassemble
Unit test• several excellent test harnesses
Enforce code quality• JSHint
Re-distribution allowed with author’s consent.
DemoClient side code as a first class citizen
23
Re-distribution allowed with author’s consent.24
Think Messaging
Web Sockets are message based
Web Workers are message based
DOM Events are message based
Web vs Integration is a false dichotomy
Re-distribution allowed with author’s consent.
DemoClient-Server Messaging
25
Re-distribution allowed with author’s consent.26
Simplify Views
Simple templates can render on the client or server• JSP, et al will never render client side
Can the model be cleanly serialized?• anemic domain model has benefits
Avoid imperative logic• lots of conditions may indicate the model is poorly structured
Re-distribution allowed with author’s consent.27
Client vs Server
The definitions of “back-end” and “front-end” are shifting• font-end != client, back-end != server
Embrace both sides
Specialize in client-server integration
Re-distribution allowed with author’s consent.28
Frameworks
New frameworks are emerging• quickly reaching maturity
• watch this space
Frameworks will not solve all your issues• sorry
Re-distribution allowed with author’s consent.29
Agenda
Where we’ve been
Where we’re going
How we’ll get there
Further resources
Questions
Re-distribution allowed with author’s consent.30
IoC + JavaScript
Decompose applications into modules
Assemble modules together with Dependency Injection
Brian Cavalier and John Hann• founders of Cujo.js
Webinar January 31st• signup: http://www.springsource.org/node/3768
• sneak peak: http://www.youtube.com/watch?v=TqX-CqYYwEc
Re-distribution allowed with author’s consent.31
Questions?
Re-distribution allowed with author’s consent.32
Links
Libraries• clicks.js: https://github.com/s2js/clicks
• integration.js: https://github.com/s2js/integration
• rest.js: https://github.com/s2js/rest
• wire.js: https://github.com/cujojs/wire
Scripted Editor: http://scripted-editor.github.com/scripted/
Monty Hall application• front-end: https://github.com/five-eleven/monty-hall-ui
• back-end: https://github.com/acolyer/monty-hall
IoC + JavaScript Webinar: http://www.springsource.org/node/3768
© 2013 SpringSource, A division of VMware. All rights reserved
Re-distribution allowed with author’s consent.
Architecture of a Modern Web App
Scott Andrews
@scothis
Top Related