1. Oliver Zeigermann | http://zeigermann.eu
Single Page Web Applications with Java
Donnerstag, 25. April 13

2. Single Page Applications
• A web application
• Only a single page is delivered by the
server to the browser
• All further action is controlled by the
JavaScript delivered along with this page
• Allows for high interactivity
• comparable to desktop applications
Donnerstag, 25. April 13

3. Examples of SPAs
• Facebook
• Gmail
• MicroSoft Office 365
• Twitter
• TiddlyWiki
Donnerstag, 25. April 13

4. Good for the user, but ...
• developing for the browser is a tough task
• might target different browsers
• DOM
•JavaScript
Donnerstag, 25. April 13

5. Objective of this talk
What framework do I
use to make SPAs work
with Java?
Donnerstag, 25. April 13

6. Decisions
• As an architect you make decisions all the
time
• You have to be aware of
• the requirements and
• the options
• If you aren‘t you can hardly make educated
decisions at all
Donnerstag, 25. April 13

7. Architecture: one definition
• The sum of all decisions that are either
• impossible or
• very hard to change during a project
Donnerstag, 25. April 13

8. The choice of the framework
could be one of the most
important architectural
decisions
Donnerstag, 25. April 13

9. Options
• GWT
• JBoss Errai
• GXT
• Vaadin
• AngularJS
Donnerstag, 25. April 13

10. Common Requirements Checklist
scales well
Java only
flexible layout
implicit remote calls
offline mode
L&F out of the box
backend reusable
client side UI logic
rich set of UI widgets
has table widget
simple tool chain
integrates well
Donnerstag, 25. April 13

11. GWT
Donnerstag, 25. April 13

12. Abstraction of differences #1
• client & server
• write everything in Java
• client part compiles to JavaScript
• shared code possible
• call to server using a proprietary RPC
protocol
Donnerstag, 25. April 13

13. Abstraction of differences #2
• different browsers
• dedicated JavaScript per browser
• program on widgets, not DOM
• widgets are thin layer over HTML
Donnerstag, 25. April 13

14. • Originally developed by Google
• Said to be as good as dead in 2012 - due to
• Google internal rival Dart
• lack of ongoing development
• Now managed by a steering committee
GWT fun facts
Donnerstag, 25. April 13

15. How does it look like?
Donnerstag, 25. April 13

16. GWT Checklist
scales well
Java only
flexible layout
implicit remote calls
offline mode
L&F out of the box
backend reusable
client side UI logic
rich set of UI widgets
has table widget
simple tool chain
integrates well
Donnerstag, 25. April 13

17. JBoss Errai
Donnerstag, 25. April 13

18. Motivation
• GWT rocks, but
• GWT-RPC sucks
• a given layout is hard to implement
Donnerstag, 25. April 13

19. Embraces
• GWTs JavaScript compiler and tools
• REST webservices
• lets you use JAX-RS
• DOM and HTML
• lets you define your UI using HTML
• Events
• crossing client/server boundaries
Donnerstag, 25. April 13

20. JBoss Errai fun facts
• Done by JBoss / Red Hat
• member of the GWT steering committee
Donnerstag, 25. April 13

21. Errai Checklist
scales well
Java only
flexible layout
implicit remote calls
offline mode
L&F out of the box
backend reusable
client side UI logic
rich set of UI widgets
has table widget
simple tool chain
integrates well
Donnerstag, 25. April 13

22. GXT
Donnerstag, 25. April 13

23. Motivation
• GWT rocks, but
• we need richer, most desktop like UI
widgets
• we need a good looking consistent theme
Donnerstag, 25. April 13

24. GXT fun facts
• Only free for non commercial use
• GWT based “reimplementation” of Ext JS
• actually NOT a wrapper over Ext JS
• embraces all of GWTs core concepts
• drives the component idea a little bit further down
the road
• Done by Sencha
• member of the GWT steering committee
Donnerstag, 25. April 13

25. How does it look like?
Donnerstag, 25. April 13

26. GXT Checklist
scales well
Java only
flexible layout
implicit remote calls
offline mode
L&F out of the box
backend reusable
client side UI logic
rich set of UI widgets
has table widget
simple tool chain
integrates well
Donnerstag, 25. April 13

27. Vaadin
Donnerstag, 25. April 13

28. Motivation
• Business applications
• have a limited budget per view
• I want to concentrate on the business logic
• Technical aspects should not
• stand in my way
• slow me down
Donnerstag, 25. April 13

29. Approach
• application code runs on server side only
• client-/server-communication transparent
to application developer
• using RPC and state synchronization
• uses server side session
• every non-trivial user interactions forces
client-server round-trip
Donnerstag, 25. April 13

30. Vaadin fun facts
• Widgets based on GWT
• All widgets initially loaded into browser
• Done by a Finnish company - also called
Vaadin - located in Turku
• member of the GWT steering committee
Donnerstag, 25. April 13

31. How does it look like?
Donnerstag, 25. April 13

32. Vaadin Checklist
scales well
Java only
flexible layout
implicit remote calls
offline mode
L&F out of the box
backend reusable
client side UI logic
rich set of UI widgets
has table widget
simple tool chain
integrates well
Donnerstag, 25. April 13

33. AngularJS
Donnerstag, 25. April 13

34. Embrace
• JavaScript
• DOM
• HTML
Donnerstag, 25. April 13

35. Approach
• HTML enhanced for web apps!
• How would HTML look like if it had been
invented for applications?
Donnerstag, 25. April 13

36. Features
• Client side MVC framework
• HTML5, DOM-based templates
• 2-Way data-binding
• Everything can be a model
• HTML5 extensions
• attributes
• tags
Donnerstag, 25. April 13

37. Hello World
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js">
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Donnerstag, 25. April 13

38. Java Integration:Applies
to any JavaScript
framework
Donnerstag, 25. April 13

39. Generic Architecture
Donnerstag, 25. April 13

40. Java integration pattern: Lean
• UI
• fully on client using JavaScript / AngularJS
• Business logic
• completely on server only
• Communication
• UI calls business logic using (REST) webservices
• offline mode not possible
Donnerstag, 25. April 13

41. Donnerstag, 25. April 13

42. Java integration pattern: Fat
• UI
• fully on client using JavaScript / AngularJS
• Business logic
• major parts run on client in JavaScript
• at least persistence parts run on server
• Communication
• business logic on client calls business logic on server
using (REST) webservices
• offline mode possible
Donnerstag, 25. April 13

43. Donnerstag, 25. April 13

44. GWT integration pattern
• Business logic on client could be done
using GWT
• fixes problem of maintainability
• calls to server could be REST or GWT-
RPC
• Experimental approaches even do UI part
in GWT using AngularJS binding
Donnerstag, 25. April 13

45. AngularJS fun facts
• Also done by Google
• like Dart and GWT
• Codenames of releases include
• radioactive-gargle
• tofu-animation
• flatulent-propulsion
Donnerstag, 25. April 13

46. AngularJS Checklist
scales well
Java only
flexible layout
implicit remote calls
offline mode
L&F out of the box
backend reusable
client side UI logic
rich set of UI widgets
has table widget
simple tool chain
integrates well
Donnerstag, 25. April 13

47. Wrap up
• SPAs are a modern
alternative to desktop
applications
• Developing SPAs with
Java is a challenging task
• Explicit Java / JavaScript
integration might be an
option for you
• All of the frameworks
presented are
reasonable choices
• which one is the right
for you depends on
your requirements
and
• the people who build
your app
Donnerstag, 25. April 13

48. Questions / Discussion
Oliver Zeigermann
http://zeigermann.eu
Donnerstag, 25. April 13