132
Hybrid Mobile Development with Apache Cordova and Java EE 7 Ryan Cuprak, Dassault Systemès Michael Finocchiaro, Dassault Systemès

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

Embed Size (px)

DESCRIPTION

Java EE 7 provides a strong foundation for developing the back end for your HTML5 mobile applications. This heavily code-driven session shows you how you can effectively utilize Java EE 7 as a back end for your Apache Cordova mobile applications. The session demonstrates Java EE 7 technologies such as JAX-RS 2.0, WebSocket, JSON-P, CDI, and Bean Validation. It provides an overview of the basics of Apache Cordova as well as the tooling support added in NetBeans 8. The session also demonstrates an integrated approach to rapidly developing HTML5 mobile applications with Java EE 7 and NetBeans and concludes with best practices and pitfalls.

Citation preview

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

Hybrid Mobile Development with Apache Cordova and Java EE 7Ryan Cuprak, Dassault SystemèsMichael Finocchiaro, Dassault Systemès

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

Who wants to be the next AppStore billionaire?

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

Exponential Growth – particularly in China

http://www.statista.com/topics/1416/smartphone-market-in-china/

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

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!

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

Demo Application

• Mobile• Apache Cordova

• Infrastructure• Node.js

• User interface• JQuery Mobile

• Android dev tools• iOS dev tools

Overview

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

Demo Application

Sailboat Racing

Start/Finish

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

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

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

Demo Application

• Broadcast race course• Boat registration• Time check and start notification• Boat tracking• Race announcements• Results• Weather information

Functional Requirements

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

Demo Application

High Level Architecture

Interface

Application

Entities

Infrastructure

Apache Cordova

JAX-RS WebSocket

EJB

JPA Entities

JMS CDI

LEVERAGES NEARLY EVERY JavaEE FEATURE!

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

Demo Application

HTML5 SPA

Postgresql Database

Java EE 7 ServerApp

NOAAWeather/Tides

HTML5 SPA

HTML5 SPA

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

Demo Application

Data Model

Non-trivial data model!Over 16 Tables!

Multiple relations!

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

Available on GitHub

https://github.com/rcuprak/n34sailor

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

Demo Application

N34 Sailor

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

Demo Application

• Resource management• Object pooling• Concurrency• Database connection

• Transactions• Security• Scalability• Architecture• Rich feature set

What Java EE?

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

Demo Application

Why Java EE?

Great for scaling up And scaling down!

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

Mobile Overview

1Q8:45

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

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

Page 18: Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 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

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

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…

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

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

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

Mobile Overview

Native HTML5 vs. Web Apps

HTTP Session

JSF/JSP/Facelets

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

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

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

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…

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

Mobile Overview

Secha Architect

-Forces good MVC practices-Development similar to that in xCode, Android Studio-Costs $400 for a license

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

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

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

Tooling

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

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

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

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?

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

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!

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

Tooling

iOS Setup

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

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

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

Tooling

NodeJS

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

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

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

Tooling

Install NetBeans Connector (chrome.google.com)

NetBeans <-> Chrome Integration

NetBeans enables you to debug in Chrome

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

Tooling

Configure SDKs NetBeans

This is why you need the Apple developer license in order to run on a physical device!

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

Tooling

• Cordova is an HTML Project• Start with Cordova Project• Start with HTML5 and add Cordova

Creating Cordova Project

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

Demo

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

Apache Cordova

2Q9:00

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

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

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

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!

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

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

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

Apache Cordova

Project Creation in NetBeans

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

Apache Cordova

Platform Specific Directories

Web assets go here: html files, js files, etc

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

Apache Cordova

Index.html

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

Apache Cordova

Index.js

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

Apache Cordova

config.xml

Based on W3C Packaged Web Apps (Widgets)http://www.w3.org/TR/widgets/

Danger!! – cross site script (XSS)

exploit risk!

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

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

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

Run Target

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

Apache Cordova

Plugin: Network Status

VERY EASY TO ACCESSCORE SMARTPHONE

FEATURES

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

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!

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

Apache Cordova

Plugin: Network Type

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

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

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

Apache Cordova

Testing in Chrome != Testing on device

http://caniuse.com

Ouch!

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

Apache Cordova

Enabling CORS: JAX-RS 2.0 Interceptor

Chrome will now allow you to test your HTML5 app.

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

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

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

Apache Cordova

Plugin: Camera

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

Apache Cordova

Uploading Pictures via JAX-RS 2.0

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

Apache Cordova

Handling Camera Picture Upload

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

Apache Cordova

JAX-RS needs additional configuration to handle file uploads.Configuration specified in web.xml.

JAX-RS Configuration for Large Uploads

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

Apache Cordova

Splash Screens

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

Java EE 7 & Apache Cordova

+

HALFTIME!9:15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Java EE 7 + Cordova

Relating Java EE 7 to Mobile

JAX-RSJava API forWebSocket

Java API forJSONJAXB

Mobile Device (running Cordova)

POJO <-> JSON

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

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

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

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

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

Java EE 7 + Cordova

REST Example with JAX-RS

HTTP POST to http://<server>/n34/race/join/<id>/<class>

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

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

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

Java EE 7 + Cordova

REST in Cordova App + JQuery

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

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

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

Java EE 7 + Cordova

Constraint Constraint

@AssertFalse @Min

@AssertTrue @NotNull

@DecimalMax @Null

@DecimalMin @Past

@Digits @Pattern

@Future @Size

@Max

Bean Validation Annotations

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

Custom Validation

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

Java EE 7 + Cordova

Be careful when returning POJOs!

JAX-RS Gotchas

Oops!

Use either:• DTO – Data Transfer Object• @XmlTransient

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

Java EE 7 + Cordova

Compressing JSON Responses

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

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

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

Java EE 7 + Cordova

Web Sockets – Annotated Endpoint

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

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

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

Java EE 7 + Cordova

Web Socket in JavaScript

Creating WebSocket in JavaScript:

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

Java EE 7 + Cordova

Sending JSON via WebSockets3Q

9:30

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

Java EE 7 + Cordova

Server Load: Web Sockets vs. REST

Java EE 7 Server

Java EE 7 Server

REST

WebSockets

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

Java EE 7 + Cordova

HTTP Handshake

HTTP Handshake Request

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

Java EE 7 + Cordova

HTTP Handshake Response

HTTP Handshake Response

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

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

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

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

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

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

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

Java EE 7 + Cordova

• MessageHandler used for programmatic endpoints.• Two types of messages – Partial or Whole.

Web Sockets: Message Handler

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

Java EE 7 + Cordova

Web Sockets: Programmatic Endpoint

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

Java EE 7 + Cordova

Web Sockets: Annotated Endpoint

Synchronously sends a message back to the client.

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

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

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

Java EE 7 + Cordova

• WebSocket connection processes many types of messages.

Java API for JSON

AbstractMessage

ChatMessage TrackingMessage RaceMessage

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

Java EE 7 + Cordova

Java API for JSON

Message Object

Decoders/encoders

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

Java EE 7 + Cordova

Encoding JSON

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

Java EE 7 + Cordova

Decoding JSON

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

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

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

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

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

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)

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

JQuery Mobile

4th Q9:45

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

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

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

JQuery Mobile

• Use NetBeans to install JQuery and JQuery Mobile.• Don’t use CDN – all content must be packaged with the

application.

Configuration

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

JQuery Mobile

Quick Introduction

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

JQuery Mobile

• Changing to another page:

• Processing a page before rendering:

Navigation

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

Security

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

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

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

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

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

Security

Goal is to use Java EE security on the server side:

Java EE Security

JAX-RS Endpoint

EJBs(roles)

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

Security

Typical Java EE Configuration

Won’t Work!

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

Security

Basic Authentication

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

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

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

Security

Token Verification via Filter

Bad idea!

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

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

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

Security

• JASPIC puzzle pieces• ServletContextListener – initial registration of AuthConfigProvider• AuthConfigProvider• ServerAuthConfig• ServerAuthContext• ServerAuthModule does the actual authentication work

Server Authentication Module

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

Security

JASPIC Pieces

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

Security

JASPIC Pieces

Produced by the AuthConfigProviderImpl

This then produces…

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

Security

JASPIC Pieces

Almost to the module that does the work!

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

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

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

Security

JASPIC Pieces

WebSocket Handling

Setup Principals…

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

Security

Authorize Bean

Token is cached!

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

Security

Authentication Process

JAX-RS Endpoint

AuthorizeBean EJB

Auth Module Race EJB

/join/race

Check token

Invoke Service

join

Java EE Security

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

Testing

OT10:00

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

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

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

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

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

Deployment

COMING IN JavaOne 2015…

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

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

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

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

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

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!

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

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

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

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