HTML alchemy: the secrets of mixing JavaScript and Java EE - Matthias Wessendorf
4 likes2,207 views
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.
![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(;](https://image.slidesharecdn.com/jaxlondonaerogear-121022112648-phpapp02/85/HTML-alchemy-the-secrets-of-mixing-JavaScript-and-Java-EE-Matthias-Wessendorf-36-320.jpg)
HTML alchemy: the secrets of mixing JavaScript and Java EE - Matthias Wessendorf
- 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
- 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