JavaScript becomes more and more important for implementing full-featured rich client applications in the browser. Therefore our classical ideas and blueprints for Spring-based architectures have to change. This talks provides a high-level overview of these changes and talks about how to combine Spring on the server side to implement RESTful and HATEOAS APIs and JavaScript in the client side to realize full client side apps in your browser. The talk discusses the basic ideas and motivations behind this shift in architectures without going too deep into all the technical details.

1. Mar$n
Lippert
MODERN
ARCHITECTURES
WITH
SPRING
AND
JAVASCRIPT
mlippert@vmware.com
@mar$nlippert

2. about me
Mar6n
Lippert
Staff
Engineer,
R&D,
at
SpringSource/
VMware
and
lead
of
Spring
Tool
Suite
development
Working
areas
•Eclipse
Tooling
for
the
Spring
plaAorm
•Open
Source
CommiDer
•Aspect-­‐Weaving
for
OSGi
•Cloud
IDEs
and
JavaScript
•Agile
soKware
development
2

3. Typical Runtime Structures
Browser render HTML
business logic &
Tomcat / tc Server
page rendering
Relational Database contains data

4. More Detail...
Browser-based
HTML Rendering
Browser
View Application
Controllers
Generation Server
Service Layer
Channels Repositories RDBMS

5. What happens?
render HTML & improved
Browser
experience using JavaScript
AJAX calls
business logic &
Tomcat / tc Server page rendering & APIs
contains data & new
Relational Database
challenges (structure, size)

6. A few observations
duplicated logic, no
modularization
render HTML & improved
Browser
experience using JavaScript
AJAX calls
APIs are challenging, Java not
the only language anymore
business logic &
Tomcat / tc Server page rendering & APIs
relational & transactional
contains anymore
don‘t fit data & new
Relational Database
challenges (structure, size)

7. Different pictures
AWS node.js HTML/CSS
NoSQL Java
JavaScript
JavaScript Hadoop
CoffeeScript
modern apps old style apps
Scala
Ruby/Rails Application
Clojure PaaS Server
RDBMS
HTML5/CSS3

8. Where do we go
from here?

9. The
Client
Side

10. Innovation happens here

11. The JavaScript Story
http://www.maztek.com/blog/wp-content/uploads/javascript.jpg

12. My assumptions
- on the client side -
Browser only (HTML5/CSS3)
JavaScript only
„The browser-based application
written in JavaScript becomes the new
rich client architecture“

13. More Detail...
Browser-based
HTML Rendering
HTML5 & JS Engine
DOM Controllers
Client-side Model
Web
Storage

14. Existing JavaScript libs are UI centric
(focus on making life with the DOM easier)
most prominent:
jquery

15. JavaScript versions of
„good old rich client patterns“
begin to appear
(and are highly necessary)
Examples
backbone.js
angular.js
ember.js
...

16. Browser App (JavaScript)
maybe also CoffeeScript,
TypeScript, Dart
maybe GWT, but likely not
forget about JSF ;-)

17. The
Server
Side

18. View
Controllers
Generation
business/domain
services
Service Layer
Service Service Service
Channels Repositories RDBMS
Service Service Service
platform
services
RDBMS NoSQL other

19. this is where Spring is really powerful
ready to run „in the cloud“ (scalability)
(no client-side rendering or logic)
Service Service Service Service Service

20. Service
Spring MVC is the easiest way to
implement RESTful APIs and services
APIs are JSON and HATEOAS based
Spring MVC + Spring HATEOAS
is a powerful combination
more on Spring HATEOAS:
https://github.com/SpringSource/spring-hateoas

21. Service
Spring Integration &
Messaging
Spring Batch

22. My assumptions
- server side languages -
many different languages in use
choose the right language for the right job
don‘t use a new language for fun

23. My assumptions
- data storage -
more and more data (big data)
different storage techniques combined
(rdbms, nosql, graph databases)
scalability is important

24. The picture
HTML5 & JS Engine
Browser
DOM Controllers
Client-side Model Web Storage
business/domain
Service Service Service
services
platform
Service Service Service services
RDBMS NoSQL other PaaS

25. Communication
Browser App
(JavaScript)
RESTful API Push
(JSON over http) (JSON over WebSockets)
Service

26. The
Challenges

27. Modularity
in
JavaScript

28. AMD
(asynchronous module definition)
wire.js
(Dependency Injection for JavaScript)
Micro Services for JavaScript
(OSGi services written in JavaScript)

29. More Challenges
offline
cloud-ready services
define good APIs
versioned APIs
TDD for JavaScript

30. more information
Adrian Colyer on Application Development in the Cloud Era
http://www.youtube.com/watch?v=axOPJbrIjkY
Example app using Spring for providing RESTful APIs and JavaScript for a rich client and mobile
app
https://github.com/SpringSource/html5expense
Asynchronous Module Definition for JavaScript (AMD)
https://github.com/amdjs/amdjs-api
http://requirejs.org/docs/whyamd.html
wire.js
https://github.com/cujojs/wire
hello world with wire.js
https://github.com/briancavalier/hello-wire.js
more advanced example for wire.js
https://github.com/briancavalier/piratescript
Cloud Foundry PaaS
http://www.cloudfoundry.com
http://www.cloudfoundry.org

31. Q&A
and thank you for your attention
Martin Lippert,VMware
mlippert@vmware.com, @martinlippert