This document provides an overview comparison of JavaFX and HTML5 for building mobile applications. It includes a demo of a sailboat racing application built with both JavaFX and HTML5. The technical comparison section analyzes the architectures, controls, data binding, tables, multimedia support and other features of JavaFX and HTML5. It finds that while HTML5 has broader deployment options, JavaFX provides more robust and integrated core features out of the box. The document also discusses the perspectives and limitations of both JavaFX and HTML5.

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

2. 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

3. Demo Application

4. 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

5. 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

6. 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

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

8. Demo Application
Sailboat Racing
Start/Finish

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

10. 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.

11. 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.

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

13. Demo Application
UI Mockup

14. 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

15. 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

16. Mobile Overview
Secha Architect

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

18. Technical Comparison

19. 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

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

21. Technical Comparison
JavaFX: Controller Architecture

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

23. Technical Comparison
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>

24. Technical Comparison
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

25. Technical Comparison
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>

26. Technical Comparison
HTML5: UI Transitions
Changing to another page:
• Processing a page before rendering:

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

28. Technical Comparison
HTML5: Loading Data
JQuery Mobile – varies by
JavaScript library

29. Technical Comparison
HTML5: Using Knockout
Using Bindings

30. Technical Comparison
HTML5: Knockout Complications
Converting data to JSON becomes more complicated:

31. Technical Comparison
JavaFX: Data Binding
Bound using
@FXML
@FXML
void userNameEntered(ActionEvent)

32. Technical Comparison
JavaFX: Binding
Conditionally enable
the login button

33. Technical Comparison
Busy Indicator

34. Technical Comparison
JavaFX: Busy Indicator

35. Technical Comparison
JavaFX: Busy Indicator

36. Technical Comparison
HTML5: Busy Indicator – Animation Markup

37. Technical Comparison
HTML5: Busy Indicator – Animation with CSS3

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

39. Technical Comparison
HTML5: Tables

40. Technical Comparison
JavaFX: Tables

41. Technical Comparison
JavaFX: Tables

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

43. Technical Comparison
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.

44. Technical Comparison
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)

45. Technical Comparison
Java: REST Invocation Java Objects!
Java API for
JSON
JAX-RS Client

46. Technical Comparison
HTML5: REST Invocation

47. Technical Comparison
HTML5: WebSocket Support

48. Technical Comparison
JavaFX: WebSocket Support

49. Technical Comparison
HTML5: Layout Challenges

50. Apache Cordova
HTML5: Device Access

51. Technical Comparison
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

52. JavaFX in Perspective

53. 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.

54. 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.

55. 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

56. 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

57. HTML5 in Perspective

58. 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

59. 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.

60. 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.

61. Technical Comparison

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

63. 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.

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

65. 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.

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

67. 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

68. 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.

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

70. 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.

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

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

73. 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>

74. 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.

75. 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.

76. 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.

77. 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)

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

79. 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!

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

81. 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.

82. 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

83. HTML5 & JavaFX
HTML5 Animation Support

84. 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.

85. 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

86. 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.

87. 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

88. Integration

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

90. 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.

91. HTML5 & JavaFX
JavaFX CSS Control Skinning
JavaFX
HTML5

92. HTML5 & JavaFX
JavaFX CSS Control Skinning

93. 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)
JavaFX CSS Control Skinning

94. 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.

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

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

97. 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.)

98. HTML5 & JavaFX
SVG & JavaFX

99. 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.

100. 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: