Download - Jax2013 SPA with Java
Oliver Zeigermann | http://zeigermann.eu
Single Page Web Applications with Java
Donnerstag, 25. April 13
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
Examples of SPAs
• Gmail
• MicroSoft Office 365
• TiddlyWiki
Donnerstag, 25. April 13
Good for the user, but ...
• developing for the browser is a tough task
• might target different browsers
• DOM
• JavaScript
Donnerstag, 25. April 13
Objective of this talk
What framework do I use to make SPAs work
with Java?
Donnerstag, 25. April 13
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
Architecture: one definition
• The sum of all decisions that are either
• impossible or
• very hard to change during a project
Donnerstag, 25. April 13
The choice of the framework could be one of the most important architectural
decisions
Donnerstag, 25. April 13
Options
• GWT
• JBoss Errai
• GXT
• Vaadin
• AngularJS
Donnerstag, 25. April 13
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
GWT
Donnerstag, 25. April 13
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
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
• 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
How does it look like?
Donnerstag, 25. April 13
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
JBoss Errai
Donnerstag, 25. April 13
Motivation
• GWT rocks, but
• GWT-RPC sucks
• a given layout is hard to implement
Donnerstag, 25. April 13
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
JBoss Errai fun facts
• Done by JBoss / Red Hat
• member of the GWT steering committee
Donnerstag, 25. April 13
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
GXT
Donnerstag, 25. April 13
Motivation
• GWT rocks, but
• we need richer, most desktop like UI widgets
• we need a good looking consistent theme
Donnerstag, 25. April 13
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
How does it look like?
Donnerstag, 25. April 13
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
Vaadin
Donnerstag, 25. April 13
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
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
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
How does it look like?
Donnerstag, 25. April 13
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
AngularJS
Donnerstag, 25. April 13
Embrace
• JavaScript
• DOM
• HTML
Donnerstag, 25. April 13
Approach
• HTML enhanced for web apps!
• How would HTML look like if it had been invented for applications?
Donnerstag, 25. April 13
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
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
Java Integration: Applies to any JavaScript
framework
Donnerstag, 25. April 13
Generic Architecture
Donnerstag, 25. April 13
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
Donnerstag, 25. April 13
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
Donnerstag, 25. April 13
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
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
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
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
Questions / Discussion
Oliver Zeigermannhttp://zeigermann.eu
Donnerstag, 25. April 13