Simplifying JavaScript/HTML5- Rich Clients with Java EE and

NetBeans

Johannes WeigendCTO QAware GmbH

Munich Germany

JavaOne Latin America Sao Paulo 2015

A typical CRUD Application

1 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

JavaEE / JSF

• The JavaEE Answer for the UI is Java Server Faces (JSF)

• Serverside Template Processing (.xhtml)

• JSF Components (f.e. Primefaces) generate HTML, JS and CSS Fragments

• The real HTML, CSS, JS Code is hidden from the developer

2 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

Sounds good?

3 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

4 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

THIS IS WRONG! - BUT WHAT ARE ALTERNATIVES ?

Single Page JEE Application

Browser JEE Server

JAVA / JEE

HTML / CSS

JS REST API

Database External Services

AJAX

Single Page Presentation Tier Stateless Business Tier Integration Tier

Resources

5 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

Step 1: Implementing a REST CRUD API with JEE7

Browser JEE Server

JAVA / JEE

HTML / CSS

JS REST API

RDBMS NoSQL

External Services

AJAX

Single Page Presentation Tier Stateless Business Tier Data/Integration Tier

Resources

6 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

Step 2: Implementing a AngularJS CRUD Client

Browser JEE Server

JAVA / JEE

HTML / CSS

JS REST API

Database External Services

AJAX

Single Page Presentation Tier Stateless Business Tier Integration Tier

Resources

7 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

Step 3: Deliver as single WAR

Browser JEE Server

JAVA / JEE

HTML / CSS

JS REST API

Database External Services

AJAX

Single Page Presentation Tier Stateless Business Tier Integration Tier

Resources

9 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

HTML Skelteton index.html main.css

Step 2: Details

Yeoman Angular Generatoruses

$ yo angular $ yo angular:route <name> yo angular:service <name>

yo angular:view <name> …

Grunt Build

Bower Dependencies

Directory Structure

Angular Code View (.html)

Controller (.js)

Test (.js)Jasmine Tests

gruntfile.js

bower.json

Service (.js)

generates

Node Tools node_modules

8 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

https://github.com/jweigend/JEEAngularCRUD/This demo is available on Github

@JohannesWeigend

10 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

Best Practice

• AngularJS is a mature clientside Framework for web development.

• JEE is the enterprise choice for stable backend services.

• A single page application is a blueprint with clean separation of concerns - UI- and Service-Layer are well separated.

• Scalability and Elasticity are easy to achieve

11 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend

Some final thoughts

• Don’t mix serverside Technologies like JSF with client side JS Frameworks like AngularJS

• Use the same IDE for Java and JS Development

• Prefer JEE as stable backend and integration technology if you write enterprise applications

• Learn how to do professional JavaScript

• Be careful: In the JS world there are NO STABLE STANDARDS

12 | JavaOne Latin America 2015 | SES16214 | Simplifying JavaScript/HTML5 Rich Clients with Java EE and Netbeans | Weigend