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