Post on 12-Jan-2015
description
Architecture of a Modern Web AppJeremy Grelle, SpringSource Staff Engineer
Github / Twitter: @jeremyg484
1Thursday, December 13, 12
Overview
• Where we’ve been• Where we’re going• How we’ll get there• Questions
2Thursday, December 13, 12
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
3Thursday, December 13, 12
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
4Thursday, December 13, 12
LiveScript JavaScript
• Dynamic pages• Lightweight alternative 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
5http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg
Thursday, December 13, 12
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
6Thursday, December 13, 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
7Thursday, December 13, 12
Client Side Applications
• Business logic lives on the client• Resources and permanent state
stored on the server• Application 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
8Thursday, December 13, 12
Overview
• Where we’ve been• Where we’re going• How we’ll get there• Questions
9Thursday, December 13, 12
From: server-side appsTo: smart clients and services
10Thursday, December 13, 12
Client
Server
ViewGeneration Controllers
Service Layer
RepositoriesChannels RDBMS
CRUD
ApplicationServer
Browser
Browser-based
HTML Rendering
(progressive
enhancement)
HTML HTTP
Thursday, December 13, 12
Client
Server
Service Layer
RepositoriesChannels RDBMS
CRUD
Browser app orembedded in native
HTML5 & JS Engine
ControllersDOM
Client-side modelweb stg
Thursday, December 13, 12
Client
Server
Service Layer
RepositoriesChannels RDBMS
CRUD
Browser app orembedded in native
JSON HTTP & websockets
HTML5 & JS Engine
ControllersDOM
Client-side modelweb stg
Thursday, December 13, 12
Client
Server
Service Layer
RepositoriesChannels RDBMS
CRUD
Browser app orembedded in native
JSON HTTP & websockets
HTML5 & JS Engine
ControllersDOM
Client-side model
events& notifications
web stg
Thursday, December 13, 12
Client
Cloud/PaaS
Service Layer
RepositoriesChannels RDBMS
CRUD
Browser app orembedded in native
JSON HTTP & websockets
HTML5 & JS Engine
ControllersDOM
Client-side model
events& notifications
web stg
Thursday, December 13, 12
Client
Cloud/PaaSRepositoriesChannels RDBMS
CRUD
Browser app orembedded in native
JSON HTTP & websockets
HTML5 & JS Engine
ControllersDOM
Client-side model
events& notifications
web stg
Service Service Servicebusiness / domain services
Thursday, December 13, 12
Client
PaaSCRUD
RepositoriesChannels RDBMS
Browser app orembedded in native
JSON HTTP & websockets
HTML5 & JS Engine
ControllersDOM
Client-side model
events& notifications
web stg
Service Service Servicebusiness / domain services
Thursday, December 13, 12
Client
PaaS
Browser app orembedded in native
JSON HTTP & websockets
HTML5 & JS Engine
ControllersDOM
Client-side model
events& notifications
web stg
Service Service Servicebusiness / domain services
Thursday, December 13, 12
events& notifications
Client
PaaS
Browser app orembedded in native
JSON HTTP & websockets
HTML5 & JS Engine
ControllersDOM
Client-side modelweb stg
Service Service Servicebusiness / domain services
Service Service Service platform services,web APIs
SQL NoSQL Other
Thursday, December 13, 12
HTML5(& native)
PaaS
JSON HTTP & websockets
HTML5 & JS Engine
events&
notifications
Applications
Services
Thursday, December 13, 12
Overview
• Where we’ve been• Where we’re going• How we’ll get there• Questions
17Thursday, December 13, 12
Simplify Views
• Simple template can render on the client or server– JSP, et al will never render client side
• Avoid imperative logic• Lot of conditions may indicate the model is poorly structured
• Can the model be cleanly serialized?
18Thursday, December 13, 12
Client side code as a first class citizen
• Apply design patterns• Modularize• Unit test• Enforce code quality
• See “IoC + JavaScript” coming up next.
19Thursday, December 13, 12
20
DemoMonty Hall
Thursday, December 13, 12
Think Messaging
• Web Sockets are message based• Web Workers are message based• DOM Events are message based
• Web vs Integration is a false dichotomy
• See “Going Async - Practical Patterns for Push-Enabled Applications” coming soon to SpringSource YouTube channel.
21Thursday, December 13, 12
22
DemoClient Server Messaging
Thursday, December 13, 12
Client vs Server
• The definitions of “back-end” and “front-end” are shifting– front-end != client, back-end != server
• Embrace both sides
• Specialize in client/server integration
23Thursday, December 13, 12
Frameworks
• New frameworks are emerging– not quite prime time– watch this space
• Frameworks will not solve all your issues– sorry
24Thursday, December 13, 12
Resources
• s2js - http://www.github.com/s2js
• cujo.js - http://www.cujojs.com
• scripted - https://github.com/scripted-editor/scripted
• SockJS - http://www.sockjs.org
• Monty Hall REST API - https://github.com/acolyer/monty-hall
• Monty Hall Client - https://github.com/five-eleven/monty-hall-ui
• Messaging Demo - https://github.com/jeremyg484/s12gx-push-service/
25Thursday, December 13, 12