How can you make sure that your next web application supports not only the desktop browser, but also all the other devices and screen sizes? And that it can efficiently talk to backend services in a bidirectional way? With new concepts for client-side development like responsive web design and hybrid web applications, and with new APIs for WebSocket, REST services, JSON and more, Java EE 7 with HTML5 may be the best combination to meet your needs. In this keynote, see how you can efficiently develop such an application, and how advanced integrated tools can help you with both server and client code.

1. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public1
Consuming Java EE
in Desktop, Web, and Mobile Frontends
Geertjan Wielenga
Oracle Developer Tools
geertjan.wielenga@oracle.com
@geertjanw

2. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public2 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public
Agenda  JavaScript/HTML5 Rich Client
Landscape
 Java EE 7
 Java EE + JavaScript
 Tools and Technologies
 Demos

3. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public3
JavaScript/HTML5 Rich Clients Landscape
 The thin client vs. rich client debate is pretty old…
» Thin Client
- All processing on server
- Round tripping to server
- Delays…
» Thin Client Rich Client
» - Complex, dynamic
» - Feature-rich UI
» - Access local resources

4. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public4
JavaScript/HTML5 Rich Clients Landscape
 Server side frameworks have ruled for a while
– Everything on the server
 Spring / Hibernate
 JSF
 Struts
 Tapestry
 AJAX is a mild shift to the client, “best of both worlds approach”
– Asynchronous partial page refresh solutions
 PrimeFaces
 Wicket
 GWT
 Vaadin

5. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public5
Demo: PrimeFaces, Java EE, and Maven

6. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public6
JavaScript/HTML5 Rich Clients Landscape

7. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public7
JavaScript/HTML5 Rich Clients Landscape
 Rich clients powered by JS/HTML appear to be making a comeback
– Improving JavaScript engines
 V8
 *Monkey
 Nashorn
– Better tools
 jQuery
 MV* Frameworks
 Chrome, FireFox
– Standards advancement
 CSS3
 HTML5
 WebSocket

8. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public8
Perhaps Not A Slam Dunk?
 Richer clients clearly better at some things
– Highly dynamic, interactive interfaces
– Complex, feature-rich UIs
– “Single page applications” (“Applets” )
 But perhaps not a panacea
– Heavily form/workflow driven applications
– Server-side rendering still a better bet for performance/reliability?
– JavaScript/HTML development is not without it’s pains…
– Server-side frameworks are a strong incumbent
 Co-existence in the short and long term?
– Islands of rich client functionality within server-centric UIs?
– Different strokes for different folks?

9. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public9
My Big Fat Rich-Client Architecture
 Very similar to client/server architecture of lore
– Client responsible for UI rendering, basic input validation, logic and state
– Server responsible for business logic, domain model, persistence
– Web/HTTP is glue that connects client and server
 Typical communication protocols
– REST for majority of cases
– WebSocket when full-duplex communication is needed
– JavaScript tools support REST well, but not WebSocket (yet)
 The typical (ideal?) data interchange format is JSON
 Java EE is a great server-side platform for this architecture…

10. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public10
Java EE + JavaScript
EJB 3
Servlet
CDI
JPA
JAX-RS
BeanValidation
Java API for
WebSocket
Java API for
JSON
JMS JTA
JavaScript/HTML5
JAXB
JCA

11. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public11
JAX-RS
 REST development API for Java
 Server and client
 Annotation based, declarative
– @Path, @GET, @POST, @PUT, @DELETE, @PathParam,
@QueryParam, @Produces, @Consumes
 Pluggable and extensible
– Providers, filters, interceptors

12. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public12
JAX-RS Example
@Path("/atm/{cardId}")
public class AtmService {
@GET
@Path("/balance")
@Produces("text/plain")
public String balance(
@PathParam("cardId") String card,
@QueryParam("pin") String pin) {
return Double.toString(getBalance(card, pin));
}
...

13. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public13
Java API for WebSocket
 High level declarative API for WebSocket
 Both client and server-side
 Small, powerful API
– @ServerEndpoint, @OnOpen, @OnClose, @OnMessage,
@OnError, Session, Remote
 Pluggable and extensible
– Encoders, decoders, sub-protocols

14. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public14
WebSocket Example
@ServerEndpoint("/chat")
public class ChatBean {
Set<Session> peers = Collections.synchronizedSet(…);
@OnOpen
public void onOpen(Session peer) {
peers.add(peer);
}
@OnClose
public void onClose(Session peer) {
peers.remove(peer);
}
...

15. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public15
JavaScript Movers and Shakers

16. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public16
Demo: Backbone.js, Java EE, and Maven

17. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public17
Demo: Angular.js

18. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public18
Useful New Tools and Technologies

19. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public19
Useful New Tools and Technologies
 Post Processors
– Emmet
– SASS/LESS
– CoffeeScript
 Cordova/PhoneGap
 HTML5 Ecosystem
– Grunt
– Karma
– Bower
– Yeoman

20. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public20
Demo: SASS, LESS, Karma, Cordova

21. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public21
But Browser/Phone Is Not For Everyone…

22. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public22
Summary
 JavaScript/HTML5 clients gaining traction as opposed to server-side
web frameworks
 Communication between the client and server happens via JSON
over REST or WebSocket
 Java EE well positioned as a JavaScript rich client backend,
especially with JAX-RS, the Java API for WebSocket and JSON-P
 Combining the two worlds is possible and positions applications for
deployment to mobile devices
 More options… more decisions… more technologies to evaluate

23. Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Public23