1. Architecture of a Modern Web App
Jeremy Grelle, SpringSource Staff Engineer
Github / Twitter: @jeremyg484
1
Thursday, December 13, 12

2. Overview
• Where we’ve been
• Where we’re going
• How we’ll get there
• Questions
2
Thursday, December 13, 12

3. 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
3
Thursday, December 13, 12

4. Let there be CGI
• Introduced dynamic generated Pros:
pages • dynamic!
• selectively cacheable
• highly indexable
• personalizable
Cons:
• “high” computational overhead
• hard to create
• usually poor UI
4
Thursday, December 13, 12

5. LiveScript JavaScript
• Dynamic pages Pros:
• Lightweight alternative to applets • enhanced usability, maybe
• Mostly used for simple scripting • reduced trips to the server
– basic form validation
– popup ads Cons:
– comet cursor trails • abuses annoyed users
• business logic often implemented
twice: client and server
http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg
5
Thursday, December 13, 12

6. AJAX - Web 2.0
• Google Maps sparked Web 2.0 Pros:
• GMail • killer UI
– required JavaScript • more responsive apps
Cons:
• difficult to cache
• impossible to index
• required JavaScript
6
Thursday, December 13, 12

7. Unobtrusive JavaScript
• No JavaScript, no problem Pros:
• Provide features for user agents • wider compatibility
that support them • just as rich UI
– fall back to basic HTML • just as responsive
Cons:
• higher development costs
• requires thoughtful engineering
7
Thursday, December 13, 12

8. Client Side Applications
• Business logic lives on the client Pros:
• Resources and permanent state • reduce server workloads
stored on the server • application is highly cacheable
• Application state stored on client • extremely rich UI
Cons:
• content not indexable
• requires JavaScript
• often requires a ‘modern’ browser
8
Thursday, December 13, 12

9. Overview
• Where we’ve been
• Where we’re going
• How we’ll get there
• Questions
9
Thursday, December 13, 12

10. From: server-side apps
To: smart clients and services
10
Thursday, December 13, 12

11. Client
Browser-based
HTML Rendering
(progressive Browser
enhancement)
HTML HTTP
View Application
Controllers Server
Generation
Service Layer
Channels Repositories RDBMS
CRUD Server
Thursday, December 13, 12

12. HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model
web stg
Service Layer
Channels Repositories RDBMS
CRUD Server
Thursday, December 13, 12

13. HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model
web stg
JSON HTTP & websockets
Service Layer
Channels Repositories RDBMS
CRUD Server
Thursday, December 13, 12

14. HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model
web stg
JSON events HTTP & websockets
& notifications
Service Layer
Channels Repositories RDBMS
CRUD Server
Thursday, December 13, 12

15. HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model
web stg
JSON events HTTP & websockets
& notifications
Service Layer
Cloud/
Channels Repositories RDBMS PaaS
CRUD
Thursday, December 13, 12

16. HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model
web stg
JSON events HTTP & websockets
& notifications
business /
Service Service Service domain services
Cloud/
Channels Repositories RDBMS PaaS
CRUD
Thursday, December 13, 12

17. HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model
web stg
JSON events HTTP & websockets
& notifications
business /
Service Service Service domain services
Channels Repositories RDBMS
CRUD PaaS
Thursday, December 13, 12

18. HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model
web stg
JSON events HTTP & websockets
& notifications
business /
Service Service Service domain services
PaaS
Thursday, December 13, 12

19. HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model
web stg
JSON events HTTP & websockets
& notifications
business /
Service Service Service domain services
Service Service Service platform services,
web APIs
SQL NoSQL Other PaaS
Thursday, December 13, 12

20. HTML5 & JS Engine
Applications HTML5
(& native)
JSON events HTTP & websockets
&
notifications
Services PaaS
Thursday, December 13, 12

21. Overview
• Where we’ve been
• Where we’re going
• How we’ll get there
• Questions
17
Thursday, December 13, 12

22. 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?
18
Thursday, December 13, 12

23. Client side code as a first class citizen
• Apply design patterns
• Modularize
• Unit test
• Enforce code quality
• See “IoC + JavaScript” coming up next.
19
Thursday, December 13, 12

24. Demo
Monty Hall
20
Thursday, December 13, 12

25. 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.
21
Thursday, December 13, 12

26. Demo
Client Server Messaging
22
Thursday, December 13, 12

27. 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
23
Thursday, December 13, 12

28. Frameworks
• New frameworks are emerging
– not quite prime time
– watch this space
• Frameworks will not solve all your issues
– sorry
24
Thursday, December 13, 12

29. 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/
25
Thursday, December 13, 12