SlideShare a Scribd company logo
1 of 96
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?
Agenda
• Demo Application
• Mobile Overview
• Tooling
• Apache Cordova
• Java EE 7 + Cordova
• jQuery Mobile
• Security
• Deployment
• Summary
• Q&A
https://github.com/rcuprak/n34sailor
Both designed and engineered using Dassault
Systèmes CATIA software!
DemoApplication
Sailboat Racing
Start/Finish
DemoApplication
• Broadcast race course
• Boat registration
• Time check and start notification
• Boat tracking
• Race announcements
• Results
• Weather information
Functional Requirements
DemoApplication
• Mobile
• Apache Cordova
• User interface
• JQuery Mobile
• Tooling
• NetBeans
• NodeJS
• Server
• GlassFish 4.1 (EE 7)
• Android dev tools
• iOS dev tools
Overview
DemoApplication
• What is Apache Cordova?
• Open source mobile development framework.
• Applications implemented using HTML5, CSS3, and JavaScript.
• Applications bundled and wrapped in a native shell.
• APIs for accessing device features.
• Benefits:
• Write once, run everywhere.
• Leverage familiar frameworks and tools (jQuery, Angular, etc.)
• Rapidly develop applications
• Low barrier to entry… no massive learning curve
Why choose Apache Cordova?
DemoApplication
• Standard set of APIs
• Multiple vendors implementations
• Longevity, continuity, and backwards compatibility.
• Technical reasons:
• Support for current technologies, REST, WebSockets
• Resource management: object pooling, thread management,
threading,
• Transactions
• Security
• Scalability
• Testability
• Messaging
• Extended features: clustering, distributed caches
Why choose Java EE?
DemoApplicationArchitecture
CORDOVA
HTML5
Java EE 7 Server
App
Data Services
NOAA
Database
DemoApplication
High Level Architecture
Interface
Application
Entities
Infrastructure
Apache
Cordova
JAX-RS Web Sockets
EJB
JPA Entities
JMS
CDI
Communication
jQuery Mobile
DemoApplication
Data Model
DemoApplication
N34 Sailor
Mobile Overview
MobilePlatforms
• 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 2015
MobileOverview
• 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
MobileOverview
• 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.
Hybrid Applications
MobileOverview
Native HTML5 vs. Web Apps
HTTP Session
JSF/JSP/Facelets
MobileOverview
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
MobileOverview
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
MobileOverview
Secha Architect
Tooling
Tooling
• Platform SDKs
• Certificates to test on devices ($$)
• Ant (ant.apache.org)
• NodeJS (nodejs.org)
• Apache Cordova
• Java 8 (java.oracle.com)
• NetBeans 8.0.2 (netbeans.org)
What might we want to install?
• Chrome (www.google.com/chrome)
• Maven (maven.apache.org)
• Karma (karma-runner.github.io)
• Jasmine (jasmine.github.io
What do we need?
Tooling
• Robust Java EE 7 support:
• Code completion/editor support
• Project templates
• App server integration
• Fully integrated Apache Cordova:
• Core feature – no plugin required.
• Project templates
• Wraps Cordova
• Support for iOS and Android
• Debug connected devices
• Powerful JavaScript editor/debugger
• JavaScript libraries and unit testing
• Grunt build support
Why NetBeans 8
Tooling
Tooling
• 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
Platform Tools and SDKs
Note: NetBeans has integration with Android/iOS tooling.
Thanks to PhoneGap, we can also build in the cloud!
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
Demo– ProjectCreation
Apache Cordova
ApacheCordova
• 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
ApacheCordova
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!
ApacheCordova
• 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
Quirks
ApacheCordova
Project Layout
ApacheCordova
Index.html
ApacheCordova
Index.js
ApacheCordova
config.xml
Based on W3C Packaged Web Apps (Widgets)
http://www.w3.org/TR/widgets/
Danger!! – cross
site script (XSS)
exploit risk!
ApacheCordova
• 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
ApacheCordova
Plugin: Network Status
ApacheCordova
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!
ApacheCordova
Plugin: Network Type
ApacheCordova
Plugin: Camera
ApacheCordova
Uploading Pictures via AJAX
ApacheCordova
• Start with HTML5 project in NetBeans without Cordova.
• Test in Simulator’s browser.
• Profile code using Chrome Profiler
• Test with Chrome
• Write JavaScript unit tests
• Isolate networking code
• Don’t assume network access/availability
• Never store confidential information on the phone!
Development Best Practices
ApacheCordova
Testing in Chrome != Testing on device
http://caniuse.com
Ouch!
Java EE 7 & Apache Cordova
Java EE7 + Cordova
Device/Server Connectivity
Java EE 7
App Server
REST
Web Sockets
Request/Response
Bidirectional
Restful Web Service
Web Socket Endpoint
JavaScript/HTML5
Java EE7 + 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 Refresher
Java EE7 + 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 for
WebSocket
Java EE7 + 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 EE7 + Cordova
Relating Java EE 7 to Mobile
JAX-RS
Java API for
WebSocket
Java API for
JSON
JAXB*
Mobile Device (running Cordova)
POJO <-> JSON
Java EE7 + 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 EE7 + Cordova
REST Example with JAX-RS
HTTP POST to http://<server>/n34/race/join/<id>/<class>
Java EE7 + Cordova
REST in Cordova App + jQuery
ApacheCordova
Enabling CORS: JAX-RS 2.0 Interceptor
Chrome will now allow you to test your HTML5 app.
Java EE7 + 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 EE7 + Cordova
Be careful when returning POJOs!
JAX-RS Gotchas
Oops!
Use either:
• DTO – Data Transfer Object
• @XmlTransient
Java EE7 + Cordova
Compressing RESTful Responses
Java EE7 + 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 EE7 + Cordova
Web Socket in JavaScript
Creating WebSocket in JavaScript:
Java EE7 + Cordova
Sending JSON via WebSockets
Java EE7 + 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 EE7 + 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 EE7 + Cordova
Web Sockets: Programmatic Endpoint
Java EE7 + Cordova
Web Sockets – Annotated Endpoint
Java EE7 + Cordova
Sending a message
Synchronously sends a message back to the client.
Java EE7 + 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 EE7 + Cordova
• Defined in JSR 353 – included with 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 EE7 + Cordova
• WebSocket connection processes many types of messages.
Java API for JSON
AbstractMessage
ChatMessage TrackingMessage RaceMessage
Java EE7 + Cordova
Java API for JSON
Message Object
Decoders/encoders
Java EE7 + Cordova
Encoding JSON
Java EE7 + Cordova
Decoding JSON
Java EE7 + 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 EE7 + 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)
Java EE7 + Cordova
Server Load: Web Sockets vs. REST
Java EE 7 Server
Java EE 7 Server
REST
WebSockets
jQuery Mobile
jQueryMobile
• UI Framework needed!
• 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
jQueryMobile
• Use NetBeans to install jQuery and jQuery Mobile.
• Don’t use CDN – all content must be packaged with the
application.
Configuration
jQueryMobile
Quick Introduction
jQueryMobile
• Changing to another page:
• Processing a page before rendering:
Navigation
Security
Security
• Apache Cordova App != mobile web application
• No HTTP session
• Users do not expect to authenticate on each launch!
• Do you log into email/twitter on each launch?
• 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 harbor
Checks 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
Typical Java EE Configuration
Won’t Work!
Security
Basic Authentication
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
Token Verification via Filter
Bad idea!
Security
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.
Token Verification via Filter
Security
• JASPIC puzzle piecesL
• ServletContextListener – initial registration of AuthConfigProvider
• AuthConfigProvider
• ServerAuthConfig
• ServerAuthContext
• ServerAuthModule  does the actual authentication work]
• Factory nightmare…
Server Authentication Module
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
Summary
• Apache Cordova simplifies cross-platform mobile
development.
• Java EE 7 provides a standardized server stack to enable
Apache Cordova development.
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
• Email contact:
rcuprak@gmail.com
• LinkedIn:
https://www.linkedin.com/pub/ryan-cuprak/0/12a/93
• Code:
https://github.com/rcuprak/n34sailor
• Twitter: @ctjava
• Books:
References

More Related Content

What's hot

FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...Vadym Kazulkin
 
Continuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWSContinuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWSAmazon Web Services
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With JestBen McCormick
 
The Dark Side of Single Page Applications
The Dark Side of Single Page ApplicationsThe Dark Side of Single Page Applications
The Dark Side of Single Page ApplicationsDor Kalev
 
Web a Quebec - JS Debugging
Web a Quebec - JS DebuggingWeb a Quebec - JS Debugging
Web a Quebec - JS DebuggingRami Sayar
 
Workshop Framework(J2EE/OSGi/RCP)
Workshop Framework(J2EE/OSGi/RCP)Workshop Framework(J2EE/OSGi/RCP)
Workshop Framework(J2EE/OSGi/RCP)Summer Lu
 
Alfresco DevCon 2019 Performance Tools of the Trade
Alfresco DevCon 2019   Performance Tools of the TradeAlfresco DevCon 2019   Performance Tools of the Trade
Alfresco DevCon 2019 Performance Tools of the TradeLuis Colorado
 
12-factor-jruby
12-factor-jruby12-factor-jruby
12-factor-jrubyJoe Kutner
 
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"Fwdays
 
Scala in the Wild
Scala in the WildScala in the Wild
Scala in the WildTomer Gabel
 
Automated Scaling of Microservice Stacks for JavaEE Applications
Automated Scaling of Microservice Stacks for JavaEE ApplicationsAutomated Scaling of Microservice Stacks for JavaEE Applications
Automated Scaling of Microservice Stacks for JavaEE ApplicationsJelastic Multi-Cloud PaaS
 
4 JVM Web Frameworks
4 JVM Web Frameworks4 JVM Web Frameworks
4 JVM Web FrameworksJoe Kutner
 
CT Software Developers Meetup: Using Docker and Vagrant Within A GitHub Pull ...
CT Software Developers Meetup: Using Docker and Vagrant Within A GitHub Pull ...CT Software Developers Meetup: Using Docker and Vagrant Within A GitHub Pull ...
CT Software Developers Meetup: Using Docker and Vagrant Within A GitHub Pull ...E. Camden Fisher
 
Write Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichWrite Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichMike North
 
KYSUC - Keep Your Schema Under Control
KYSUC - Keep Your Schema Under ControlKYSUC - Keep Your Schema Under Control
KYSUC - Keep Your Schema Under ControlCoimbra JUG
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 
An Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemAn Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemRami Sayar
 

What's hot (20)

FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
FaaS or not to FaaS. Visible and invisible benefits of the Serverless paradig...
 
Continuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWSContinuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWS
 
New AWS Services
New AWS ServicesNew AWS Services
New AWS Services
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With Jest
 
The Dark Side of Single Page Applications
The Dark Side of Single Page ApplicationsThe Dark Side of Single Page Applications
The Dark Side of Single Page Applications
 
Web a Quebec - JS Debugging
Web a Quebec - JS DebuggingWeb a Quebec - JS Debugging
Web a Quebec - JS Debugging
 
Workshop Framework(J2EE/OSGi/RCP)
Workshop Framework(J2EE/OSGi/RCP)Workshop Framework(J2EE/OSGi/RCP)
Workshop Framework(J2EE/OSGi/RCP)
 
Alfresco DevCon 2019 Performance Tools of the Trade
Alfresco DevCon 2019   Performance Tools of the TradeAlfresco DevCon 2019   Performance Tools of the Trade
Alfresco DevCon 2019 Performance Tools of the Trade
 
12-factor-jruby
12-factor-jruby12-factor-jruby
12-factor-jruby
 
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
 
Scala in the Wild
Scala in the WildScala in the Wild
Scala in the Wild
 
Automated Scaling of Microservice Stacks for JavaEE Applications
Automated Scaling of Microservice Stacks for JavaEE ApplicationsAutomated Scaling of Microservice Stacks for JavaEE Applications
Automated Scaling of Microservice Stacks for JavaEE Applications
 
4 JVM Web Frameworks
4 JVM Web Frameworks4 JVM Web Frameworks
4 JVM Web Frameworks
 
CT Software Developers Meetup: Using Docker and Vagrant Within A GitHub Pull ...
CT Software Developers Meetup: Using Docker and Vagrant Within A GitHub Pull ...CT Software Developers Meetup: Using Docker and Vagrant Within A GitHub Pull ...
CT Software Developers Meetup: Using Docker and Vagrant Within A GitHub Pull ...
 
Write Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichWrite Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js Munich
 
KYSUC - Keep Your Schema Under Control
KYSUC - Keep Your Schema Under ControlKYSUC - Keep Your Schema Under Control
KYSUC - Keep Your Schema Under Control
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
An Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemAn Intense Overview of the React Ecosystem
An Intense Overview of the React Ecosystem
 
SOA on Rails
SOA on RailsSOA on Rails
SOA on Rails
 
Apache Lucene for Java EE Developers
Apache Lucene for Java EE DevelopersApache Lucene for Java EE Developers
Apache Lucene for Java EE Developers
 

Viewers also liked

Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak
 
Top 50 java ee 7 best practices [con5669]
Top 50 java ee 7 best practices [con5669]Top 50 java ee 7 best practices [con5669]
Top 50 java ee 7 best practices [con5669]Ryan Cuprak
 
Containerless in the Cloud with AWS Lambda
Containerless in the Cloud with AWS LambdaContainerless in the Cloud with AWS Lambda
Containerless in the Cloud with AWS LambdaRyan Cuprak
 
Java EE 8 Update
Java EE 8 UpdateJava EE 8 Update
Java EE 8 UpdateRyan Cuprak
 
50 EJB 3 Best Practices in 50 Minutes - JavaOne 2014
50 EJB 3 Best Practices in 50 Minutes - JavaOne 201450 EJB 3 Best Practices in 50 Minutes - JavaOne 2014
50 EJB 3 Best Practices in 50 Minutes - JavaOne 2014Ryan Cuprak
 
Faster Java EE Builds with Gradle
Faster Java EE Builds with GradleFaster Java EE Builds with Gradle
Faster Java EE Builds with GradleRyan Cuprak
 
JavaOne 2013: Organizing Your Local Community
JavaOne 2013: Organizing Your Local CommunityJavaOne 2013: Organizing Your Local Community
JavaOne 2013: Organizing Your Local CommunityRyan Cuprak
 
Deploying 3 times a day without a downtime @ Rocket Tech Summit in Berlin
Deploying 3 times a day without a downtime @ Rocket Tech Summit in BerlinDeploying 3 times a day without a downtime @ Rocket Tech Summit in Berlin
Deploying 3 times a day without a downtime @ Rocket Tech Summit in BerlinAlessandro Nadalin
 
georchestra SDI: Project Status Report
georchestra SDI: Project Status Reportgeorchestra SDI: Project Status Report
georchestra SDI: Project Status ReportCamptocamp
 
Introduction to Docker - Learning containerization XP conference 2016
Introduction to Docker - Learning containerization  XP conference 2016Introduction to Docker - Learning containerization  XP conference 2016
Introduction to Docker - Learning containerization XP conference 2016XP Conference India
 
Using docker to develop NAS applications
Using docker to develop NAS applicationsUsing docker to develop NAS applications
Using docker to develop NAS applicationsTerry Chen
 
Docker for the Brave
Docker for the BraveDocker for the Brave
Docker for the BraveDavid Schmitz
 
Containers for sensor web services, applications and research @ Sensor Web Co...
Containers for sensor web services, applications and research @ Sensor Web Co...Containers for sensor web services, applications and research @ Sensor Web Co...
Containers for sensor web services, applications and research @ Sensor Web Co...Daniel Nüst
 
Docker Dhahran Nov 2016 meetup
Docker Dhahran Nov 2016 meetupDocker Dhahran Nov 2016 meetup
Docker Dhahran Nov 2016 meetupWalid Shaari
 
JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014Ryan Cuprak
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSGabriel Huecas
 
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)Ryan Cuprak
 
Building a private CI/CD pipeline with Java and Docker in the Cloud as presen...
Building a private CI/CD pipeline with Java and Docker in the Cloud as presen...Building a private CI/CD pipeline with Java and Docker in the Cloud as presen...
Building a private CI/CD pipeline with Java and Docker in the Cloud as presen...Baruch Sadogursky
 

Viewers also liked (20)

Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
 
Top 50 java ee 7 best practices [con5669]
Top 50 java ee 7 best practices [con5669]Top 50 java ee 7 best practices [con5669]
Top 50 java ee 7 best practices [con5669]
 
Containerless in the Cloud with AWS Lambda
Containerless in the Cloud with AWS LambdaContainerless in the Cloud with AWS Lambda
Containerless in the Cloud with AWS Lambda
 
Java EE 8 Update
Java EE 8 UpdateJava EE 8 Update
Java EE 8 Update
 
50 EJB 3 Best Practices in 50 Minutes - JavaOne 2014
50 EJB 3 Best Practices in 50 Minutes - JavaOne 201450 EJB 3 Best Practices in 50 Minutes - JavaOne 2014
50 EJB 3 Best Practices in 50 Minutes - JavaOne 2014
 
Faster Java EE Builds with Gradle
Faster Java EE Builds with GradleFaster Java EE Builds with Gradle
Faster Java EE Builds with Gradle
 
JavaOne 2013: Organizing Your Local Community
JavaOne 2013: Organizing Your Local CommunityJavaOne 2013: Organizing Your Local Community
JavaOne 2013: Organizing Your Local Community
 
moscmy2016: Extending Docker
moscmy2016: Extending Dockermoscmy2016: Extending Docker
moscmy2016: Extending Docker
 
Deploying 3 times a day without a downtime @ Rocket Tech Summit in Berlin
Deploying 3 times a day without a downtime @ Rocket Tech Summit in BerlinDeploying 3 times a day without a downtime @ Rocket Tech Summit in Berlin
Deploying 3 times a day without a downtime @ Rocket Tech Summit in Berlin
 
georchestra SDI: Project Status Report
georchestra SDI: Project Status Reportgeorchestra SDI: Project Status Report
georchestra SDI: Project Status Report
 
Introduction to Docker - Learning containerization XP conference 2016
Introduction to Docker - Learning containerization  XP conference 2016Introduction to Docker - Learning containerization  XP conference 2016
Introduction to Docker - Learning containerization XP conference 2016
 
Using docker to develop NAS applications
Using docker to develop NAS applicationsUsing docker to develop NAS applications
Using docker to develop NAS applications
 
Docker for the Brave
Docker for the BraveDocker for the Brave
Docker for the Brave
 
Containers for sensor web services, applications and research @ Sensor Web Co...
Containers for sensor web services, applications and research @ Sensor Web Co...Containers for sensor web services, applications and research @ Sensor Web Co...
Containers for sensor web services, applications and research @ Sensor Web Co...
 
Docker Dhahran Nov 2016 meetup
Docker Dhahran Nov 2016 meetupDocker Dhahran Nov 2016 meetup
Docker Dhahran Nov 2016 meetup
 
JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
 
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
 
Building a private CI/CD pipeline with Java and Docker in the Cloud as presen...
Building a private CI/CD pipeline with Java and Docker in the Cloud as presen...Building a private CI/CD pipeline with Java and Docker in the Cloud as presen...
Building a private CI/CD pipeline with Java and Docker in the Cloud as presen...
 
Docker introduction
Docker introductionDocker introduction
Docker introduction
 

Similar to Hybrid Mobile Development with Apache Cordova and

Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile ApplicationsRuwan Ranganath
 
Cross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceCross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceAll Things Open
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache CordovaIvano Malavolta
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicErmias Bayu
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to PhonegapAndrei Firoiu
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
Phonegap android
Phonegap androidPhonegap android
Phonegap androidumesh patil
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsJohn M. Wargo
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksSasha dos Santos
 
Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with IonicMaulik Bamania
 
Developing a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&CordovaDeveloping a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&CordovaDamir Beylkhanov
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkCihad Horuzoğlu
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioMizanur Sarker
 
Apache Cordova phonegap plugins for mobile app development
Apache Cordova phonegap plugins for mobile app developmentApache Cordova phonegap plugins for mobile app development
Apache Cordova phonegap plugins for mobile app developmentwebprogr.com
 
Hybrid application development
Hybrid application developmentHybrid application development
Hybrid application developmentEngin Hatay
 
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Hazem Saleh
 

Similar to Hybrid Mobile Development with Apache Cordova and (20)

Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile Applications
 
Cross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceCross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open Source
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to Phonegap
 
Apache Cordova 4.x
Apache Cordova 4.xApache Cordova 4.x
Apache Cordova 4.x
 
Cross-Platform Development
Cross-Platform DevelopmentCross-Platform Development
Cross-Platform Development
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Phonegap android
Phonegap androidPhonegap android
Phonegap android
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile Apps
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
 
Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with Ionic
 
Developing a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&CordovaDeveloping a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&Cordova
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual Studio
 
Building mobile apps using meteorJS
Building mobile apps using meteorJSBuilding mobile apps using meteorJS
Building mobile apps using meteorJS
 
Apache Cordova phonegap plugins for mobile app development
Apache Cordova phonegap plugins for mobile app developmentApache Cordova phonegap plugins for mobile app development
Apache Cordova phonegap plugins for mobile app development
 
Hybrid application development
Hybrid application developmentHybrid application development
Hybrid application development
 
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
 

More from Ryan Cuprak

Jakarta EE Test Strategies (2022)
Jakarta EE Test Strategies (2022)Jakarta EE Test Strategies (2022)
Jakarta EE Test Strategies (2022)Ryan Cuprak
 
DIY Home Weather Station (Devoxx Poland 2023)
DIY Home Weather Station (Devoxx Poland 2023)DIY Home Weather Station (Devoxx Poland 2023)
DIY Home Weather Station (Devoxx Poland 2023)Ryan Cuprak
 
Why jakarta ee matters (ConFoo 2021)
Why jakarta ee matters (ConFoo 2021)Why jakarta ee matters (ConFoo 2021)
Why jakarta ee matters (ConFoo 2021)Ryan Cuprak
 
Polygot Java EE on the GraalVM
Polygot Java EE on the GraalVMPolygot Java EE on the GraalVM
Polygot Java EE on the GraalVMRyan Cuprak
 
Exploring Java Heap Dumps (Oracle Code One 2018)
Exploring Java Heap Dumps (Oracle Code One 2018)Exploring Java Heap Dumps (Oracle Code One 2018)
Exploring Java Heap Dumps (Oracle Code One 2018)Ryan Cuprak
 
Node.js Development with Apache NetBeans
Node.js Development with Apache NetBeansNode.js Development with Apache NetBeans
Node.js Development with Apache NetBeansRyan Cuprak
 
Preparing for java 9 modules upload
Preparing for java 9 modules uploadPreparing for java 9 modules upload
Preparing for java 9 modules uploadRyan Cuprak
 
Faster Java EE Builds with Gradle
Faster Java EE Builds with GradleFaster Java EE Builds with Gradle
Faster Java EE Builds with GradleRyan Cuprak
 
Batching and Java EE (jdk.io)
Batching and Java EE (jdk.io)Batching and Java EE (jdk.io)
Batching and Java EE (jdk.io)Ryan Cuprak
 
Faster java ee builds with gradle [con4921]
Faster java ee builds with gradle [con4921]Faster java ee builds with gradle [con4921]
Faster java ee builds with gradle [con4921]Ryan Cuprak
 
Jms deep dive [con4864]
Jms deep dive [con4864]Jms deep dive [con4864]
Jms deep dive [con4864]Ryan Cuprak
 

More from Ryan Cuprak (12)

Jakarta EE Test Strategies (2022)
Jakarta EE Test Strategies (2022)Jakarta EE Test Strategies (2022)
Jakarta EE Test Strategies (2022)
 
DIY Home Weather Station (Devoxx Poland 2023)
DIY Home Weather Station (Devoxx Poland 2023)DIY Home Weather Station (Devoxx Poland 2023)
DIY Home Weather Station (Devoxx Poland 2023)
 
Why jakarta ee matters (ConFoo 2021)
Why jakarta ee matters (ConFoo 2021)Why jakarta ee matters (ConFoo 2021)
Why jakarta ee matters (ConFoo 2021)
 
Polygot Java EE on the GraalVM
Polygot Java EE on the GraalVMPolygot Java EE on the GraalVM
Polygot Java EE on the GraalVM
 
Exploring Java Heap Dumps (Oracle Code One 2018)
Exploring Java Heap Dumps (Oracle Code One 2018)Exploring Java Heap Dumps (Oracle Code One 2018)
Exploring Java Heap Dumps (Oracle Code One 2018)
 
Node.js Development with Apache NetBeans
Node.js Development with Apache NetBeansNode.js Development with Apache NetBeans
Node.js Development with Apache NetBeans
 
Preparing for java 9 modules upload
Preparing for java 9 modules uploadPreparing for java 9 modules upload
Preparing for java 9 modules upload
 
Faster Java EE Builds with Gradle
Faster Java EE Builds with GradleFaster Java EE Builds with Gradle
Faster Java EE Builds with Gradle
 
Java EE 8
Java EE 8Java EE 8
Java EE 8
 
Batching and Java EE (jdk.io)
Batching and Java EE (jdk.io)Batching and Java EE (jdk.io)
Batching and Java EE (jdk.io)
 
Faster java ee builds with gradle [con4921]
Faster java ee builds with gradle [con4921]Faster java ee builds with gradle [con4921]
Faster java ee builds with gradle [con4921]
 
Jms deep dive [con4864]
Jms deep dive [con4864]Jms deep dive [con4864]
Jms deep dive [con4864]
 

Hybrid Mobile Development with Apache Cordova and

  • 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. Agenda • Demo Application • Mobile Overview • Tooling • Apache Cordova • Java EE 7 + Cordova • jQuery Mobile • Security • Deployment • Summary • Q&A https://github.com/rcuprak/n34sailor Both designed and engineered using Dassault Systèmes CATIA software!
  • 5. DemoApplication • Broadcast race course • Boat registration • Time check and start notification • Boat tracking • Race announcements • Results • Weather information Functional Requirements
  • 6. DemoApplication • Mobile • Apache Cordova • User interface • JQuery Mobile • Tooling • NetBeans • NodeJS • Server • GlassFish 4.1 (EE 7) • Android dev tools • iOS dev tools Overview
  • 7. DemoApplication • What is Apache Cordova? • Open source mobile development framework. • Applications implemented using HTML5, CSS3, and JavaScript. • Applications bundled and wrapped in a native shell. • APIs for accessing device features. • Benefits: • Write once, run everywhere. • Leverage familiar frameworks and tools (jQuery, Angular, etc.) • Rapidly develop applications • Low barrier to entry… no massive learning curve Why choose Apache Cordova?
  • 8. DemoApplication • Standard set of APIs • Multiple vendors implementations • Longevity, continuity, and backwards compatibility. • Technical reasons: • Support for current technologies, REST, WebSockets • Resource management: object pooling, thread management, threading, • Transactions • Security • Scalability • Testability • Messaging • Extended features: clustering, distributed caches Why choose Java EE?
  • 9. DemoApplicationArchitecture CORDOVA HTML5 Java EE 7 Server App Data Services NOAA Database
  • 14. MobilePlatforms • 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 2015
  • 15. MobileOverview • 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
  • 16. MobileOverview • 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. Hybrid Applications
  • 17. MobileOverview Native HTML5 vs. Web Apps HTTP Session JSF/JSP/Facelets
  • 18. MobileOverview 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
  • 19. MobileOverview 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
  • 22. Tooling • Platform SDKs • Certificates to test on devices ($$) • Ant (ant.apache.org) • NodeJS (nodejs.org) • Apache Cordova • Java 8 (java.oracle.com) • NetBeans 8.0.2 (netbeans.org) What might we want to install? • Chrome (www.google.com/chrome) • Maven (maven.apache.org) • Karma (karma-runner.github.io) • Jasmine (jasmine.github.io What do we need?
  • 23. Tooling • Robust Java EE 7 support: • Code completion/editor support • Project templates • App server integration • Fully integrated Apache Cordova: • Core feature – no plugin required. • Project templates • Wraps Cordova • Support for iOS and Android • Debug connected devices • Powerful JavaScript editor/debugger • JavaScript libraries and unit testing • Grunt build support Why NetBeans 8
  • 25. Tooling • 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 Platform Tools and SDKs Note: NetBeans has integration with Android/iOS tooling. Thanks to PhoneGap, we can also build in the cloud!
  • 26. 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
  • 27. Tooling Install NetBeans Connector (chrome.google.com) NetBeans <-> Chrome Integration NetBeans enables you to debug in Chrome
  • 30. ApacheCordova • 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
  • 31. ApacheCordova 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!
  • 32. ApacheCordova • 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 Quirks
  • 36. ApacheCordova config.xml Based on W3C Packaged Web Apps (Widgets) http://www.w3.org/TR/widgets/ Danger!! – cross site script (XSS) exploit risk!
  • 37. ApacheCordova • 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
  • 39. ApacheCordova 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!
  • 43. ApacheCordova • Start with HTML5 project in NetBeans without Cordova. • Test in Simulator’s browser. • Profile code using Chrome Profiler • Test with Chrome • Write JavaScript unit tests • Isolate networking code • Don’t assume network access/availability • Never store confidential information on the phone! Development Best Practices
  • 44. ApacheCordova Testing in Chrome != Testing on device http://caniuse.com Ouch!
  • 45. Java EE 7 & Apache Cordova
  • 46. Java EE7 + Cordova Device/Server Connectivity Java EE 7 App Server REST Web Sockets Request/Response Bidirectional Restful Web Service Web Socket Endpoint JavaScript/HTML5
  • 47. Java EE7 + 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 Refresher
  • 48. Java EE7 + 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 for WebSocket
  • 49. Java EE7 + 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
  • 50. Java EE7 + Cordova Relating Java EE 7 to Mobile JAX-RS Java API for WebSocket Java API for JSON JAXB* Mobile Device (running Cordova) POJO <-> JSON
  • 51. Java EE7 + 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
  • 52. Java EE7 + Cordova REST Example with JAX-RS HTTP POST to http://<server>/n34/race/join/<id>/<class>
  • 53. Java EE7 + Cordova REST in Cordova App + jQuery
  • 54. ApacheCordova Enabling CORS: JAX-RS 2.0 Interceptor Chrome will now allow you to test your HTML5 app.
  • 55. Java EE7 + 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
  • 56. Java EE7 + Cordova Be careful when returning POJOs! JAX-RS Gotchas Oops! Use either: • DTO – Data Transfer Object • @XmlTransient
  • 57. Java EE7 + Cordova Compressing RESTful Responses
  • 58. Java EE7 + 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
  • 59. Java EE7 + Cordova Web Socket in JavaScript Creating WebSocket in JavaScript:
  • 60. Java EE7 + Cordova Sending JSON via WebSockets
  • 61. Java EE7 + 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
  • 62. Java EE7 + 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
  • 63. Java EE7 + Cordova Web Sockets: Programmatic Endpoint
  • 64. Java EE7 + Cordova Web Sockets – Annotated Endpoint
  • 65. Java EE7 + Cordova Sending a message Synchronously sends a message back to the client.
  • 66. Java EE7 + 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
  • 67. Java EE7 + Cordova • Defined in JSR 353 – included with 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
  • 68. Java EE7 + Cordova • WebSocket connection processes many types of messages. Java API for JSON AbstractMessage ChatMessage TrackingMessage RaceMessage
  • 69. Java EE7 + Cordova Java API for JSON Message Object Decoders/encoders
  • 70. Java EE7 + Cordova Encoding JSON
  • 71. Java EE7 + Cordova Decoding JSON
  • 72. Java EE7 + 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
  • 73. Java EE7 + 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)
  • 74. Java EE7 + Cordova Server Load: Web Sockets vs. REST Java EE 7 Server Java EE 7 Server REST WebSockets
  • 76. jQueryMobile • UI Framework needed! • 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
  • 77. jQueryMobile • Use NetBeans to install jQuery and jQuery Mobile. • Don’t use CDN – all content must be packaged with the application. Configuration
  • 79. jQueryMobile • Changing to another page: • Processing a page before rendering: Navigation
  • 81. Security • Apache Cordova App != mobile web application • No HTTP session • Users do not expect to authenticate on each launch! • Do you log into email/twitter on each launch? • Password should never be stored • Phones are lost/stolen regularly • Obscurity isn’t security • Many users re-use password Overview
  • 82. 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
  • 83. Security Goal is to use Java EE security on the server side: Java EE Security JAX-RS Endpoint EJBs (roles)
  • 84. Security Typical Java EE Configuration Won’t Work!
  • 86. 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
  • 88. Security 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. Token Verification via Filter
  • 89. Security • JASPIC puzzle piecesL • ServletContextListener – initial registration of AuthConfigProvider • AuthConfigProvider • ServerAuthConfig • ServerAuthContext • ServerAuthModule  does the actual authentication work] • Factory nightmare… Server Authentication Module
  • 90. 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
  • 93. Security Authentication Process JAX-RS Endpoint AuthorizeBea n EJB Auth Module Race EJB /join/race Check token Invoke Service join Java EE Security
  • 94. Summary • Apache Cordova simplifies cross-platform mobile development. • Java EE 7 provides a standardized server stack to enable Apache Cordova development.
  • 95. 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
  • 96. Summary • Email contact: rcuprak@gmail.com • LinkedIn: https://www.linkedin.com/pub/ryan-cuprak/0/12a/93 • Code: https://github.com/rcuprak/n34sailor • Twitter: @ctjava • Books: References

Editor's Notes

  1. I would like to welcome you to Hybrid Mobile Development with Apache Cordova and Java EE 7. How many of you are already mobile application developers? How many are using Apache Cordova? How many have heard of Apache Cordova?
  2. The objective of this session is to enable you to become the next app store millionaire. Two things: Enable you to write a single application for multiple platforms. Enable you to write a robust and powerful backend that can scale.
  3. This is the agenda for this session. We are going to start out by first looking at the demo application, then a brief review of mobile today, then discuss tooling…
  4. [Ryan] In today’s presentation we are going to look at a racing application. This is interesting for several reasons, first: It is a complex example that allows us to look at threading It has a sufficiently complex data model Java EE 7 adds several important features that allow us to build this application.
  5. [Ryan]
  6. [Ryan] There are several technologies we
  7. [Ryan] If this is an HTML5 application, why Java EE? Where does Java EE fit into the picture?
  8. [Michael] This is going to be our data model for the application. We’ll discuss each of these pieces in great depth as we go through the presentation. One thing to drive home here is the complexity of the application. This application coordinates activities between multiple users and has a graphical interface.
  9. This is a mult-tier architecture Leverages practically every feature of Java EE
  10. Unlike most demo applications, this one has a rich data model. Over 16 tables and this was an early draft of the application! We have multiple relations.
  11. [Ryan] Demo application
  12. [Michael]
  13. [Michael] What is the mobile landscape like today: currently the two biggest players are Android and iOS. Blackberry which used to dominate the market is just a shadow of its former self.
  14. [Ryan] With mobile development you have three different models to choose from. There is the native, mobile web and hybrid. Each one has its strengths and weaknesse. With native you are leveraging native platform resources, 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.
  15. [Michael] Native HTML5 applications are fundamentally different from mobile web applications. An HTML5 application is a “Single Page Application” – this means that the application resides in a single “page.” There is no: Back button URL bar History Shortcuts The user cannot escape from your application. You code the logic of the application in JavaScript -
  16. [Ryan] First, the server doesn’t serve up the pages. The pages are bundled with the application. Lack of HTTP Session should get your attention – this is a major difference.
  17. [Ryan] Graphically let’s get a better understanding of what we mean by a SPA. It doesn’t mean that we’ve got a 10,000 line html file. The content does get segmented into multiple files. Your application does get split up into multiple JS and HTML5 files. Note, you should have a post process step, say using Grunt which will minify your resources.
  18. [Michael] You mobile framework to get going. Don’t re-invent the wheel. Desktop web development skills are different than mobile web development skills Have to handle touch, small devices, device orientation changes. Angular can be used although it isn’t listed.
  19. [Michael] Sencha Touch framework has an IDE Visually develop the pages Forces good MVC practices Development similar to that in xCode, Android Studio Costs $400 for a license (Sencha Touch libaries are free)
  20. [Ryan] Next up, we are going to look at tooling!
  21. [Michael] Need quite a few tools in order to get started. Need our platform tools installed Xcode Android Developer Studio Microsoft Tools
  22. [Ryan] Tooling is incredibly important and also challenging. Dealing with multiple technologies May not all play nice
  23. [Michael]
  24. [Michael] Her we have the various tools. Need multiple operating systems in addition to multiple devices. Using PhoneGap we can build in the cloud.
  25. [Michael] Cordova is installed via the Node package manager, - you can choose to circumvent.
  26. [Michael] - To simplify development it is easiest to test in Chrome. - NetBeans enables you to debug in Chrome
  27. [Michael] Create a new Cordova project in NetBeans (hello world) and launch it. Set a breakpoint.
  28. [Michael] - Next we will talk about Apache Cordova!
  29. Up to this point we’ve been alluding to Apache Cordova…
  30. [Michael] Cordova has many plugins allowing you to talk to devices.
  31. [Ryan] Native HTML5 applications are fundamentally different from mobile web applications. An HTML5 application is a “Single Page Application” – this means that the application resides in a single “page.” There is no: Back button URL bar History Shortcuts The user cannot escape from your application. You code the logic of the application in JavaScript -
  32. [Michael] The project layout is relatively straightforward Web assets- html files, JS, etc. go under www. Test fles are under test. Plugins are installed in the plugins directory. Etc.
  33. [Ryan]
  34. [Ryan]
  35. [Michael] Config.xml is the global configuration file. There is a config.xml file for each platform (iOS/Android). Access origin - * means it can access anything Specify n34sailor to lock to only our site. If someone did inject JavaScript (and it was interpreted) it could be used to hack our server
  36. [Michael] In that last slide, we saw how Cordova would allow us to access any site. We need
  37. [Michael]
  38. Values in simulator are different Vary significantly across phones Intel vs. ARM
  39. - 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.
  40. [Ryan]
  41. [Ryan]
  42. [Ryan]
  43. Client initiates the request. 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. Commonly supported HTTP verbs include GET, POST, PUT, and DELETE Uses existing web technologies and security standards Fully supported by Java EE 6 & 7.
  44. In terms of connecting connecting a mobile application with the the backend servers you have two main types of connectivity: Restful webservices and Websockets. Both of these use HTTP at their core. Using HTTP as opposed to direct socket communication ensures the the mobile application is able to reach the server wherever it it running. HTTP is well understood by fire walls and proxy servers. Restful web services map the HTTP functions PUT/POST/DELETE, etc. to business functionality.
  45. Text based exchange format. JSON defines only two data structures: objects and arrays. An object is composed of name-value pairs and an array is a list of values.
  46. JAX RS is the Java standard API for rest. With Java EE 7 JAXRS received a major upgrade.
  47. This is an example JAX-RS endpoint.
  48. [Ryan]
  49. ServerApplicationEndpoint- represents an endpoint.
  50. - 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.
  51. The client racing app is constantly retrieving information from the server.
  52. This is what we want to happen on the serverside…
  53. In this example here we see an example of how to use basic authentication against the server. The problem with this approach is that we would have to cache the username and password in the application. Caching the username and password in the application would be bad. What we are going to do instead is take a token approach. With a token approach.
  54. One solution to token verification is to write a WebFilter. However, there are two flaws with this code: To use the servlet logic, we would have to retrieve the username and password to then log in the user. The container would then hit the database table again to perform password validation. At least two selects on the database on every restful web service invocation. The password is hashed and the container expects a plain text password. So this solution will not work.
  55. [Michael]