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

• Facebook

• Gmail

• MicroSoft Office 365

• Twitter

• 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