The document discusses the evolution of web application architecture from static HTML pages to modern single-page applications. It describes early technologies like CGI and JavaScript that introduced dynamic content. Modern applications use JavaScript frameworks on the client-side to provide rich user interfaces while delegating data access and processing to RESTful services on the backend. The document advocates for a messaging-based architecture with modularized and tested client-side code, simplified views, and embracing both client and server responsibilities.

1. Architecture of a Modern Web App
Scott Andrews
@scothis
andrewss@vmware.com
Re-distribution allowed with author’s consent.
© 2013 SpringSource, A division of VMware. All rights reserved

2. About Me
 Joined SpringSource in 2008
 Wearer of many hats
 Drifter  Teams
• frameworks ⇆ applications • Spring Web
• open source ⇆ commercial • tc Server
• client ⇆ server • Spring Insight
• front-end ⇆ back-end • Cloud Foundry
• SpringSource JavaScript
Re-distribution allowed with author’s consent.
2

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.
3

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.
4

5. In the beginning...
Re-distribution allowed with author’s consent.
5

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.
6

7. Let there be CGI
Re-distribution allowed with author’s consent.
7

8. 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
Re-distribution allowed with author’s consent.
8

9. LiveScript JavaScript
http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg
Re-distribution allowed with author’s consent.
9

10. LiveScript JavaScript
 Dynamic pages  Pros:
 Lightweight complement to • enhanced usability, maybe
applets • reduced trips to the server
 Mostly used for simple scripting
• basic form validation  Cons:
• popup ads • abuses annoyed users
• comet cursor trails • 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.
10

11. 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
Re-distribution allowed with author’s consent.
11

12. 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
Re-distribution allowed with author’s consent.
12

13. 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 and session state • extremely rich UI
stored on client
 Cons:
• content not indexable
• requires JavaScript
• often requires a ‘modern’ browser
Re-distribution allowed with author’s consent.
13

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.
14

15. From server-side app to smart clients and services
Browser Client
Browser-based
HTML Rendering
(progressive enhancement)
HTML HTTP
View Application
Controllers Server
Generation
Service Layer
Channels Repositories RDBMS
Server
CRUD
Re-distribution allowed with author’s consent.
15

16. From server-side app to smart clients and services
HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model web stg
events & HTTP &
JSON notifications WebSockets
Service Layer
Channels Repositories RDBMS
Server
CRUD
Re-distribution allowed with author’s consent.
16

17. From server-side app to smart clients and services
HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model web stg
events & HTTP &
JSON notifications WebSockets
Service Service Service
business /
domain services
Service Layer
Channels Repositories RDBMS
Server
CRUD
Re-distribution allowed with author’s consent.
17

18. From server-side app to smart clients and services
HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model web stg
events & HTTP &
JSON notifications WebSockets
business /
Service Service Service domain services
Channels Repositories RDBMS
Server
CRUD
Re-distribution allowed with author’s consent.
18

19. From server-side app to smart clients and services
HTML5 & JS Engine Browser app or Client
embedded in native
DOM Controllers
Client-side model web stg
events & HTTP &
JSON notifications WebSockets
business /
Service Service Service domain services
Service Service Service platform services,
web APIs
PaaS
SQL NoSQL other
Re-distribution allowed with author’s consent.
19

20. Demo
Applications as Services
Monty Hall
Re-distribution allowed with author’s consent.
20

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.
21

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.
22

23. Demo
Client side code as a first class citizen
Re-distribution allowed with author’s consent.
23

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.
24

25. Demo
Client-Server Messaging
Re-distribution allowed with author’s consent.
25

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.
26

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.
27

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.
28

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.
29

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.
30

31. Questions?
Re-distribution allowed with author’s consent.
31

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
Re-distribution allowed with author’s consent.
32

33. Architecture of a Modern Web App
Scott Andrews
@scothis
andrewss@vmware.com
Re-distribution allowed with author’s consent.
© 2013 SpringSource, A division of VMware. All rights reserved