This presentation takes a pragmatic approach to comparing JavaFX and HTML5, using an application written in JavaFX versus the same functionality written in HTML5 to illustrate the pros and cons of each.
Ryan CuprakCPG & Retail, Formulation R&D Development Senior Manager
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
• HTML5 has arrived on the desktop
• HTML5 has arrived on mobile
• HTML5 apps are apps!
• UI HTML5/CSS3
• HTML5 apps are gaining device
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
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
• Race course altered if wind dies or conditions
• 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.
• HTML5 markup
• All assets are bundled with the
14. Demo Application
• Vanilla JavaFX– designed using Scene
• JAX-RS 2.0 (Jersey)
• WebSockets (Tyrus)
• Java API for JSON Processing
• Apache Cordova
• JQuery Mobile
• Knockout JS
15. Mobile Overview
Commercial(Free) & Open
Intel App Framework
Twitter Bootstrap 3
42. Technical Comparison
Java EE 7
Restful Web Service
Web Socket Endpoint
43. Technical Comparison
• Not part of Java 8.
• Websocket: Project Tyrus
• REST: Project Jersey
• JSON Processing
• 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
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)
51. Technical Comparison
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
53. HTML5 & JavaFX
• 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
• 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
• Scene Builder Tool
• 60+ components
• CSS skinning
• Built-in animation
• Audio/video support
• 3D Tooling Support
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
• Can be animated, transformed, filtered,
leverage customized event handling
58. HTML5 & JavaFX
HTML5 Major Features
• 2D Canvas
• WebGL – technically not part of HTML5
• CCS3 – WebFonts, Transformations, CSS
• Web Workers – background threading
• Data storage – file system access, local storage,
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.
• True asynchronous communication with the server.
• Application may not have a backend server.
• Maybe sold via an App store.
60. HTML5 & JavaFX
• 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.
63. HTML5 & JavaFX
Overview: Comparison Challenge
• HTML5 is amorphous:
• Basic set of base technologies (SVG, Canvas, WebGL, WebSockets,
• Additional functionality provided by open source libraries:
• 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
• Browser challenges
• Custom browser extensions
• Time zone detection
• Tooling challenges
• Patent infringement/ IP theft.
65. HTML5 & JavaFX
Overview: JavaFX Limitations
• No smart phone strategy.
• RoboVM– opens up iOS!
• Incomplete – still a work in progress.
• Core features dependent upon Oracle resourcing.
• Missing features:
• geo-location, device orientation, accelerometers,
• Perception – JavaFX 1.0.
66. HTML5 & JavaFX
Mac App Store ✔ ✔
Android Stores ✖ ✔
68. HTML5 & JavaFX
• HTML5 Canvas element is a 2D draw surface –
similar to Java 2D, MacOS X Quartz, QuickDraw,
• HTML5 Canvas is immediate – JavaFX retained.
• HTML5 Canvas similar to JavaFX Canvas.
• HTML5 Canvas does not support hit detection.
70. HTML5 & JavaFX
2D Canvas: JavaFX vs. HTML5
• Immediate mode rendering.
• API almost exact match.
• Canvas can participate in scene graph and also JavaFX 3D.
• Supports SVG paths.
• Lacks fill support for arcs or polygons.
71. HTML5 & JavaFX
Feature Layout not
72. HTML5 & JavaFX
Video and Canvas integrated via layout.
73. HTML5 & JavaFX
• 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
• Multiple tools can export to SVG:
• Adobe Illustrator
• OmniGraffle Professional
• InkScape (open source)
• SVG format has a similar structure.
75. HTML5 & JavaFX
• HTML5 and JavaFX have rich suite of controls.
• 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
• 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.
• Powerful table component – joining cells, selection, copy paste,
drag and drop.
• Supports table joining in JavaFX 8.
77. HTML5 & JavaFX
• 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)
79. HTML5 & JavaFX
Video Codec Support
• HTML5 video includes controller
• HTML5 – easy to fallback to plugins (Flash) where necessary.
• JavaFX – does not include controller UI.
• Neither technology can access individual video Frames!
81. HTML5 & JavaFX
• HTML5 animation is primitive.
• requestNextAnimationFrame callback
• You are responsible for everything else!
• Callback not supported on all platforms - polyfill can suffer
• Animation framework built into the platform
• All nodes can be animated – include UI elements.
• javafx.animation.Animation – base class – two subclasses.
84. HTML5 & JavaFX
• 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 developed by Khronos Group
• Based on OpenGL ES 2.0 – embedded OpenGL API used on iOS
• API is low level – must develop or use framework on top of
• 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
Only triangle meshes
No picking API, lines, etc. (currently)
Highlevel API – use jogl for OpenGL capabilities.
87. HTML5 & JavaFX
• JVM can be tuned for
• HTML5 lacks tuning support.
• Cannot configure garbage
• Each browser is “different.”
• Limited tooling for exploring
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.
93. HTML5 & JavaFX
HTML5 Property HTML5 Value JavaFX Property JavaFX Value
left top, left
border-radius 8px -fx-border-radius 8px
box-shadow rgba(0,0,0,1) 0
0.0 , 0 , 1)
JavaFX CSS Control Skinning
94. HTML5 & JavaFX
• Uses WebKit as the rendering engine – same renderer used
• Chrome <29 – Google has forked WebKit.
• Fully functional web browser – can render
• No built-in navigation controls.
• Proxy detection/configuration challenging.
• Limited control of page load/monitoring.
95. HTML5 & JavaFX
99. HTML5 & JavaFX
• External libraries necessary to make HTML5 viable.
• Well developed ecosystem.
• Weakness: core language and feature integration.
• Well designed architecture with excellent feature integration.
• Next logical step for the desktop/embedded devices.
• Weakness: mobile support.
• Email contact:
• Twitter: @ctjava
• Other Session:
• Hybrid Mobile Development with Apache Cordova and Java EE 7
• 50 EJB 3 Best Practices in 50 Minutes - CON1947
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:
The user cannot escape from your application.
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.