This document summarizes a presentation about developing mobile applications using HTML5, REST, and JavaScript frameworks. It discusses using JAX-RS to create RESTful endpoints in Java EE that return JSON/XML, and consuming those endpoints from HTML5 web apps or hybrid mobile apps built with Apache Cordova. It also introduces the AeroGear framework for extending Java EE functionality to mobile clients and facilitating mobile development. Demos are provided of AeroGear.js, Backbone.js, and the AeroGear-iOS library. The roadmap includes adding support for WebSockets, data syncing, and push notifications across the AeroGear projects.

1. JAVAEE MEETS

2. MATTHIAS WESSENDORF
JBoss by Red Hat
Member Apache Software Foundation
Formerly working at Kaazing and Oracle
Speaker, Author, Blogger:
http://wessendorf.net
Twitter:
@mwessendorf

3. AGENDA
Mobile: some background
HTML5
JavaEE -> JAX-RS
JavaScript Frameworks
jQuery Mobile
Backbone.js
Your JS Framework...
JBoss' AeroGear Framework
Outlook: AeroGear goes native

4. AGENDA
Mobile: some background
HTML5
JavaEE -> JAX-RS
JavaScript Frameworks
jQuery Mobile
Backbone.js
Your JS Framework...
JBoss' AeroGear Framework
Outlook: AeroGear goes native

5. WHAT DOES
MOBILE
MEAN?

8. FOR US, BASICALLY:
Modern Smartphones & Tablets
Supporting complex native apps
Access to the “standard” web

9. MOBILE APPLICATION CLIENT TYPES

10. Multi-Platform Requirements

12. MOBILE APPLICATION CLIENT TYPES

13. AGENDA
Mobile: some background
HTML5
JavaEE -> JAX-RS
JavaScript Frameworks
jQuery Mobile
Backbone.js
Your JS Framework...
JBoss' AeroGear Framework
Outlook: AeroGear goes native

14. WHAT DO YOU
MEAN WITH
HTML5 + REST ?

16. THE MYTHICAL “HTML5”
W3C Suite of Specifications
Canvas
Geolocation
WebSockets
SSE (Server-Sent Events)
CSS3
WebWorker
Web Storage
and some JavaScript APIs

17. AGENDA
Mobile: some background
HTML5
JavaEE -> JAX-RS
JavaScript Frameworks
jQuery Mobile
Backbone.js
Your JS Framework...
JBoss' AeroGear Framework
Outlook: AeroGear goes native

18. TAKE A REST...
WITH JAX-RS RESTFUL ENDPOINTS
Uses HTTP standards
GET, POST, UPDATE, DELETE, etc...
Returns XML, JSON content
Annotate POJO’s for request mapping
Error handling with Bean Validation
CDI to tie it all together

19. REST...
Uses meaningful response codes
200 OK
201 Created
400 Bad Request
404 Not Found
409 Conflict

20. HTML5 <3 REST

22. AGENDA
Mobile: some background
HTML5
JavaEE -> JAX-RS
JavaScript Frameworks
jQuery Mobile
Backbone.js
Your JS Framework...
JBoss' AeroGear Framework
Outlook: AeroGear goes native

23. AEROGEAR’S MOBILE WEB QUICKSTART
The HTML5 + REST example:
single page app
jQuery / jQuery mobile
JavaEE
JAX-RS Endpoints
CDI Beans and Services
http://html5-aerogear.rhcloud.com/

24. DEMO

25. GOING NATIVE
as hybrid

26. APACHE CORDOVA
perhaps known as PhoneGap...

27. APACHE CORDOVA
1. embedded browser in native app
2. bridge between browser and native
3. DEV => writes web app
4. packages web app with the native code
5. no device specific compile (of web app)
6. PLUGINS: between layers!
<3

28. DEMO

29. BACKBONE.JS
Good structure => Four Abstractions
Collection
Model
Router
View
Doesn't hide the DOM
since you are doing web dev....
lightweight, easy to start with

30. DEMO

31. VANILLA.JS
Vanilla JS is a fast, lightweight, cross-platform framework for building
incredible, powerful JavaScript applications.
http://vanilla-js.com/
:-)

32. AGENDA
Mobile: some background
HTML5
JavaEE -> JAX-RS
JavaScript Frameworks
jQuery Mobile
Backbone.js
Your JS Framework...
JBoss' AeroGear Framework
Outlook: AeroGear goes native

33. EXTEND JAVAEE INTO MOBILE CLIENTS!

34. AEROGEAR
Open Source Libraries for Mobile Connectivity:
JBoss community project
Dedicated to mobile development
HTML5 and native
Facilitate all types of mobile
Mobile Web
Hybrid
Native mobile
Examples, tutorials, & community

35. AEROGEAR
current offerings:
AeroGear.js
AeroGear-iOS
AeroGear.jar (Android)
server components:
aerogear-controller
aerogear-security

36. AEROGEAR.JS
internal usage of jQuery ($.ajax and $.extend)
Example:
/ cet a epyppln:
/ rae n mt ieie
vrmPpln =ArGa.ieie)
a yieie eoerPpln(;
/ Adacneto/ieojc:
/ d oncinpp bet
mPpln.d(poet";
yieiead"rjcs)
/ Raigdt fo te'yrjcs cneto:
/ edn aa rm h mpoet' oncin
mPpln.ie[poet'.ed)
yieiepps'rjcs]ra(;

37. DEMO

38. AEROGEAR.JS
ROADMAP:
WebSocket
Messaging
Data Sync
client side validation

39. AEROGEAR.NEXT
1. More transports (e.g. WebSocket)
2. Data Sync and Push notifications
3. OData?
4. More platforms ?
GROW THE COMMUNITY

40. THANK YOU
MATZEW AT REDHAT DOT COM
Find us:
http://aerogear.org
@AeroGears
IRC: #aerogear
MAILING LIST
http://aerogear.org/community/

41. AEROGEAR-IOS
iOS 5 - full ARC support
AFNetworking used for HTTP communication
Example:

42. DEMO

43. AEROGEAR-IOS
ROADMAP:
Core Data support
Data Sync
WebSocket (via SocketRocket)
APN