JavaFX Versus HTML5 - JavaOne 2014

JavaFX Versus
HTML5
Ryan Cuprak, Dassault Systemès
David Grieve, Oracle

Agenda
• Demo Application
• Technical Comparison
• JavaFX in Perspective
• HTML5 in Perspective
• Analysis
• Integration
• Summary
Both designed and engineered using Dassault
Systèmes CATIA software!
https://github.com/rcuprak/n34sailor

Demo Application
Why not Swing?
• JavaFX replaces Swing
• Swing was a 1990s technology – different era
• Swing has significant shortcomings:
• No support for touch
• Hard to customize appearance
• JTable feature poor with complex code
• No support for animation
• No data binding support
• No support for animations
• Some customization require changes to L&F classes

Demo Application
Background
• HTML5 has arrived on the desktop
• HTML5 has arrived on mobile
• HTML5 apps are apps!
• Logic written in JavaScript
• UI HTML5/CSS3
• HTML5 apps are gaining device
support:
• Compass/GPS/Accelerometers/BlueToo
th

Demo Application
What type of demo application?
• Mobile – using HTML5 and Apache Cordova
• Apps not websites!
• HTML5 enables app development
• Excitement is around app development
• Rich user experiences
• Not talking about JSF + HTML5

Demo Application
What type of demo application?
Not this type of web app!

Demo Application
Sailboat Racing
Start/Finish

Demo Application
Architecture
Interface
Application
Entities
Infrastructure
Apache
Cordova
EJB
JPA Entities
JPA
JavaFX JAX-RS WebSocket
JMS CDI

Demo Application
Sailboat Racing Overview
• Committee boat sets the course and
announces it via radio.
• 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.

Mobile Overview
Native HTML5 Apps
• Single Page Application (SPA)
wrapped in Native application.
• Native application displays a
WebView – embedded browser.
• Logic:
• JavaScript
• JavaScript platform extensions
• UI
• HTML5 markup
• SVG
• Canvas
• WebGL
• All assets are bundled with the
application.

Mobile Overview
Native HTML5 vs. Web Apps
HTTP Session
JSF/JSP/Facelets

Demo Application
Technologies
• JavaFX
• Vanilla JavaFX– designed using Scene
Builder 2.0
• JAX-RS 2.0 (Jersey)
• WebSockets (Tyrus)
• Java API for JSON Processing
• HTML5
• Apache Cordova
(Android/iOS/Windows/Tizen/BlackBe
rry)
• JQuery
• JQuery Mobile
• Knockout JS

Mobile Overview
Framework License
jQuery Mobile
http://jquerymobile.com
MIT
Sencha Touch
http://sencha.com
Commercial(Free) & Open
Source (GPLv3)
Intel App Framework
http://app-framework-software.intel.com
MIT
Ionic
http://ionicframework.com
MIT
M-Project
http://www.the-m-project.org
MIT
Kendo UI
http://www.telerik.com
Commercial
Twitter Bootstrap 3
http://getbootstrap.com
MIT
Mobile Frameworks

Mobile Overview
Secha Architect

Demo Application
Material Differences
• JavaFX
• No camera integration
• No GPS integration
• Connectivity information (network availability/type)
• HTML5
• UI layout
• Background threading
• Browser support – IndexDB

Technical Comparison
High Level Overview
• HTML5
• UI constructed using HTML5
markup
• Logic implemented using JavaScript
• Tooling: NetBeans
• JavaFX
• UI constructed using FXML
• Logic implemented using Java
• Tooling: NetBeans, Scene Builder 2

JavaFX: Architecture with Controllers
Login Map Weather Navigation Chat
MainMen
u
Race
Register
Main
fxml fxml fxml fxml
fxml
fxml
fxml
fxml

JavaFX: Controller Architecture

JavaFX: UI Flow
1. JoinRace.fxml invokes confirmAction(ActionEvent)
2. RaceController sets the data on RaceController.

HTML5: SPA Architecture
index.html
<html><body>
<div id=“page”>
<a href=“menu.html”>
Menu
</a>
</div>
</body></html>
menu.html
<html><body>
<div id=“page”>
<a href=“info.html”>
Info </a>
</div>
</body></html>
<a href=“info.html”>
Info </a>
info.html
<html><body>
<Info
div id=“page”>
Info
</div>
</body></html>

HTML5: Page Flow
index.html
account.html
login.html menu.html
joinRace.html
register.html
results.html
welcome.html
weather. chat.html info.html tracking.html

HTML5: UI Flow
App.js
joinRace.html
Race.js
- getRaces()
- pageBeforeJoinRaces()
- joinSelectedRace()
menu.html
- pageBeforeShow()
- pageChange()
1. menu.html - <a id="raceMenu" onclick="getRaces();">Join Race</a>
2. app.js – pageChange()
3. app.js – pageBeforeShow() -> Race.js getRaces()
4. joinRace.html - <button type="button" id="Login" onclick="joinSelectedRace();"
value="Login">Confirm</button>

HTML5: UI Transitions
Changing to another page:
• Processing a page before rendering:

HTML5: Apache Cordova + JQuery Mobile Initialization
App “states” are
different.

HTML5: Loading Data
JQuery Mobile – varies by
JavaScript library

HTML5: Using Knockout
Using Bindings

HTML5: Knockout Complications
Converting data to JSON becomes more complicated:

JavaFX: Data Binding
Bound using
@FXML
@FXML
void userNameEntered(ActionEvent)

JavaFX: Binding
Conditionally enable
the login button

Busy Indicator

JavaFX: Busy Indicator

HTML5: Busy Indicator – Animation Markup

HTML5: Busy Indicator – Animation with CSS3

HTML5: Tables
JQuery plug: Data Tables
http://www.datatables.net

HTML5: Tables

JavaFX: Tables

Server Communication
Client
Java EE 7
App Server
REST
Request/Response
Web Sockets
Bidirectional
Restful Web Service
Web Socket Endpoint

Server Communication
• JavaFX
• Not part of Java 8.
• Websocket: Project Tyrus
https://tyrus.java.net/index.html
• REST: Project Jersey
https://jersey.java.net
• JSON Processing
https://jsonp.java.net
• HTML5
• REST – native support:
• Xmlhttp – used to issue AJAX calls.
• WebSocket – native support:
• WebSocket – used to register callbacks and send data.

HTML5: WebSocket Support
http://caniuse.com/#search=webso
Android Version Date WebSocket Deployed
4.4 JellyBean July 24, 2013 No 26.5% (80% can’t)
4.4 KitKat October 31, 2013 Yes 20% (8/2014)

Java: REST Invocation Java Objects!
Java API for
JSON
JAX-RS Client

HTML5: REST Invocation

HTML5: WebSocket Support

JavaFX: WebSocket Support

HTML5: Layout Challenges

Apache Cordova
HTML5: Device Access

Challenges
HTML5 Development Challenges
• Null versus undefined
• Different approaches to defining “classes”
• Global namespace
• IDE coding support
• Threading – Web Workers cannot update the DOM
• IndexDB support/access
• Recovering from fatal errors (application “hung”)
JavaFX Development Challenges
• Mobile support
• Interaction with hardware

HTML5 & JavaFX
JavaFX Misconceptions
• JavaFX is irrelevant with the advent of HTML5.
• Java on the desktop is dead.
• JavaFX and HTML5 are mutually exclusive.
• Java does not have good graphics performance.
• JavaFX is only for rich media applications – not desktop apps.
• JavaFX is meant for only building games and mobile apps.
• You would never use JavaFX in a business application.

HTML5 & JavaFX
Legacy Technologies
• Java3D, JAI, and JMF are dead.
• Java3D, JAI, and JMF have no relationship to JavaFX.
• JavaFX is not like these technologies:
• Cross-platform – features are available everywhere.
• Integrated into the JRE – no separate download/versioning/etc.
• JavaFX includes support for common video and audio formats.

HTML5 & JavaFX
• Retained mode
• SceneGraph
• Scene Builder Tool
• 60+ components
• CSS skinning
• Built-in animation
support
• Audio/video support
• Multi-touch
• 3D Tooling Support
with SceneBuilder
JavaFX Key Features

HTML5 & JavaFX
JavaFX in Perspective
Differentiating feature: Scene graph is at the
core of the API.
• UI widgets are nodes like any other node!
• UI widgets are thus like any other node in the
scene graph
• Can be animated, transformed, filtered,
leverage customized event handling

HTML5 & JavaFX
HTML5 Major Features
• 2D Canvas
• WebGL – technically not part of HTML5
• CCS3 – WebFonts, Transformations, CSS
Animation
• WebSockets
• Web Workers – background threading
• Data storage – file system access, local storage,
app cache

HTML5 & JavaFX
HTML5 vs. Traditional Web Applications
• Not page centric like JSF/JSP/Servlets.
• Single Page Application (SPA) – the app is the page.
• Client is stateful and not stateless.
• Application is coded in JavaScript.
• True asynchronous communication with the server.
• Application may not have a backend server.
• Maybe sold via an App store.

HTML5 & JavaFX
HTML5 Applied
• Many mobile apps are hybrids:
• Native application shell with HTML5 content.
• PhoneGap aka Apache Cordova
• Native application development dominates mobile:
• Mobile phones, while powerful, are not as powerful as 2 GHz i3.
• Mobiles devices are RAM limited – garbage collection and RAM
• Android support native apps (C/C++) – NDK.
• Performance/usability issues - FaceBook went native.

HTML5 & JavaFX
Technical Comparison Agenda
• Overview
• Feature Support
• Rendering APIs
• Multimedia
• Controls
• Animation
• 3D Comparison

HTML5 & JavaFX
Overview: Comparison Challenge
• HTML5 is amorphous:
• Basic set of base technologies (SVG, Canvas, WebGL, WebSockets,
WebWorker).
• Additional functionality provided by open source libraries:
• JQuery
• Three.js
• Tween.js
• Almost impossible to argue HTML5 can’t do X.
• JavaFX is fixed:
• More robust core features.
• Easier to use developmentally.
• Smaller ecosystem of components.

HTML5 & JavaFX
Overview: HTML5 Limitations
• JavaScript language
• Browser challenges
• Custom browser extensions
• Concurrency
• Time zone detection
• Tooling challenges
• Patent infringement/ IP theft.

HTML5 & JavaFX
Overview: JavaFX Limitations
• No smart phone strategy.
• RoboVM– opens up iOS!
http://www.robovm.org
• Incomplete – still a work in progress.
• Core features dependent upon Oracle resourcing.
• Missing features:
• geo-location, device orientation, accelerometers,
camera capture
• Perception – JavaFX 1.0.

HTML5 & JavaFX
JavaFX HTML5
Deployment Strategies
Mac App Store ✔ ✔
Microsoft App
Store
✔ ✔
Android Stores ✖ ✔
iTunes  ✔
Browser  ✔

HTML5 & JavaFX
HTML5 Feature Support
Feature IE Chrome FireFox Safari
Canvas IE 9 26 21 5.1
WebGL ✖ 26  
Web
10 26 21 6.0
Sockets
SVG 9 26 21 5.1
Offline
10 26 21 5.1
Apps
Animation 10 26 21 6.0

HTML5 & JavaFX
Rendering
• HTML5 Canvas element is a 2D draw surface –
similar to Java 2D, MacOS X Quartz, QuickDraw,
etc.
• HTML5 Canvas is immediate – JavaFX retained.
• HTML5 Canvas similar to JavaFX Canvas.
• HTML5 Canvas does not support hit detection.

HTML5 & JavaFX
Rendering
JavaFX HTML5
javafx.scene.Scene
javafx.scene.canvas.Canvas
SVG
Canvas

HTML5 & JavaFX
2D Canvas: JavaFX vs. HTML5
• Similarities:
• Immediate mode rendering.
• API almost exact match.
• JavaFX:
• Canvas can participate in scene graph and also JavaFX 3D.
• Supports SVG paths.
• HTML5:
• Lacks fill support for arcs or polygons.

HTML5 & JavaFX
Feature Integration
JavaFX HTML5
Scene
Canvas Video
Audio
Canvas
SVG
Video
CSS Audio
Feature Layout not
integrated.
3D
WebGL
(3D)

HTML5 & JavaFX
Feature Integration
Video and Canvas integrated via layout.

HTML5 & JavaFX
SVG
• SVG – 2D vector image support (.svg)
• XML based: supports vector, raster, and text.
• SVG 1.0 release in 2001.
• SVG 2.0 targeted for 8/2014.
• Can be compressed using gzip.
• Browser support is not robust
• IE8 didn’t provide SVG support
• Modules lacking full support: Font, Filter, Clip, Cursor
• Include in HTML using <embed>, <object>, or <iframe>

HTML5 & JavaFX
HTML5: SVG
• Multiple tools can export to SVG:
• Adobe Illustrator
• OmniGraffle Professional
• CorelDraw
• InkScape (open source)
• SVG format has a similar structure.
• Can be manipulated from JavaScript.

HTML5 & JavaFX
Controls
• HTML5 and JavaFX have rich suite of controls.
• Binding:
• JavaFX – built-in
• HTML5 – need library like knockout.js.
• HTML5 lacks a windowing API.
• No layout managers, windows, menu bars, etc.
• No framework for extending browser controls.
• Controls vary between browsers.
• No support for internationalization.
• JavaFX controls are node in the scene graph.

HTML5 & JavaFX
Tables
• HTML5
• No native “grid” data grid component (JTable/Excel equivalent)
• You cannot drag and drop <tr></tr> to rearrange a table.
• Challenges: Merging cells (row/column), copy paste, selection.
• JavaFX
• Powerful table component – joining cells, selection, copy paste,
drag and drop.
• Supports table joining in JavaFX 8.

HTML5 & JavaFX
Multimedia Support
• Video/audio codec support determined by patents.
• Oracle licenses formats for JavaFX.
• HTML5 supports no audio/video codecs by default.
• JavaFX provides a known set of codecs.
• Built on top of Gstreamer (http://www.gstreamer.com)

HTML5 & JavaFX
Video Codecs Support Matrix
JavaFX HTML5
Chrome FireFox Safari IE
FLV (VP6
video/mp3
audio)
✔ ✔ ✔ ✖ ✖
H.264 ✔ ✔ ✔ ✔ ✔
Theora ✖ ✔ ✔ ✖ ✖
VP8 (WebM) ✖ ✔ ✔ ✖ ✖
VP9 (WebM) ✖ ✔ ✖ ✖ ✖

HTML5 & JavaFX
Video Codec Support
• HTML5 video includes controller
play/stop/progress/seek/volume.
• HTML5 – easy to fallback to plugins (Flash) where necessary.
• JavaFX – does not include controller UI.
• Neither technology can access individual video Frames!

JavaFX & HTML5
Audio Codecs Support Matrix
JavaFX HTML5
Chrome FireFox Safari IE
ACC ✔ ✔  ✔ ✔
AIFF ✔ ✖ ✖ ✖ ✖
Ogg Opus ✖ ✔ ✔ ✖ ✖
Ogg Vorbis ✖ ✔ ✔ ✔ ✖
MP3 ✔ ✔  ✔ ✔
WAV PCM ✔ ✔ ✔ ✔ ✖
WebM ✖ ✖ ✔ ✖ ✖

HTML5 & JavaFX
Animation
• HTML5 animation is primitive.
• requestNextAnimationFrame callback
• You are responsible for everything else!
• Callback not supported on all platforms - polyfill can suffer
performance degradations
• Must either build a toolkit or use JavaScript animation library like
tween.js.
• JavaFX
• Animation framework built into the platform
• All nodes can be animated – include UI elements.
• javafx.animation.Animation – base class – two subclasses.

HTML5 & JavaFX
JavaFX Animation Support
• Robust built-in library for animation.
• Leverages JavaFX binding capabilities
• JavaFX Animation subclasses:
• Parallel/Sequential
• Timeline/Keyframes
• Transition: FadeTransition, FillTransition, ParallelTransition,
PathTransition, PauseTransition, RotateTransition, ScaleTransition,
SequentialTransition, StrokeTransition, TranslateTransition

HTML5 & JavaFX
HTML5 Animation Support

HTML5 & JavaFX
3D Support
• JavaFX 8 and HTML5 WebGL both support 3D.
• JavaFX 8 3D support:
• Built on top of OpenGL/Direct 3D
• Provides a built-in scene graph
• Decora – DSL Shader language
• HTML5 JavaFX WebView does not support WebGL.
• JavaFX 3D – 3D without the overhead.

HTML5 & JavaFX
WebGL
• WebGL developed by Khronos Group
• Based on OpenGL ES 2.0 – embedded OpenGL API used on iOS
and Android.
• API is low level – must develop or use framework on top of
WebGL.
• GLGE: http://www.glge.org
• SceneJS: http://www.scenejs.org
• CubicVR: http://www.cubicvr.org
• Three.js: http://www.threejs.org
• Not supported in all browsers.
• IE support has been lacking – first version IE 11.
• Safari requires the user enable WebGL (Developer menu).
• Shaders written in C-like language

HTML5 & JavaFX
three.js vs. JavaFX 3D
Feature JavaFX WebGL three.js
Light 7 2
Built-in Shapes 25 4
WebGL – no JavaScript libaries
Only triangle meshes
No picking API, lines, etc. (currently)
JavaFX
Highlevel API – use jogl for OpenGL capabilities.

HTML5 & JavaFX
Performance Tuning
• JVM can be tuned for
performance.
• HTML5 lacks tuning support.
• Cannot configure garbage
collection.
• Each browser is “different.”
• Limited tooling for exploring
JavaScript VM problems.
http://www.html5rocks.com/en/tutorials/speed/static-mem-pools

HTML5 & JavaFX
Integrating JavaFX & HTML5
• CSS for skinning components.
• WebView for rendering HTML5 content.
• SVG rendering support.

HTML5 & JavaFX
JavaFX CSS Control Skinning
• JavaFX uses CSS for skinning.
• JavaFX uses its own CSS attributes.
• JavaFX CSS reader is not fully compliant.
• Graphic artist will must learn JavaFX CSS properties.
• JavaFX skinning properties don’t support animation.

HTML5 & JavaFX
JavaFX
HTML5

HTML5 & JavaFX

HTML5 & JavaFX
HTML5 Property HTML5 Value JavaFX Property JavaFX Value
background -webkit-gradient(
linear,
left top, left
bottom,
from(#3e779d),
to(#65a9d7))
-fx-background-color
linear-gradient(to
bottom,
rgb(62,119,157),
rgb(101,169,215))
border-radius 8px -fx-border-radius 8px
box-shadow rgba(0,0,0,1) 0
1px 0
-fx-effect dropshadow(one-pass-
box,black, 0,
0.0 , 0 , 1)

HTML5 & JavaFX
WebView Overview
• Uses WebKit as the rendering engine – same renderer used
by:
• Safari
• Chrome <29 – Google has forked WebKit.
• Fully functional web browser – can render
cnn.com/ebay.com/etc.
• No built-in navigation controls.
• Proxy detection/configuration challenging.
• Limited control of page load/monitoring.

HTML5 & JavaFX
WebView Integration
Bidirectional communication:
• JavaScript code can call Java code from WebView.
• Java code can invoke JavaScript methods.

HTML5 & JavaFX
WebView Debugging (Secret)
Response will be JSON.

HTML5 & JavaFX
Integrating WebView
• WebView enables hybrid applications.
• Integrate web applications into desktop application.
• Integrate message forums/online help.
• Provide online HTML based help.
• Limitations:
• HTML5 geolocation feature doesn’t work.
• Unable to set user-agent (causes problems with some
JavaScript/servers.)

HTML5 & JavaFX
Conclusion
• HTML5:
• External libraries necessary to make HTML5 viable.
• Well developed ecosystem.
• Weakness: core language and feature integration.
• JavaFX:
• Well designed architecture with excellent feature integration.
• Next logical step for the desktop/embedded devices.
• Weakness: mobile support.

Summary
References
• Email contact:
• rcuprak@gmail.com
• Twitter: @ctjava
• Other Session:
• Hybrid Mobile Development with Apache Cordova and Java EE 7
(TUT5276)
• 50 EJB 3 Best Practices in 50 Minutes - CON1947
• Books:

JavaFX Versus HTML5 - JavaOne 2014

More Related Content

What's hot

Viewers also liked

Similar to JavaFX Versus HTML5 - JavaOne 2014

More from Ryan Cuprak

Recently uploaded

JavaFX Versus HTML5 - JavaOne 2014

Editor's Notes