jax2013 spa with java

Oliver Zeigermann | http://zeigermann.eu

Single Page Web Applications with Java

Donnerstag, 25. April 13

http://zeigermann.eu


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


Examples of SPAs

• Facebook

• Gmail

• MicroSoft Office 365

• Twitter

• TiddlyWiki


Good for the user, but ...

• developing for the browser is a tough task

• might target different browsers

• DOM

• JavaScript


Objective of this talk

What framework do I use to make SPAs work

with Java?


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


Architecture: one definition

• The sum of all decisions that are either

• impossible or

• very hard to change during a project


The choice of the framework could be one of the most important architectural

decisions


Options

• GWT

• JBoss Errai

• GXT

• Vaadin

• AngularJS


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


GWT


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


Abstraction of differences #2

• different browsers

• dedicated JavaScript per browser

• program on widgets, not DOM

• widgets are thin layer over HTML


• 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


How does it look like?


GWT Checklist scales well

Java only

flexible layout


offline mode

L&F out of the box

backend reusable



has table widget

simple tool chain

integrates well


JBoss Errai


Motivation

• GWT rocks, but

• GWT-RPC sucks

• a given layout is hard to implement


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


JBoss Errai fun facts

• Done by JBoss / Red Hat

• member of the GWT steering committee


Errai Checklist scales well

Java only

flexible layout


offline mode

L&F out of the box

backend reusable



has table widget

simple tool chain

integrates well


GXT


Motivation

• GWT rocks, but

• we need richer, most desktop like UI widgets

• we need a good looking consistent theme


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



GXT Checklist scales well

Java only

flexible layout


offline mode

L&F out of the box

backend reusable



has table widget

simple tool chain

integrates well


Vaadin


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


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


Vaadin fun facts

• Widgets based on GWT

• All widgets initially loaded into browser

• Done by a Finnish company - also called Vaadin - located in Turku



Vaadin Checklist scales well

Java only

flexible layout


offline mode

L&F out of the box

backend reusable



has table widget

simple tool chain

integrates well


AngularJS


Embrace

• JavaScript

• DOM

• HTML


Approach

• HTML enhanced for web apps!

• How would HTML look like if it had been invented for applications?


Features• Client side MVC framework

• HTML5, DOM-based templates

• 2-Way data-binding

• Everything can be a model

• HTML5 extensions

• attributes

• tags


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>


Java Integration: Applies to any JavaScript

framework


Generic Architecture


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


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


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


AngularJS fun facts• Also done by Google

• like Dart and GWT

• Codenames of releases include

• radioactive-gargle

• tofu-animation

• flatulent-propulsion


AngularJS Checklist scales well

Java only

flexible layout


offline mode

L&F out of the box

backend reusable



has table widget

simple tool chain

integrates well


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


Questions / Discussion

Oliver Zeigermannhttp://zeigermann.eu




jax2013 spa with java

Technology