SlideShare a Scribd company logo

Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)

Download as PPTX, PDF
Ryan Cuprak, profile picture
Ryan Cuprak

The document provides an overview of hybrid mobile development using Apache Cordova and Java EE 7, focusing on a demo application related to sailboat racing. It discusses the architecture, functional requirements, and development models including native, mobile web, and hybrid apps, alongside tooling necessities and best practices. Additionally, it covers key aspects of Java EE 7 such as RESTful web services, JAX-RS, and WebSockets, highlighting their integration with Cordova for mobile applications.

Technology
1 of 132
Downloaded 385 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
Hybrid Mobile Development with Apache Cordova and Java EE 7 Ryan Cuprak, Dassault Systemès Michael Finocchiaro, Dassault Systemès
Who wants to be the next AppStore billionaire?
Exponential Growth – particularly in China http://www.statista.com/topics/1416/smartphone-market-in-china/
Agenda • Demo Application • Mobile Overview • Tooling • Apache Cordova • Java EE 7 + Cordova • JQuery • Security • Testing • Deployment • Summary • Q&A https://github.com/rcuprak/n34sailor Both designed and engineered using Dassault Systèmes CATIA software!
Demo Application Overview • Mobile • Apache Cordova • Infrastructure • Node.js • User interface • JQuery Mobile • Android dev tools • iOS dev tools
Demo Application Sailboat Racing Start/Finish
Demo Application Racing Overview • Committee boat sets the course and announces it. • Boats register via radio specifying their class. • Start sequence for class: • Warning horn is sounded • Start horn is sounded (boats cross start line) • Start sequence repeated for next class. • Committee boat monitors progress and weather. • Race course altered if wind dies or conditions deteriorate. • Finish time for each boat is registered at the end of the race • Final results are calculated – boats have ratings which allows different boats to be compared.
Demo Application Functional Requirements • Broadcast race course • Boat registration • Time check and start notification • Boat tracking • Race announcements • Results • Weather information
Demo Application High Level Architecture Interface Application Entities Infrastructure Apache Cordova JAX-RS WebSocket EJB JPA Entities JMS CDI
Demo Application HTML5 SPA Java EE 7 Server App Postgresql Database NOAA Weather/Tides HTML5 SPA HTML5 SPA
Demo Application Data Model
Available on GitHub https://github.com/rcuprak/n34sailor
Demo Application N34 Sailor
Demo Application What Java EE? • Resource management • Object pooling • Concurrency • Database connection • Transactions • Security • Scalability • Architecture • Rich feature set
Demo Application Why Java EE?
Mobile Overview
Mobile Platforms Status 2014 • Dominated by Google’s Android and Apple’s iOS platforms. • Android’s US market share is about 52% against iOS’s 42% • Windows Phone is at a distance 3rd place with about 4% share. • Globally, Android’s market share is even higher.
Mobile Overview Development Models • Native App • Built for a specific platform • Downloadable app • Objective-C/Swift/xCode, Java/Android Studio etc. • Mobile Web App • Service side apps that run in the device’s web browser • HTML 5, CSS3, JavaScript • jQuery Mobile, Sencha Touch • Responsive and Adaptive Web Designs • Hybrid App • Developed mostly using Mobile Web App technologies, but are executed like a native app in a native (wrapper) container • Apache Cordova (PhoneGap), ADF Mobile, IBM Worklight, AeroGear, Appcelerator
Mobile Overview Development Models… • Native App • Best user experience • Access all device/hardware capabilities • But, development/maintenance will have to be done for every target mobile platform • Mobile Web App • Target multiple platforms from a singe code base • Low barrier to entry – low learning curve, nothing to download for users • But, native development may still be needed and performance may also suffer slightly • Hard to access – user must browse to the ‘site’ • Native HTML5 Apps • Target multiple platforms from a single code base. • Requires development tools for each platform. • Access to device features but with limitations.
Mobile Overview Native HTML5 Apps • Single Page Application (SPA) wrapped in Native application. • Native application displays a WebView – embedded browser. • Logic: • JavaScript • JavaScript platform extensions • UI • HTML5 markup • SVG • Canvas • WebGL • All assets are bundled with the application.
Mobile Overview Native HTML5 vs. Web Apps HTTP Session JSF/JSP/Facelets
Mobile Overview SPA – Single Page Application index.html <html><body> <div id=“page”> <a href=“menu.html”> Menu </a> </div> </body></html> menu.html <html><body> <div id=“page”> <a href=“info.html”> Info </a> </div> </body></html> <a href=“info.html”> Info </a> info.html <html><body> <Info div id=“page”> Info </div> </body></html>
Mobile Overview Framework License jQuery Mobile http://jquerymobile.com MIT Sencha Touch http://sencha.com Commercial(Free) & Open Source (GPLv3) Intel App Framework http://app-framework-software.intel.com MIT Ionic http://ionicframework.com MIT M-Project http://www.the-m-project.org MIT Kendo UI http://www.telerik.com Commercial Twitter Bootstrap 3 http://getbootstrap.com MIT Mobile Frameworks
Mobile Overview Secha Architect
Mobile Overview Sencha Touch Setup & Cordova Integration Creating an initial application: • Download Sencha Touch (http://www.sencha.com) Creating initial app structure • sencha -sdk <sdk path> generate app TestApp TestApp • sencha cordova init • sencha --debug app build -run native NetBeans will have trouble with Sencha files.
Tooling
Tooling Overview • Tooling is very important: Cordova, Java EE, App Servers, Phones, Simulators Unit testing frameworks, build systems, etc. • NetBeans has integrated support: • Java EE 7 • Project templates, Servers, Debugging, Profiling • Apache Cordova • Uses Cordova installation • Platform independent – Android and/or iOS support / WebBrowser • JavaScript libraries and unit testing • Grunt build support
Tooling What do we need? • Platform SDK • Certificates to test on devices ($$) • Ant (ant.apache.org) • NodeJS (nodejs.org) • Install Apache Cordova (cordova.apache.org) • Chrome • Java 8 (java.oracle.com) • NetBeans 8.0.1 (netbeans.org) What might we want to install? Maven (maven.apache.org) • Karma (karma-runner.github.io) • Jasmine (jasmine.github.io) • Grunt (gruntjs.com)
Tooling Platform Tools and SDKs • iOS (xCode) Apple App Store – search for XCode • Android (Android Studio) https://developer.android.com/tools/index.html • Windows Phone http://dev.windows.com/en-us/develop/downloads • Tizen https://developer.tizen.org/downloads/tizen-sdk • BlackBerry http://developer.blackberry.com Note: NetBeans has integration with Android/iOS tooling. Thanks to PhoneGap, we can also build in the cloud!
Tooling iOS Setup
Tooling NodeJS • Cross-platform runtime environment for server-side and networking applications. • Supported on MacOS X, Windows, and Linux. • Runs on top of Google V8 JavaScript engine • JavaScript compiled to machine code via JIT. • npm – package manager pre-installed with Node.js. • Installs packages from the npm registry. https://www.npmjs.org • Used for Apache Cordova, Karma, Mocha, etc. • Download from http://nodejs.org. Only hijacking the package manager - npm
Tooling NodeJS
Tooling Apache Cordova • Installing Cordova: • Mac/Linux: sudo npm install –g cordova • Windows: npm install –g cordova • Adding Platforms: • cordova platform add ios • cordova platform add amazon-fireos • cordova platform add android • cordova platform add blackberry10 • cordova platform add firefoxos • Creating a project (without NetBeans) • cordova create hello com.example.hello HelloWorld
Tooling NetBeans <-> Chrome Integration Install NetBeans Connector (chrome.google.com) NetBeans enables you to debug in Chrome
Tooling Configure SDKs NetBeans This is why you need the Apple developer license in order to run on a physical device!
Tooling Creating Cordova Project • Cordova is an HTML Project • Start with Cordova Project • Start with HTML5 and add Cordova
Demo
Apache Cordova
Apache Cordova Overview • Originally named PhoneGap. • Mobile development framework • Development started in 2009. • Wraps HTML5 applications in a native wrapper. • Purchased by Adobe in 2011. • Code donated to Apache as Apache Cordova. • PhoneGap built on Cordova • Adobe provides cloud build system for PhoneGap.
Apache Cordova Plugins Common Plugins Battery Status Geolocation Camera Globalization Contacts InAppBrowser Device Media Device Motion Media Capture Device Orientation Network Information Dialogs Splashscreen File System Vibrate File Transfer Supports custom plugins!
Apache Cordova Phone Quirks • HTML5 apps will not match platform UI exactly. • Not all hardware features are accessible. • Each platform has its quirks: • iOS network information is Cellular or Ethernet. • iOS fires network available after application startup. • Windows 7 phone emulator reports network connection Unknown. • Device UID on iOS is app specific (to block tracking) • Camera unavailable in iOS simulator • Altitude accuracy not supported on Android • Windows phone doesn’t provide battery level information
Apache Cordova Project Creation in NetBeans
Apache Cordova Platform Specific Directories
Apache Cordova Index.html
Apache Cordova Index.js
Apache Cordova config.xml Danger!! – cross site script (XSS) exploit risk! Based on W3C Packaged Web Apps (Widgets) http://www.w3.org/TR/widgets/
Apache Cordova White Listing • Default security policy allows access to ANY site. • Access should be restricted when going to production. • Whitelist is configured in config.xml. • NetBeans: config.xml found on Files tab. • Examples: 1. <access origin=“http://google.com”/> 2. <access origin=“https://google.com”/> 3. <access origin=“https://maps.google.com”/> 4. <access origin=“https://*.google.com”/> 5. <access origin=“*”/> • Whitelisting can vary by platform: • iOS: <access origin=“*.google.*”> • BlackBerry 10: <preference name=“websecurity” value=“disable”/>
Run Target
Apache Cordova Plugin: Network Status
Apache Cordova Plugin: Device Information Don’t always believe what you see: • Simulators and actual phones return different values. • You should probably test both ARM and Intel-based phones!
Apache Cordova Plugin: Network Type
Apache Cordova Development Best Practices • Start with HTML5 project in NetBeans without Cordova. • Test in Simulator browser(s). • Profile code using Chrome Profiler • Test with Chrome: • Chrome will refuse to invoke WebSocket and RESTful web services on the Java EE app. (CORS) • Cordova automatically allows cross site scripting! • To enable testing in Chrome, DO NOT DISABLE Chrome’s security settings!
Apache Cordova Testing in Chrome != Testing on device Ouch! http://caniuse.com
Apache Cordova Enabling CORS: JAX-RS 2.0 Interceptor Chrome will now allow you to test your HTML5 app.
Apache Cordova Plugin: Camera • Capturing a picture is easy – can use AJAX to send the picture to a RESTful web service. • Picture is transmitted as Base64 and must be decoded. • Java 8 included Base64 decode support. • Requires special JAX-RS configuration to receive the multi-part MIME request.
Apache Cordova Plugin: Camera
Apache Cordova Uploading Pictures via JAX-RS 2.0
Apache Cordova Handling Camera Picture Upload
Apache Cordova JAX-RS Configuration for Large Uploads JAX-RS needs additional configuration to handle file uploads. Configuration specified in web.xml.
Apache Cordova Splash Screens
Java EE 7 & Apache Cordova
Java EE 7 + Cordova Overview What’s the connection between Java EE 7 & Cordova? • Cordova applications are Single Page Apps. • JavaScript/HTML5 embedded in the application. • No JSF/GWT/Struts/JSPs/Facelets/JSTL/etc. • No HTTP Session • No network connection might exist? Answer: • Java EE 7 provides data and backend infrastructure. • Talks to the database • Coordinates application processes
Java EE 7 + Cordova Device/Server Connectivity Java EE 7 App Server REST Request/Response Web Sockets Bidirectional Restful Web Service Web Socket Endpoint JavaScript/HTML5
Java EE 7 + Cordova Device/Server Connectivity RESTful Web Services: • Client/server communication from mobile applications commonly happens over HTTP, more often using REST style services • Stateless, lightweight, scalable • Typically JSON over HTTP/HTTPS. • XML occasionally used. • Client initiates the request. • Commonly supported HTTP verbs include GET, POST, PUT, and DELETE • Uses existing web technologies and security standards • Fully supported by Java EE 6 & 7.
Java EE 7 + Cordova Web Sockets • Introduced with HTML5. http://www.html5rocks.com/en/tutorials/websockets/basics/ • Offers true bi-directional (full-duplex) communication over a single TCP connection. • Initial hand-shake over HTTP, but subsequent conversations over Web Sockets (connection upgraded). • Supports asynchronous, extremely low-lag communication • Perfect for applications like chat and games • Uses existing web technologies and security standards • Transmits Text or binary data • Text is transmitted as Unicode. • URL prefix ws: or wss:
Java EE 7 + Cordova Exchanging Data using JSON Data is exchanged using JSON (JavaScript Object Notation) • Two data structures: objects and arrays • Types: String, number, object, array, true, false, null. • Extremely compact and simple to exchange
Java EE 7 + Cordova Java EE 7 Availability • Released June 12, 2013! • Supported containers: • GlassFish 4 - https://glassfish.java.net/ • Wildfly 8 - http://wildfly.org (Jboss) • More coming soon… • Major features: • WebSockets • JSON API Processing • Concurrency Utilities • Batching • JAX-RS 2.0 • JASPIC
Java EE 7 + Cordova Technology Layers EJB 3 Mobile Device (running Cordova) Servlet CDI JAX-RS JPA Bean Validation Java API for WebSocket Java API for JSON JMS JTA JAXB JCA
Java EE 7 + Cordova Relating Java EE 7 to Mobile Mobile Device (running Cordova) JAX-RS Java API for JSON Java API for WebSocket JAXB POJO <-> JSON
Java EE 7 + Cordova Connectivity Technologies • RESTful web services. • Requests performed using HTTP Methods: GET/DELETE/POST/PUT/HEAD/Options • Client initiates the connection. • Server responds and connection is closed. • Web Sockets • Client initiates the connection. • Both client and server can send data simultaneously. • Client (phone) initiates the connection. Both sides can simultaneously send messages. JAX-RS 2.0 Java API for WebSocket
Java EE 7 + Cordova REST • JAX-RS 2.0 is the REST development API for Java • Major upgrade with Java EE 7. (JSR-339) • Client API, Aysnc, Validation, Filters/Handlers, Interceptors, and Content Negotiation. • Server and client • Integrates with JAXB and Bean Validation • Annotation based, declarative • @Path, @GET, @POST, @PUT, @DELETE, • Pluggable and extensible.
Java EE 7 + Cordova REST Example with JAX-RS HTTP POST to http://<server>/n34/race/join/<id>/<class>
Java EE 7 + Cordova REST Parameter Annotations • Six types of parameters that can be extracted: • Query Parameters - @DefaultValue(“”) @QueryParam(“”) • URI Path Parameters - @ParmParam • Form Parameters -@FormParam • Requires @Post @Consumes("application/x-www-form-urlencoded") • Cookie Parameters - @CookieParam • Header Parameters -@HeaderParam • Matrix Parameters - @MatrixParam
Java EE 7 + Cordova REST in Cordova App + JQuery
Java EE 7 + Cordova JSON to POJOs • JAX-RS uses JAXB for JSON <-> POJO conversion** • JAX-RS integrates with Bean Validation (JSR 349) to validate Java objects (optionally) • Steps: • JAXB converts JSON to POJOs • Beans Validation checks POJOs • JAX-RS method invoked with POJO
Java EE 7 + Cordova Bean Validation Annotations Constraint Constraint @AssertFalse @Min @AssertTrue @NotNull @DecimalMax @Null @DecimalMin @Past @Digits @Pattern @Future @Size @Max
Custom Validation
Java EE 7 + Cordova JAX-RS Gotchas Be careful when returning POJOs! Oops! Use either: • DTO – Data Transfer Object • @XmlTransient
Java EE 7 + Cordova Compressing JSON Responses
Java EE 7 + Cordova Web Sockets Java API for WebSockets • High level declarative API for WebSocket • API similar to JavaScript WebSocket API • Both client and server-side • Important pieces: • Annotations for annotated endpoints: @ServerEndpoint, @OnOpen, @OnClose, @OnMessage, @OnError • Session object – used to send messages. • RemoteEndpoint object – used to sent messages to a client • MessageHandler – interface used by programmatic endpoints. • Pluggable and extensible • Encoders, decoders, sub-protocols
Java EE 7 + Cordova Web Sockets – Annotated Endpoint
Java EE 7 + Cordova Web Sockets: onMessage Parameters Type Parameter Type Partial Message Notes Text String No Text int,long,float,etc. No Text String, boolean Yes True finished Text Custom Object No Decoder.Text Binary byte[] No Binary Byte[],boolean Yes True finished Binary ByteBuffer No Binary ByteBuffer,boolean Yes True finished Binary InputStream Yes Binary Custom Object No Decoder.Binary Pong PongMessage No
Java EE 7 + Cordova Web Socket in JavaScript Creating WebSocket in JavaScript:
Java EE 7 + Cordova Sending JSON via WebSockets
Java EE 7 + Cordova Server Load: Web Sockets vs. REST Java EE 7 Server Java EE 7 Server REST WebSockets
Java EE 7 + Cordova HTTP Handshake HTTP Handshake Request
Java EE 7 + Cordova HTTP Handshake Response HTTP Handshake Response
Java EE 7 + Cordova Two Types of Web Socket Endpoints • Programmatic (powerful) • Life-cycle and message handling can be implemented as separate classes. • Same message handler can be used for multiple clients. • Annotated (easy) • Configured using annotations. • Any POJO can be an endpoint. • Endpoint and message handler are combined.
Java EE 7 + Cordova Web Sockets: Session • javax.websocket.Session most important object. • Represents the connection to the client. • Nearest you will come to the “raw” socket connection. • Provides key methods for: • Sending messages back to the client • Closing the connection • Storing state • Obtaining information about the connection • Acquiring the principal • Retrieving a list of all connections to a client • Retrieving unique identifier representing the session • Acquire in onOpen or onMessage methods
Java EE 7 + Cordova Web Sockets: RemoteEndpoint • RemoteEndpoint instance retrieved from the Session: • public RemoteEndpoint.Async getAsyncRemote() • public RemoteEndpoint.Basic getBasicRemote() • Methods on the RemoteEndpoint.Basic:
Java EE 7 + Cordova Web Sockets: Message Handler • MessageHandler used for programmatic endpoints. • Two types of messages – Partial or Whole.
Java EE 7 + Cordova Web Sockets: Programmatic Endpoint
Java EE 7 + Cordova Web Sockets: Annotated Endpoint Synchronously sends a message back to the client.
Java EE 7 + Cordova Java API for JSON • Defined in JSR 353 – required for Java EE 7 • Provides ability to parse, transform, and query JSON. • Used to create or read JSON. • Does NOT perform JSON <-> Object mapping • Useful for hand-coding JSON for JavaScript. • Can be used with JAX-RS instead of auto-JAXB JSON production • APIs: • Object Model API (like DOM) • Streaming API (like SAX)
Java EE 7 + Cordova Java API for JSON • WebSocket connection processes many types of messages. AbstractMessage ChatMessage TrackingMessage RaceMessage
Java EE 7 + Cordova Java API for JSON Decoders/encoders Message Object
Java EE 7 + Cordova Encoding JSON
Java EE 7 + Cordova Decoding JSON
Java EE 7 + Cordova Decoding JSON • WebSocket implementation will check with each decoder until it finds one that can decode the message. • Minimize parsing in the willDecode or cache for the decode method. • Exceptions processing messages can wreak havoc.
Java EE 7 + Cordova Web Sockets and Java EE • WebSockets can be Singleton Bean or a Stateful Session Bean. • With Stateful Session Bean you can use extended persistence context! @PersistenceContext(type=PersistenceContextType.EXTENDED) private EntityManager em; • Annotate OnClose/OnError with @Remove to release the stateful bean. • Limitations with stateful beans: • Cannot receive CDI events. • WebSocket Session can be accessed from other threads to send messages to the client.
Java EE 7 + Cordova Web Sockets (generically) • No compression supported by default! • Binary data is transmitted using Base64 encoded. • Don’t use WebSockets on the main login/landing page. • ws: can be sniffed as easily and packets injected. • Each message can take upwards of 2kb header – much smaller than issuing a RESTful service call. • WebSocket connection limit is different than the HTTP connection limit. • User can open an unlimited number of connections to a single server.
JQueryMobile
JQueryMobile Overview • JavaScript framework is needed for mobile development. • Mobile UIs are different. • Touch based • Certain UI conventions. • JQuery Mobile • Optimized for mobile devices • Themeable • 12 Kb compressed • Accessibility support • JQuery Mobile requires JQuery
JQueryMobile Configuration • Use NetBeans to install JQuery and JQuery Mobile. • Don’t use CDN – all content must be packaged with the application.
JQueryMobile Quick Introduction
JQueryMobile Navigation • Changing to another page: • Processing a page before rendering:
Security
Security Overview • Apache Cordova App != Webapp • No HTTP session • Different usage pattern • Apache Cordova App consumes Java EE services • Users do not expect to authenticate on each launch • Do you log into email? • Password should never be stored • Phones are lost/stolen regularly • Obscurity isn’t security • Many users re-use password
Security User Interaction Timeline Cordova App Java EE Server Retrieve account info Retrieve race info Join race Update account info View results 10 sec 25 min User quits and motors out of harbor Checks email User goes racing… 2 hours 3 hours Celebratory beer
Security Java EE Security Goal is to use Java EE security on the server side: JAX-RS Endpoint EJBs (roles)
Security Typical Java EE Configuration Won’t Work!
Security Basic Authentication
Security Token Authentication/Authorization • Token based security (generated UUID) • User authenticates once using username/password • HTTP authentication performed using POST • Server generates a token (UUID) which client stores • Client submits token with each request (HTTP Header) • If token isn’t valid, user is forced to re-authenticate • Token authentication is performed before web service invocation. • Remember: • Servers can log HTTP requests – don’t include token in URL.
Security Token Verification via Filter Bad idea!
Security Token Verification via Filter Drawbacks: • Authentication performed on each request • Client must cache credentials and resubmit each time • Container repeatedly checks the database Alternate approach – authentication module (JASPIC) • Java Authentication API for Containers • Developed under JSR 196 • Operates on messages (think web requests) • Standardizes the authentication module development • Authentication ultimately performed via ServerAuthModule.
Security Server Authentication Module • JASPIC puzzle pieces • ServletContextListener – initial registration of AuthConfigProvider • AuthConfigProvider • ServerAuthConfig • ServerAuthContext • ServerAuthModule  does the actual authentication work
Security JASPIC Pieces
Security JASPIC Pieces Produced by the AuthConfigProviderImpl This then produces…
Security JASPIC Pieces Almost to the module that does the work!
Security JASPIC Pieces ServerAuthModule Implementation What is this code doing? 1) Specifying we are interested in HTTP messages 2) Looking up our own EJB that performs authentication
Security JASPIC Pieces WebSocket Handling Setup Principals…
Security Authorize Bean Token is cached!
Security Authentication Process JAX-RS Endpoint AuthorizeBea n EJB Auth Module Race EJB /join/race Check token Invoke Service join Java EE Security
Testing
Testing Overview • Testing must be done on both JavaScript and Java EE code. • Use Arquillian to test Java EE code • Runs the container and unit tests within the container • Use JAX-RS and WebSocket client libraries to test • Use JavaScript testing framework (many) to test APIs. • Use Karma to start web server. http://karma-runner.github.io • Use Jasmine to actually implement unit tests http://jasmine.github.io
Testing Karma & Jasmine • Install Karma npm install karma • Install launcher (Karma) and unit test framework (Jasmine): • npm install karma-chrome-launcher --save-dev • npm install karma-jasmine --save-dev • Configure NetBeans to use Karma • Specify Karma installation directory (in project) • Create Karma configuration file • Write tests
Deployment
Summary App Store Distribution Store Owner Platform Cost AppStore Apple iOS $99/year Android Market Google Android $20 AppWorld RIM BlackBerry BlackBerry Free Amazon AppStore Amazon Android $99/year Marketplace Microsoft Windows $99/year
Summary Best Practices • REST vs. WebSocket • REST for the most part, WebSocket only for full-duplex, bidirectional • REST • Requests should be granular – not fine grained • JSON vs. XML • JSON hands down • Binary data an option. • Storing state • Mostly on the client, synchronize/persist on the server • API design • Versioning! • Coarse grained, stateless, general purpose • Security • TLS, federated (OAuth), avoid sensitive data on client
Summary • Apache Cordova/PhoneGap provide true standards based cross-platform mobile development. • Java EE 7 fundamentally simplifies backend mobile development. • Java EE well positioned as a mobile backend, especially with JAX-RS and the Java API for WebSocket • You can use our demo code as a starting point • There are some best practices to be aware of • Most importantly, have fun!
Summary Resources • Java EE • http://oracle.com/javaee • Java EE Tutorial • http://docs.oracle.com/javaee/7/tutorial/doc/home.htm • Cordova / NetBeans Tutorial • https://netbeans.org/kb/docs/webclient/cordova-gettingstarted. html • Java EE 7 Containers • GlassFish 4 (https://glassfish.java.net/) • WildFly 8 (http://www.wildfly.org/) aka JBoss • Reference Implementation • http://glassfish.org • http://java.net/projects/tyrus • http://jersey.java.net
Summary References • Email contact: • Michael.FINOCCHIARO@gmail.com • rcuprak@gmail.com • Twitter: @ctjava • Other Session: • JavaFX Versus HTML5 - CON3258 9/30/14 (Tuesday) 5:30 PM - Hilton - Plaza A • 50 EJB 3 Best Practices in 50 Minutes - CON1947 • Books:

More Related Content

PPTX
Ch05 Servlet 進階 API、過濾器與傾聽器
Justin Lin
 
PDF
Blazor web apps
Rajesh Kolla
 
PPTX
webworkers
Asanka Indrajith
 
PPTX
Android - Broadcast Receiver
Yong Heui Cho
 
PPTX
Demarrer ionic en 5 etape
Zaïd BOUDAMOUZ
 
PPTX
Ch02 撰寫與設定 Servlet
Justin Lin
 
PDF
Struts
Abdelkerim Lemaadi
 
PPT
Real Time Communication using Node.js and Socket.io
Mindfire Solutions
 
Ch05 Servlet 進階 API、過濾器與傾聽器
Justin Lin
 
Blazor web apps
Rajesh Kolla
 
webworkers
Asanka Indrajith
 
Android - Broadcast Receiver
Yong Heui Cho
 
Demarrer ionic en 5 etape
Zaïd BOUDAMOUZ
 
Ch02 撰寫與設定 Servlet
Justin Lin
 
Struts
Abdelkerim Lemaadi
 
Real Time Communication using Node.js and Socket.io
Mindfire Solutions
 

What's hot (19)

PDF
Introdução APIs RESTful
Douglas V. Pasqua
 
ODP
An Introduction to WebAssembly
Daniel Budden
 
PPTX
Building Web Applications with Blazor and MudBlazor
Miguel Angel Teheran Garcia
 
PDF
Nodejs vatsal shah
Vatsal N Shah
 
PPTX
Introduction à Node.js
Sonam TCHEUTSEUN
 
PPTX
Les dessous du framework spring
Antoine Rey
 
PPTX
Server side rendering review
Vladyslav Morzhanov
 
PPTX
NodeJS
Alok Guha
 
PPTX
Spring boot
Pradeep Shanmugam
 
PDF
Formation Spring Avancé gratuite par Ippon 2014
Ippon
 
PDF
Introduction to jest
pksjce
 
PDF
Facebook & Twitter API
Fabrice Delhoste
 
PPTX
SOLID, DRY, SLAP design principles
Sergey Karpushin
 
PDF
From Spring Framework 5.3 to 6.0
VMware Tanzu
 
PDF
Web Worker, Service Worker and Worklets
Keshav Gupta
 
PDF
spring-api-rest.pdf
Jaouad Assabbour
 
PDF
컴포넌트 관점에서 개발하기
우영 주
 
PPTX
Node.Js: Basics Concepts and Introduction
Kanika Gera
 
PPTX
Spring Boot RestApi.pptx
Google Developers Group Libreville Nom de famille
 
Introdução APIs RESTful
Douglas V. Pasqua
 
An Introduction to WebAssembly
Daniel Budden
 
Building Web Applications with Blazor and MudBlazor
Miguel Angel Teheran Garcia
 
Nodejs vatsal shah
Vatsal N Shah
 
Introduction à Node.js
Sonam TCHEUTSEUN
 
Les dessous du framework spring
Antoine Rey
 
Server side rendering review
Vladyslav Morzhanov
 
NodeJS
Alok Guha
 
Spring boot
Pradeep Shanmugam
 
Formation Spring Avancé gratuite par Ippon 2014
Ippon
 
Introduction to jest
pksjce
 
Facebook & Twitter API
Fabrice Delhoste
 
SOLID, DRY, SLAP design principles
Sergey Karpushin
 
From Spring Framework 5.3 to 6.0
VMware Tanzu
 
Web Worker, Service Worker and Worklets
Keshav Gupta
 
spring-api-rest.pdf
Jaouad Assabbour
 
컴포넌트 관점에서 개발하기
우영 주
 
Node.Js: Basics Concepts and Introduction
Kanika Gera
 
Spring Boot RestApi.pptx
Google Developers Group Libreville Nom de famille
 
Ad

Similar to Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014) (20)

PPTX
Hybrid Mobile Development with Apache Cordova and
Ryan Cuprak
 
PPTX
Cross-platform Mobile Development on Open Source
All Things Open
 
PPTX
NCDevCon 2017 - Cross Platform Mobile Apps
John M. Wargo
 
ODP
Apache Cordova, Hybrid Application Development
thedumbterminal
 
PPTX
Cross-Platform Development
Syed Owais Ali Chishti
 
PDF
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Nick Landry
 
PDF
Introduction to Phonegap
Andrei Firoiu
 
PDF
Developing Great Apps with Apache Cordova
Shekhar Gulati
 
PDF
[2015/2016] Apache Cordova
Ivano Malavolta
 
PPTX
Rapid Prototyping with Cordova aka Phonegap
Josue Bustos
 
PDF
PhoneGap/Cordova
Mihai Corlan
 
PPTX
fdocuments.in_apache-cordova-overview.pptx
ssuserd27db6
 
PDF
Cross-Platform Mobile Development with PhoneGap-Vince Bullinger
Mobile March
 
PDF
Cordova and PhoneGap Insights
Monaca
 
PDF
Apache Cordova
Ivano Malavolta
 
PPTX
Hybridapp
Faizaan Ahmed Khan
 
PPTX
Cross-Platform Development using Angulr JS in Visual Studio
Mizanur Sarker
 
PDF
Apache Cordova 4.x
Ivano Malavolta
 
PPTX
Mobile Web Apps
Athhar Ahamed
 
PDF
Cordova: APIs and instruments
Ivano Malavolta
 
Hybrid Mobile Development with Apache Cordova and
Ryan Cuprak
 
Cross-platform Mobile Development on Open Source
All Things Open
 
NCDevCon 2017 - Cross Platform Mobile Apps
John M. Wargo
 
Apache Cordova, Hybrid Application Development
thedumbterminal
 
Cross-Platform Development
Syed Owais Ali Chishti
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Nick Landry
 
Introduction to Phonegap
Andrei Firoiu
 
Developing Great Apps with Apache Cordova
Shekhar Gulati
 
[2015/2016] Apache Cordova
Ivano Malavolta
 
Rapid Prototyping with Cordova aka Phonegap
Josue Bustos
 
PhoneGap/Cordova
Mihai Corlan
 
fdocuments.in_apache-cordova-overview.pptx
ssuserd27db6
 
Cross-Platform Mobile Development with PhoneGap-Vince Bullinger
Mobile March
 
Cordova and PhoneGap Insights
Monaca
 
Apache Cordova
Ivano Malavolta
 
Hybridapp
Faizaan Ahmed Khan
 
Cross-Platform Development using Angulr JS in Visual Studio
Mizanur Sarker
 
Apache Cordova 4.x
Ivano Malavolta
 
Mobile Web Apps
Athhar Ahamed
 
Cordova: APIs and instruments
Ivano Malavolta
 
Ad

More from Ryan Cuprak (20)

PPTX
Jakarta EE Test Strategies (2022)
Ryan Cuprak
 
PPTX
DIY Home Weather Station (Devoxx Poland 2023)
Ryan Cuprak
 
PPTX
Why jakarta ee matters (ConFoo 2021)
Ryan Cuprak
 
PDF
Polygot Java EE on the GraalVM
Ryan Cuprak
 
PPTX
Exploring Java Heap Dumps (Oracle Code One 2018)
Ryan Cuprak
 
PPTX
Node.js Development with Apache NetBeans
Ryan Cuprak
 
PPTX
Preparing for java 9 modules upload
Ryan Cuprak
 
PPTX
Faster Java EE Builds with Gradle
Ryan Cuprak
 
PPTX
Java EE 8
Ryan Cuprak
 
PPTX
Faster Java EE Builds with Gradle
Ryan Cuprak
 
PPTX
Containerless in the Cloud with AWS Lambda
Ryan Cuprak
 
PPTX
Java EE 8 Update
Ryan Cuprak
 
PPTX
Batching and Java EE (jdk.io)
Ryan Cuprak
 
PPTX
Faster java ee builds with gradle [con4921]
Ryan Cuprak
 
PPTX
Java script nirvana in netbeans [con5679]
Ryan Cuprak
 
PPTX
Jms deep dive [con4864]
Ryan Cuprak
 
PPTX
Top 50 java ee 7 best practices [con5669]
Ryan Cuprak
 
PPTX
Developing in the Cloud
Ryan Cuprak
 
PPTX
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
Ryan Cuprak
 
PPTX
JavaFX Versus HTML5 - JavaOne 2014
Ryan Cuprak
 
Jakarta EE Test Strategies (2022)
Ryan Cuprak
 
DIY Home Weather Station (Devoxx Poland 2023)
Ryan Cuprak
 
Why jakarta ee matters (ConFoo 2021)
Ryan Cuprak
 
Polygot Java EE on the GraalVM
Ryan Cuprak
 
Exploring Java Heap Dumps (Oracle Code One 2018)
Ryan Cuprak
 
Node.js Development with Apache NetBeans
Ryan Cuprak
 
Preparing for java 9 modules upload
Ryan Cuprak
 
Faster Java EE Builds with Gradle
Ryan Cuprak
 
Java EE 8
Ryan Cuprak
 
Faster Java EE Builds with Gradle
Ryan Cuprak
 
Containerless in the Cloud with AWS Lambda
Ryan Cuprak
 
Java EE 8 Update
Ryan Cuprak
 
Batching and Java EE (jdk.io)
Ryan Cuprak
 
Faster java ee builds with gradle [con4921]
Ryan Cuprak
 
Java script nirvana in netbeans [con5679]
Ryan Cuprak
 
Jms deep dive [con4864]
Ryan Cuprak
 
Top 50 java ee 7 best practices [con5669]
Ryan Cuprak
 
Developing in the Cloud
Ryan Cuprak
 
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
Ryan Cuprak
 
JavaFX Versus HTML5 - JavaOne 2014
Ryan Cuprak
 

Recently uploaded (20)

PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PDF
KodekX | Application Modernization Development
KodekX
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PPTX
Telecom Fraud Prevention Guide | Hyperlink InfoSystem
danielle hunter
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PDF
Transforming Manufacturing operations through Intelligent Integrations
TGH Software Solutions Pvt. Ltd.
 
PDF
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
PDF
Chapter 2 Digital Image Fundamentals.pdf
Getnet Tigabie Askale -(GM)
 
PDF
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
CIFDAQ
 
PDF
Modernizing your data center with Dell and AMD
Principled Technologies
 
PDF
HCSP-Presales-Campus Network Planning and Design V1.0 Training Material-Witho...
fahmeedakram1
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PPTX
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
defencerabbit Team
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
KodekX | Application Modernization Development
KodekX
 
Cloud computing and distributed systems.
kkkkkhan
 
Telecom Fraud Prevention Guide | Hyperlink InfoSystem
danielle hunter
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
Transforming Manufacturing operations through Intelligent Integrations
TGH Software Solutions Pvt. Ltd.
 
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
Chapter 2 Digital Image Fundamentals.pdf
Getnet Tigabie Askale -(GM)
 
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
CIFDAQ
 
Modernizing your data center with Dell and AMD
Principled Technologies
 
HCSP-Presales-Campus Network Planning and Design V1.0 Training Material-Witho...
fahmeedakram1
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
defencerabbit Team
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 

Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)

  • 1. Hybrid Mobile Development with Apache Cordova and Java EE 7 Ryan Cuprak, Dassault Systemès Michael Finocchiaro, Dassault Systemès
  • 2. Who wants to be the next AppStore billionaire?
  • 3. Exponential Growth – particularly in China http://www.statista.com/topics/1416/smartphone-market-in-china/
  • 4. Agenda • Demo Application • Mobile Overview • Tooling • Apache Cordova • Java EE 7 + Cordova • JQuery • Security • Testing • Deployment • Summary • Q&A https://github.com/rcuprak/n34sailor Both designed and engineered using Dassault Systèmes CATIA software!
  • 5. Demo Application Overview • Mobile • Apache Cordova • Infrastructure • Node.js • User interface • JQuery Mobile • Android dev tools • iOS dev tools
  • 6. Demo Application Sailboat Racing Start/Finish
  • 7. Demo Application Racing Overview • Committee boat sets the course and announces it. • Boats register via radio specifying their class. • Start sequence for class: • Warning horn is sounded • Start horn is sounded (boats cross start line) • Start sequence repeated for next class. • Committee boat monitors progress and weather. • Race course altered if wind dies or conditions deteriorate. • Finish time for each boat is registered at the end of the race • Final results are calculated – boats have ratings which allows different boats to be compared.
  • 8. Demo Application Functional Requirements • Broadcast race course • Boat registration • Time check and start notification • Boat tracking • Race announcements • Results • Weather information
  • 9. Demo Application High Level Architecture Interface Application Entities Infrastructure Apache Cordova JAX-RS WebSocket EJB JPA Entities JMS CDI
  • 10. Demo Application HTML5 SPA Java EE 7 Server App Postgresql Database NOAA Weather/Tides HTML5 SPA HTML5 SPA
  • 12. Available on GitHub https://github.com/rcuprak/n34sailor
  • 14. Demo Application What Java EE? • Resource management • Object pooling • Concurrency • Database connection • Transactions • Security • Scalability • Architecture • Rich feature set
  • 17. Mobile Platforms Status 2014 • Dominated by Google’s Android and Apple’s iOS platforms. • Android’s US market share is about 52% against iOS’s 42% • Windows Phone is at a distance 3rd place with about 4% share. • Globally, Android’s market share is even higher.
  • 18. Mobile Overview Development Models • Native App • Built for a specific platform • Downloadable app • Objective-C/Swift/xCode, Java/Android Studio etc. • Mobile Web App • Service side apps that run in the device’s web browser • HTML 5, CSS3, JavaScript • jQuery Mobile, Sencha Touch • Responsive and Adaptive Web Designs • Hybrid App • Developed mostly using Mobile Web App technologies, but are executed like a native app in a native (wrapper) container • Apache Cordova (PhoneGap), ADF Mobile, IBM Worklight, AeroGear, Appcelerator
  • 19. Mobile Overview Development Models… • Native App • Best user experience • Access all device/hardware capabilities • But, development/maintenance will have to be done for every target mobile platform • Mobile Web App • Target multiple platforms from a singe code base • Low barrier to entry – low learning curve, nothing to download for users • But, native development may still be needed and performance may also suffer slightly • Hard to access – user must browse to the ‘site’ • Native HTML5 Apps • Target multiple platforms from a single code base. • Requires development tools for each platform. • Access to device features but with limitations.
  • 20. Mobile Overview Native HTML5 Apps • Single Page Application (SPA) wrapped in Native application. • Native application displays a WebView – embedded browser. • Logic: • JavaScript • JavaScript platform extensions • UI • HTML5 markup • SVG • Canvas • WebGL • All assets are bundled with the application.
  • 21. Mobile Overview Native HTML5 vs. Web Apps HTTP Session JSF/JSP/Facelets
  • 22. Mobile Overview SPA – Single Page Application index.html <html><body> <div id=“page”> <a href=“menu.html”> Menu </a> </div> </body></html> menu.html <html><body> <div id=“page”> <a href=“info.html”> Info </a> </div> </body></html> <a href=“info.html”> Info </a> info.html <html><body> <Info div id=“page”> Info </div> </body></html>
  • 23. Mobile Overview Framework License jQuery Mobile http://jquerymobile.com MIT Sencha Touch http://sencha.com Commercial(Free) & Open Source (GPLv3) Intel App Framework http://app-framework-software.intel.com MIT Ionic http://ionicframework.com MIT M-Project http://www.the-m-project.org MIT Kendo UI http://www.telerik.com Commercial Twitter Bootstrap 3 http://getbootstrap.com MIT Mobile Frameworks
  • 25. Mobile Overview Sencha Touch Setup & Cordova Integration Creating an initial application: • Download Sencha Touch (http://www.sencha.com) Creating initial app structure • sencha -sdk <sdk path> generate app TestApp TestApp • sencha cordova init • sencha --debug app build -run native NetBeans will have trouble with Sencha files.
  • 27. Tooling Overview • Tooling is very important: Cordova, Java EE, App Servers, Phones, Simulators Unit testing frameworks, build systems, etc. • NetBeans has integrated support: • Java EE 7 • Project templates, Servers, Debugging, Profiling • Apache Cordova • Uses Cordova installation • Platform independent – Android and/or iOS support / WebBrowser • JavaScript libraries and unit testing • Grunt build support
  • 28. Tooling What do we need? • Platform SDK • Certificates to test on devices ($$) • Ant (ant.apache.org) • NodeJS (nodejs.org) • Install Apache Cordova (cordova.apache.org) • Chrome • Java 8 (java.oracle.com) • NetBeans 8.0.1 (netbeans.org) What might we want to install? Maven (maven.apache.org) • Karma (karma-runner.github.io) • Jasmine (jasmine.github.io) • Grunt (gruntjs.com)
  • 29. Tooling Platform Tools and SDKs • iOS (xCode) Apple App Store – search for XCode • Android (Android Studio) https://developer.android.com/tools/index.html • Windows Phone http://dev.windows.com/en-us/develop/downloads • Tizen https://developer.tizen.org/downloads/tizen-sdk • BlackBerry http://developer.blackberry.com Note: NetBeans has integration with Android/iOS tooling. Thanks to PhoneGap, we can also build in the cloud!
  • 31. Tooling NodeJS • Cross-platform runtime environment for server-side and networking applications. • Supported on MacOS X, Windows, and Linux. • Runs on top of Google V8 JavaScript engine • JavaScript compiled to machine code via JIT. • npm – package manager pre-installed with Node.js. • Installs packages from the npm registry. https://www.npmjs.org • Used for Apache Cordova, Karma, Mocha, etc. • Download from http://nodejs.org. Only hijacking the package manager - npm
  • 33. Tooling Apache Cordova • Installing Cordova: • Mac/Linux: sudo npm install –g cordova • Windows: npm install –g cordova • Adding Platforms: • cordova platform add ios • cordova platform add amazon-fireos • cordova platform add android • cordova platform add blackberry10 • cordova platform add firefoxos • Creating a project (without NetBeans) • cordova create hello com.example.hello HelloWorld
  • 34. Tooling NetBeans <-> Chrome Integration Install NetBeans Connector (chrome.google.com) NetBeans enables you to debug in Chrome
  • 35. Tooling Configure SDKs NetBeans This is why you need the Apple developer license in order to run on a physical device!
  • 36. Tooling Creating Cordova Project • Cordova is an HTML Project • Start with Cordova Project • Start with HTML5 and add Cordova
  • 37. Demo
  • 39. Apache Cordova Overview • Originally named PhoneGap. • Mobile development framework • Development started in 2009. • Wraps HTML5 applications in a native wrapper. • Purchased by Adobe in 2011. • Code donated to Apache as Apache Cordova. • PhoneGap built on Cordova • Adobe provides cloud build system for PhoneGap.
  • 40. Apache Cordova Plugins Common Plugins Battery Status Geolocation Camera Globalization Contacts InAppBrowser Device Media Device Motion Media Capture Device Orientation Network Information Dialogs Splashscreen File System Vibrate File Transfer Supports custom plugins!
  • 41. Apache Cordova Phone Quirks • HTML5 apps will not match platform UI exactly. • Not all hardware features are accessible. • Each platform has its quirks: • iOS network information is Cellular or Ethernet. • iOS fires network available after application startup. • Windows 7 phone emulator reports network connection Unknown. • Device UID on iOS is app specific (to block tracking) • Camera unavailable in iOS simulator • Altitude accuracy not supported on Android • Windows phone doesn’t provide battery level information
  • 42. Apache Cordova Project Creation in NetBeans
  • 43. Apache Cordova Platform Specific Directories
  • 46. Apache Cordova config.xml Danger!! – cross site script (XSS) exploit risk! Based on W3C Packaged Web Apps (Widgets) http://www.w3.org/TR/widgets/
  • 47. Apache Cordova White Listing • Default security policy allows access to ANY site. • Access should be restricted when going to production. • Whitelist is configured in config.xml. • NetBeans: config.xml found on Files tab. • Examples: 1. <access origin=“http://google.com”/> 2. <access origin=“https://google.com”/> 3. <access origin=“https://maps.google.com”/> 4. <access origin=“https://*.google.com”/> 5. <access origin=“*”/> • Whitelisting can vary by platform: • iOS: <access origin=“*.google.*”> • BlackBerry 10: <preference name=“websecurity” value=“disable”/>
  • 49. Apache Cordova Plugin: Network Status
  • 50. Apache Cordova Plugin: Device Information Don’t always believe what you see: • Simulators and actual phones return different values. • You should probably test both ARM and Intel-based phones!
  • 51. Apache Cordova Plugin: Network Type
  • 52. Apache Cordova Development Best Practices • Start with HTML5 project in NetBeans without Cordova. • Test in Simulator browser(s). • Profile code using Chrome Profiler • Test with Chrome: • Chrome will refuse to invoke WebSocket and RESTful web services on the Java EE app. (CORS) • Cordova automatically allows cross site scripting! • To enable testing in Chrome, DO NOT DISABLE Chrome’s security settings!
  • 53. Apache Cordova Testing in Chrome != Testing on device Ouch! http://caniuse.com
  • 54. Apache Cordova Enabling CORS: JAX-RS 2.0 Interceptor Chrome will now allow you to test your HTML5 app.
  • 55. Apache Cordova Plugin: Camera • Capturing a picture is easy – can use AJAX to send the picture to a RESTful web service. • Picture is transmitted as Base64 and must be decoded. • Java 8 included Base64 decode support. • Requires special JAX-RS configuration to receive the multi-part MIME request.
  • 57. Apache Cordova Uploading Pictures via JAX-RS 2.0
  • 58. Apache Cordova Handling Camera Picture Upload
  • 59. Apache Cordova JAX-RS Configuration for Large Uploads JAX-RS needs additional configuration to handle file uploads. Configuration specified in web.xml.
  • 61. Java EE 7 & Apache Cordova
  • 62. Java EE 7 + Cordova Overview What’s the connection between Java EE 7 & Cordova? • Cordova applications are Single Page Apps. • JavaScript/HTML5 embedded in the application. • No JSF/GWT/Struts/JSPs/Facelets/JSTL/etc. • No HTTP Session • No network connection might exist? Answer: • Java EE 7 provides data and backend infrastructure. • Talks to the database • Coordinates application processes
  • 63. Java EE 7 + Cordova Device/Server Connectivity Java EE 7 App Server REST Request/Response Web Sockets Bidirectional Restful Web Service Web Socket Endpoint JavaScript/HTML5
  • 64. Java EE 7 + Cordova Device/Server Connectivity RESTful Web Services: • Client/server communication from mobile applications commonly happens over HTTP, more often using REST style services • Stateless, lightweight, scalable • Typically JSON over HTTP/HTTPS. • XML occasionally used. • Client initiates the request. • Commonly supported HTTP verbs include GET, POST, PUT, and DELETE • Uses existing web technologies and security standards • Fully supported by Java EE 6 & 7.
  • 65. Java EE 7 + Cordova Web Sockets • Introduced with HTML5. http://www.html5rocks.com/en/tutorials/websockets/basics/ • Offers true bi-directional (full-duplex) communication over a single TCP connection. • Initial hand-shake over HTTP, but subsequent conversations over Web Sockets (connection upgraded). • Supports asynchronous, extremely low-lag communication • Perfect for applications like chat and games • Uses existing web technologies and security standards • Transmits Text or binary data • Text is transmitted as Unicode. • URL prefix ws: or wss:
  • 66. Java EE 7 + Cordova Exchanging Data using JSON Data is exchanged using JSON (JavaScript Object Notation) • Two data structures: objects and arrays • Types: String, number, object, array, true, false, null. • Extremely compact and simple to exchange
  • 67. Java EE 7 + Cordova Java EE 7 Availability • Released June 12, 2013! • Supported containers: • GlassFish 4 - https://glassfish.java.net/ • Wildfly 8 - http://wildfly.org (Jboss) • More coming soon… • Major features: • WebSockets • JSON API Processing • Concurrency Utilities • Batching • JAX-RS 2.0 • JASPIC
  • 68. Java EE 7 + Cordova Technology Layers EJB 3 Mobile Device (running Cordova) Servlet CDI JAX-RS JPA Bean Validation Java API for WebSocket Java API for JSON JMS JTA JAXB JCA
  • 69. Java EE 7 + Cordova Relating Java EE 7 to Mobile Mobile Device (running Cordova) JAX-RS Java API for JSON Java API for WebSocket JAXB POJO <-> JSON
  • 70. Java EE 7 + Cordova Connectivity Technologies • RESTful web services. • Requests performed using HTTP Methods: GET/DELETE/POST/PUT/HEAD/Options • Client initiates the connection. • Server responds and connection is closed. • Web Sockets • Client initiates the connection. • Both client and server can send data simultaneously. • Client (phone) initiates the connection. Both sides can simultaneously send messages. JAX-RS 2.0 Java API for WebSocket
  • 71. Java EE 7 + Cordova REST • JAX-RS 2.0 is the REST development API for Java • Major upgrade with Java EE 7. (JSR-339) • Client API, Aysnc, Validation, Filters/Handlers, Interceptors, and Content Negotiation. • Server and client • Integrates with JAXB and Bean Validation • Annotation based, declarative • @Path, @GET, @POST, @PUT, @DELETE, • Pluggable and extensible.
  • 72. Java EE 7 + Cordova REST Example with JAX-RS HTTP POST to http://<server>/n34/race/join/<id>/<class>
  • 73. Java EE 7 + Cordova REST Parameter Annotations • Six types of parameters that can be extracted: • Query Parameters - @DefaultValue(“”) @QueryParam(“”) • URI Path Parameters - @ParmParam • Form Parameters -@FormParam • Requires @Post @Consumes("application/x-www-form-urlencoded") • Cookie Parameters - @CookieParam • Header Parameters -@HeaderParam • Matrix Parameters - @MatrixParam
  • 74. Java EE 7 + Cordova REST in Cordova App + JQuery
  • 75. Java EE 7 + Cordova JSON to POJOs • JAX-RS uses JAXB for JSON <-> POJO conversion** • JAX-RS integrates with Bean Validation (JSR 349) to validate Java objects (optionally) • Steps: • JAXB converts JSON to POJOs • Beans Validation checks POJOs • JAX-RS method invoked with POJO
  • 76. Java EE 7 + Cordova Bean Validation Annotations Constraint Constraint @AssertFalse @Min @AssertTrue @NotNull @DecimalMax @Null @DecimalMin @Past @Digits @Pattern @Future @Size @Max
  • 78. Java EE 7 + Cordova JAX-RS Gotchas Be careful when returning POJOs! Oops! Use either: • DTO – Data Transfer Object • @XmlTransient
  • 79. Java EE 7 + Cordova Compressing JSON Responses
  • 80. Java EE 7 + Cordova Web Sockets Java API for WebSockets • High level declarative API for WebSocket • API similar to JavaScript WebSocket API • Both client and server-side • Important pieces: • Annotations for annotated endpoints: @ServerEndpoint, @OnOpen, @OnClose, @OnMessage, @OnError • Session object – used to send messages. • RemoteEndpoint object – used to sent messages to a client • MessageHandler – interface used by programmatic endpoints. • Pluggable and extensible • Encoders, decoders, sub-protocols
  • 81. Java EE 7 + Cordova Web Sockets – Annotated Endpoint
  • 82. Java EE 7 + Cordova Web Sockets: onMessage Parameters Type Parameter Type Partial Message Notes Text String No Text int,long,float,etc. No Text String, boolean Yes True finished Text Custom Object No Decoder.Text Binary byte[] No Binary Byte[],boolean Yes True finished Binary ByteBuffer No Binary ByteBuffer,boolean Yes True finished Binary InputStream Yes Binary Custom Object No Decoder.Binary Pong PongMessage No
  • 83. Java EE 7 + Cordova Web Socket in JavaScript Creating WebSocket in JavaScript:
  • 84. Java EE 7 + Cordova Sending JSON via WebSockets
  • 85. Java EE 7 + Cordova Server Load: Web Sockets vs. REST Java EE 7 Server Java EE 7 Server REST WebSockets
  • 86. Java EE 7 + Cordova HTTP Handshake HTTP Handshake Request
  • 87. Java EE 7 + Cordova HTTP Handshake Response HTTP Handshake Response
  • 88. Java EE 7 + Cordova Two Types of Web Socket Endpoints • Programmatic (powerful) • Life-cycle and message handling can be implemented as separate classes. • Same message handler can be used for multiple clients. • Annotated (easy) • Configured using annotations. • Any POJO can be an endpoint. • Endpoint and message handler are combined.
  • 89. Java EE 7 + Cordova Web Sockets: Session • javax.websocket.Session most important object. • Represents the connection to the client. • Nearest you will come to the “raw” socket connection. • Provides key methods for: • Sending messages back to the client • Closing the connection • Storing state • Obtaining information about the connection • Acquiring the principal • Retrieving a list of all connections to a client • Retrieving unique identifier representing the session • Acquire in onOpen or onMessage methods
  • 90. Java EE 7 + Cordova Web Sockets: RemoteEndpoint • RemoteEndpoint instance retrieved from the Session: • public RemoteEndpoint.Async getAsyncRemote() • public RemoteEndpoint.Basic getBasicRemote() • Methods on the RemoteEndpoint.Basic:
  • 91. Java EE 7 + Cordova Web Sockets: Message Handler • MessageHandler used for programmatic endpoints. • Two types of messages – Partial or Whole.
  • 92. Java EE 7 + Cordova Web Sockets: Programmatic Endpoint
  • 93. Java EE 7 + Cordova Web Sockets: Annotated Endpoint Synchronously sends a message back to the client.
  • 94. Java EE 7 + Cordova Java API for JSON • Defined in JSR 353 – required for Java EE 7 • Provides ability to parse, transform, and query JSON. • Used to create or read JSON. • Does NOT perform JSON <-> Object mapping • Useful for hand-coding JSON for JavaScript. • Can be used with JAX-RS instead of auto-JAXB JSON production • APIs: • Object Model API (like DOM) • Streaming API (like SAX)
  • 95. Java EE 7 + Cordova Java API for JSON • WebSocket connection processes many types of messages. AbstractMessage ChatMessage TrackingMessage RaceMessage
  • 96. Java EE 7 + Cordova Java API for JSON Decoders/encoders Message Object
  • 97. Java EE 7 + Cordova Encoding JSON
  • 98. Java EE 7 + Cordova Decoding JSON
  • 99. Java EE 7 + Cordova Decoding JSON • WebSocket implementation will check with each decoder until it finds one that can decode the message. • Minimize parsing in the willDecode or cache for the decode method. • Exceptions processing messages can wreak havoc.
  • 100. Java EE 7 + Cordova Web Sockets and Java EE • WebSockets can be Singleton Bean or a Stateful Session Bean. • With Stateful Session Bean you can use extended persistence context! @PersistenceContext(type=PersistenceContextType.EXTENDED) private EntityManager em; • Annotate OnClose/OnError with @Remove to release the stateful bean. • Limitations with stateful beans: • Cannot receive CDI events. • WebSocket Session can be accessed from other threads to send messages to the client.
  • 101. Java EE 7 + Cordova Web Sockets (generically) • No compression supported by default! • Binary data is transmitted using Base64 encoded. • Don’t use WebSockets on the main login/landing page. • ws: can be sniffed as easily and packets injected. • Each message can take upwards of 2kb header – much smaller than issuing a RESTful service call. • WebSocket connection limit is different than the HTTP connection limit. • User can open an unlimited number of connections to a single server.
  • 103. JQueryMobile Overview • JavaScript framework is needed for mobile development. • Mobile UIs are different. • Touch based • Certain UI conventions. • JQuery Mobile • Optimized for mobile devices • Themeable • 12 Kb compressed • Accessibility support • JQuery Mobile requires JQuery
  • 104. JQueryMobile Configuration • Use NetBeans to install JQuery and JQuery Mobile. • Don’t use CDN – all content must be packaged with the application.
  • 106. JQueryMobile Navigation • Changing to another page: • Processing a page before rendering:
  • 108. Security Overview • Apache Cordova App != Webapp • No HTTP session • Different usage pattern • Apache Cordova App consumes Java EE services • Users do not expect to authenticate on each launch • Do you log into email? • Password should never be stored • Phones are lost/stolen regularly • Obscurity isn’t security • Many users re-use password
  • 109. Security User Interaction Timeline Cordova App Java EE Server Retrieve account info Retrieve race info Join race Update account info View results 10 sec 25 min User quits and motors out of harbor Checks email User goes racing… 2 hours 3 hours Celebratory beer
  • 110. Security Java EE Security Goal is to use Java EE security on the server side: JAX-RS Endpoint EJBs (roles)
  • 111. Security Typical Java EE Configuration Won’t Work!
  • 113. Security Token Authentication/Authorization • Token based security (generated UUID) • User authenticates once using username/password • HTTP authentication performed using POST • Server generates a token (UUID) which client stores • Client submits token with each request (HTTP Header) • If token isn’t valid, user is forced to re-authenticate • Token authentication is performed before web service invocation. • Remember: • Servers can log HTTP requests – don’t include token in URL.
  • 114. Security Token Verification via Filter Bad idea!
  • 115. Security Token Verification via Filter Drawbacks: • Authentication performed on each request • Client must cache credentials and resubmit each time • Container repeatedly checks the database Alternate approach – authentication module (JASPIC) • Java Authentication API for Containers • Developed under JSR 196 • Operates on messages (think web requests) • Standardizes the authentication module development • Authentication ultimately performed via ServerAuthModule.
  • 116. Security Server Authentication Module • JASPIC puzzle pieces • ServletContextListener – initial registration of AuthConfigProvider • AuthConfigProvider • ServerAuthConfig • ServerAuthContext • ServerAuthModule  does the actual authentication work
  • 118. Security JASPIC Pieces Produced by the AuthConfigProviderImpl This then produces…
  • 119. Security JASPIC Pieces Almost to the module that does the work!
  • 120. Security JASPIC Pieces ServerAuthModule Implementation What is this code doing? 1) Specifying we are interested in HTTP messages 2) Looking up our own EJB that performs authentication
  • 121. Security JASPIC Pieces WebSocket Handling Setup Principals…
  • 122. Security Authorize Bean Token is cached!
  • 123. Security Authentication Process JAX-RS Endpoint AuthorizeBea n EJB Auth Module Race EJB /join/race Check token Invoke Service join Java EE Security
  • 125. Testing Overview • Testing must be done on both JavaScript and Java EE code. • Use Arquillian to test Java EE code • Runs the container and unit tests within the container • Use JAX-RS and WebSocket client libraries to test • Use JavaScript testing framework (many) to test APIs. • Use Karma to start web server. http://karma-runner.github.io • Use Jasmine to actually implement unit tests http://jasmine.github.io
  • 126. Testing Karma & Jasmine • Install Karma npm install karma • Install launcher (Karma) and unit test framework (Jasmine): • npm install karma-chrome-launcher --save-dev • npm install karma-jasmine --save-dev • Configure NetBeans to use Karma • Specify Karma installation directory (in project) • Create Karma configuration file • Write tests
  • 128. Summary App Store Distribution Store Owner Platform Cost AppStore Apple iOS $99/year Android Market Google Android $20 AppWorld RIM BlackBerry BlackBerry Free Amazon AppStore Amazon Android $99/year Marketplace Microsoft Windows $99/year
  • 129. Summary Best Practices • REST vs. WebSocket • REST for the most part, WebSocket only for full-duplex, bidirectional • REST • Requests should be granular – not fine grained • JSON vs. XML • JSON hands down • Binary data an option. • Storing state • Mostly on the client, synchronize/persist on the server • API design • Versioning! • Coarse grained, stateless, general purpose • Security • TLS, federated (OAuth), avoid sensitive data on client
  • 130. Summary • Apache Cordova/PhoneGap provide true standards based cross-platform mobile development. • Java EE 7 fundamentally simplifies backend mobile development. • Java EE well positioned as a mobile backend, especially with JAX-RS and the Java API for WebSocket • You can use our demo code as a starting point • There are some best practices to be aware of • Most importantly, have fun!
  • 131. Summary Resources • Java EE • http://oracle.com/javaee • Java EE Tutorial • http://docs.oracle.com/javaee/7/tutorial/doc/home.htm • Cordova / NetBeans Tutorial • https://netbeans.org/kb/docs/webclient/cordova-gettingstarted. html • Java EE 7 Containers • GlassFish 4 (https://glassfish.java.net/) • WildFly 8 (http://www.wildfly.org/) aka JBoss • Reference Implementation • http://glassfish.org • http://java.net/projects/tyrus • http://jersey.java.net
  • 132. Summary References • Email contact: • [email protected] • [email protected] • Twitter: @ctjava • Other Session: • JavaFX Versus HTML5 - CON3258 9/30/14 (Tuesday) 5:30 PM - Hilton - Plaza A • 50 EJB 3 Best Practices in 50 Minutes - CON1947 • Books:

Editor's Notes

  • #111: This is what we want to happen on the serverside…