Hybrid Mobile Development with Apache Cordova and Java EE 7 Ryan Cuprak, Dassault Systemès Michael Finocchiaro, Dassault Systemès
Dec 17, 2015
Hybrid Mobile Development with Apache Cordova and Java EE 7Ryan Cuprak, Dassault SystemèsMichael Finocchiaro, Dassault Systemès
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 DassaultSystèmes CATIA software!
Demo Application
• Mobile• Apache Cordova
• Infrastructure• Node.js
• User interface• JQuery Mobile
• Android dev tools• iOS dev tools
Overview
Demo Application
• 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.
Racing Overview
Demo Application
• Broadcast race course• Boat registration• Time check and start notification• Boat tracking• Race announcements• Results• Weather information
Functional Requirements
Demo Application
High Level Architecture
Interface
Application
Entities
Infrastructure
Apache Cordova
JAX-RS WebSocket
EJB
JPA Entities
JMS CDI
LEVERAGES NEARLY EVERY JavaEE FEATURE!
Demo Application
HTML5 SPA
Postgresql Database
Java EE 7 ServerApp
NOAAWeather/Tides
HTML5 SPA
HTML5 SPA
Demo Application
• Resource management• Object pooling• Concurrency• Database connection
• Transactions• Security• Scalability• Architecture• Rich feature set
What Java EE?
Mobile Platforms
• 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.
Status 2014
Mobile Overview
• 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
Development Models
Mobile Overview
• 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.
Development Models…
Mobile Overview
• 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.
Native HTML5 Apps
Immersive
App logicIn JavaScript
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>
info.html<html><body><div id=“page”>
Info</div></body></html>
<a href=“info.html”>Info </a>
Info
Mobile Overview
Framework License
jQuery Mobilehttp://jquerymobile.com
MIT
Sencha Touchhttp://sencha.com
Commercial(Free) & Open Source (GPLv3)
Intel App Frameworkhttp://app-framework-software.intel.com
MIT
Ionichttp://ionicframework.com
MIT
M-Projecthttp://www.the-m-project.org
MIT
Kendo UIhttp://www.telerik.com
Commercial
Twitter Bootstrap 3http://getbootstrap.com
MIT
Mobile Frameworks
Advice: Don’t reinvent the wheel!
Also Angular can be used…
Mobile Overview
Secha Architect
-Forces good MVC practices-Development similar to that in xCode, Android Studio-Costs $400 for a license
Mobile Overview
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 nativeNetBeans will have trouble with Sencha files.
Sencha Touch Setup & Cordova Integration
Sencha Touch libaries are freeTight Cordova integration
Tooling
• Tooling is very important:Cordova, Java EE, App Servers, Phones, SimulatorsUnit 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
Overview
Tooling
• 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)
What do we need?
Tooling
• iOS (xCode)Apple App Store – search for XCode
• Android (Android Studio)https://developer.android.com/tools/index.html
• Windows Phonehttp://dev.windows.com/en-us/develop/downloads
• Tizenhttps://developer.tizen.org/downloads/tizen-sdk
• BlackBerryhttp://developer.blackberry.com
Platform Tools and SDKs
Note: NetBeans has integration with Android/iOS tooling.Thanks to PhoneGap, we can also build in the cloud!
Tooling
• 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.
NodeJS
Only hijacking the package manager - npm
Tooling
• 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
Apache Cordova
Tooling
Install NetBeans Connector (chrome.google.com)
NetBeans <-> Chrome Integration
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
• Cordova is an HTML Project• Start with Cordova Project• Start with HTML5 and add Cordova
Creating Cordova Project
Apache Cordova
• 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.
Overview
Apache Cordova
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
Common Plugins
Supports custom plugins!
Apache Cordova
• 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
Phone Quirks
Apache Cordova
config.xml
Based on W3C Packaged Web Apps (Widgets)http://www.w3.org/TR/widgets/
Danger!! – cross site script (XSS)
exploit risk!
Apache Cordova
• 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”/>
White Listing
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
• 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!
Development Best Practices
Apache Cordova
Enabling CORS: JAX-RS 2.0 Interceptor
Chrome will now allow you to test your HTML5 app.
Apache Cordova
• 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.
Plugin: Camera
Apache Cordova
JAX-RS needs additional configuration to handle file uploads.Configuration specified in web.xml.
JAX-RS Configuration for Large Uploads
Java EE 7 + Cordova
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
Overview
Java EE 7 + Cordova
Device/Server Connectivity
Java EE 7 App Server
REST
Web Sockets
Request/Response
Bidirectional
Restful Web Service
Web Socket Endpoint
JavaScript/HTML5
Java EE 7 + Cordova
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.
Device/Server Connectivity
Java EE 7 + Cordova
• 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:
Web Sockets
Java EE 7 + Cordova
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
Exchanging Data using JSON
Java EE 7 + Cordova
• 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 Availability
Coming in 2015
Java EE 7 + Cordova
Technology Layers
EJB 3
Servlet
CDI
JPA
JAX-RS
Bean Validation
Java API forWebSocket
Java API forJSON
JMS JTA
Mobile Device (running Cordova)
JAXB
JCA
Java EE 7 + Cordova
Relating Java EE 7 to Mobile
JAX-RSJava API forWebSocket
Java API forJSONJAXB
Mobile Device (running Cordova)
POJO <-> JSON
Java EE 7 + Cordova
• 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.
Connectivity Technologies
JAX-RS 2.0
Java API forWebSocket
Java EE 7 + Cordova
• 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.
REST
Java EE 7 + Cordova
REST Example with JAX-RS
HTTP POST to http://<server>/n34/race/join/<id>/<class>
Java EE 7 + Cordova
• 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
REST Parameter Annotations
Java EE 7 + Cordova
• 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
JSON to POJOs
Java EE 7 + Cordova
Constraint Constraint
@AssertFalse @Min
@AssertTrue @NotNull
@DecimalMax @Null
@DecimalMin @Past
@Digits @Pattern
@Future @Size
@Max
Bean Validation Annotations
Java EE 7 + Cordova
Be careful when returning POJOs!
JAX-RS Gotchas
Oops!
Use either:• DTO – Data Transfer Object• @XmlTransient
Java EE 7 + Cordova
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
Web Sockets
Java EE 7 + Cordova
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
Web Sockets: onMessage Parameters
Java EE 7 + Cordova
Server Load: Web Sockets vs. REST
Java EE 7 Server
Java EE 7 Server
REST
WebSockets
Java EE 7 + Cordova
• 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.
Two Types of Web Socket Endpoints
Java EE 7 + Cordova
• 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
Web Sockets: Session
Java EE 7 + Cordova
• RemoteEndpoint instance retrieved from the Session:• public RemoteEndpoint.Async getAsyncRemote()• public RemoteEndpoint.Basic getBasicRemote()
• Methods on the RemoteEndpoint.Basic:
Web Sockets: RemoteEndpoint
Java EE 7 + Cordova
• MessageHandler used for programmatic endpoints.• Two types of messages – Partial or Whole.
Web Sockets: Message Handler
Java EE 7 + Cordova
Web Sockets: Annotated Endpoint
Synchronously sends a message back to the client.
Java EE 7 + Cordova
• 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 API for JSON
Java EE 7 + Cordova
• WebSocket connection processes many types of messages.
Java API for JSON
AbstractMessage
ChatMessage TrackingMessage RaceMessage
Java EE 7 + Cordova
• 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.
Decoding JSON
Java EE 7 + Cordova
• 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.
Web Sockets and Java EE
Java EE 7 + Cordova
• 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.
Web Sockets (generically)
JQuery Mobile
• 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
Overview
JQuery Mobile
• Use NetBeans to install JQuery and JQuery Mobile.• Don’t use CDN – all content must be packaged with the
application.
Configuration
Security
• 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
Overview
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 harborChecks email
User goes racing…
2 hours
3 hours
Celebratory beer
Security
Goal is to use Java EE security on the server side:
Java EE Security
JAX-RS Endpoint
EJBs(roles)
Security
• 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.
Token Authentication/Authorization
Security
Drawbacks:• Authentication performed on each request• Client must cache credentials and resubmit each time• Container repeatedly checks the databaseAlternate 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.
Token Verification via Filter
Security
• JASPIC puzzle pieces• ServletContextListener – initial registration of AuthConfigProvider• AuthConfigProvider• ServerAuthConfig• ServerAuthContext• ServerAuthModule does the actual authentication work
Server Authentication Module
Security
JASPIC PiecesServerAuthModule Implementation
What is this code doing?1) Specifying we are interested in HTTP
messages2) Looking up our own EJB that performs
authentication
Security
Authentication Process
JAX-RS Endpoint
AuthorizeBean EJB
Auth Module Race EJB
/join/race
Check token
Invoke Service
join
Java EE Security
Testing
• 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
Overview
Testing
• Install Karmanpm 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
Karma & Jasmine
Summary
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
App Store Distribution
Summary
• 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
Best Practices
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
• 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
Resources
Summary
• 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:
References