JavaFX Versus HTML5 Ryan Cuprak, Dassault Systemès David Grieve, Oracle.
-
Upload
cori-bailey -
Category
Documents
-
view
231 -
download
0
Transcript of JavaFX Versus HTML5 Ryan Cuprak, Dassault Systemès David Grieve, Oracle.
JavaFX Versus HTML5Ryan Cuprak, Dassault Systemès
David Grieve, Oracle
Agenda
• Demo Application• Technical Comparison• JavaFX in Perspective• HTML5 in Perspective• Analysis• Integration• Summary
https://github.com/rcuprak/n34sailor
Both designed and engineered using DassaultSystèmes CATIA software!
Demo Application
Demo Application
• 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
Why not Swing?
Demo Application
• 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/
BlueTooth
Background
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
What type of demo application?
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
• 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.
Sailboat Racing Overview
Mobile Overview
• Single Page Application (SPA) wrapped in Native application.
• Native application displays a WebView – embedded browser.
• Logic:• JavaScript• JavaScript platform extensions
• UI• HTML5 markup• SVG• Canvas• WebGL
• All assets are bundled with the application.
Native HTML5 Apps
Immersive
App logicIn JavaScript
Mobile Overview
Native HTML5 vs. Web Apps
HTTP Session
JSF/JSP/Facelets
Demo Application
UI Mockup
Demo Application
• 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/BlackBerry)
• JQuery• JQuery Mobile• Knockout JS
Technologies
Mobile Overview
Framework License
jQuery Mobilehttp://jquerymobile.com
MIT
Sencha Touchhttp://sencha.com
Commercial(Free) & Open Source (GPLv3)
Intel App Frameworkhttp://app-framework-software.intel.com
MIT
Ionichttp://ionicframework.com
MIT
M-Projecthttp://www.the-m-project.org
MIT
Kendo UIhttp://www.telerik.com
Commercial
Twitter Bootstrap 3http://getbootstrap.com
MIT
Mobile Frameworks
Advice: Don’t reinvent the wheel!
Also Angular can be used…
Mobile Overview
Secha Architect
-Forces good MVC practices-Development similar to that in xCode, Android Studio-Costs $400 for a license
Demo Application
• JavaFX• No camera integration• No GPS integration• Connectivity information (network availability/type)
• HTML5• UI layout• Background threading• Browser support – IndexDB
Material Differences
Technical Comparison
Technical Comparison
• 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
High Level Overview
Technical Comparison
JavaFX: Architecture with Controllers
MainMenu Race
Weather NavigationMapLogin Chat
Register
Main
fxmlfxmlfxmlfxml
fxml
fxml
fxmlfxml
Technical Comparison
JavaFX: Controller Architecture
Technical Comparison
JavaFX: UI Flow
1. JoinRace.fxml invokes confirmAction(ActionEvent)2. RaceController sets the data on RaceController.
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>
info.html<html><body><div id=“page”>
Info</div></body></html>
<a href=“info.html”>Info </a>
Info
Technical Comparison
HTML5: Page Flow
index.html
account.html
joinRace.html
login.html menu.html
register.html
results.html
welcome.html
chat.html info.html tracking.htmlweather.
Technical Comparison
HTML5: UI Flow
App.js
joinRace.html
Race.js
- getRaces()- pageBeforeJoinRaces()- joinSelectedRace()
- pageBeforeShow()- pageChange()
menu.html
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>
Technical Comparison
HTML5: UI Transitions
Changing to another page:
• Processing a page before rendering:
Technical Comparison
HTML5: Apache Cordova + JQuery Mobile Initialization
App “states” are different.
Technical Comparison
HTML5: Loading DataJQuery Mobile – varies by JavaScript library
Technical Comparison
HTML5: Using Knockout
Using Bindings
Technical Comparison
Converting data to JSON becomes more complicated:
HTML5: Knockout Complications
Technical Comparison
JavaFX: Data BindingBound using
@FXML
@FXMLvoid userNameEntered(ActionEvent)
Technical Comparison
JavaFX: Binding
Conditionally enable the login button
Technical Comparison
Busy Indicator
Technical Comparison
JavaFX: Busy Indicator
Technical Comparison
JavaFX: Busy Indicator
Technical Comparison
HTML5: Busy Indicator – Animation Markup
Technical Comparison
HTML5: Busy Indicator – Animation with CSS3
Technical Comparison
HTML5: Tables
JQuery plug: Data Tableshttp://www.datatables.net
Technical Comparison
HTML5: Tables
Technical Comparison
JavaFX: Tables
Technical Comparison
JavaFX: Tables
Client
Technical Comparison
Server Communication
Java EE 7 App Server
REST
Web Sockets
Request/Response
Bidirectional
Restful Web Service
Web Socket Endpoint
Technical Comparison
• 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.
Server Communication
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)
Technical Comparison
Java: REST Invocation Java Objects!
Java API for JSON
JAX-RS Client
Technical Comparison
HTML5: REST Invocation
Technical Comparison
HTML5: WebSocket Support
Technical Comparison
JavaFX: WebSocket Support
Technical Comparison
HTML5: Layout Challenges
Apache Cordova
HTML5: Device Access
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
Challenges
JavaFX in Perspective
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.
JavaFX Misconceptions
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.
Legacy Technologies
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
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
JavaFX in Perspective
HTML5 in Perspective
HTML5 & JavaFX
• 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 Major Features
HTML5 & JavaFX
• 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 vs. Traditional Web Applications
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.
HTML5 Applied
Technical Comparison
HTML5 & JavaFX
• Overview• Feature Support• Rendering APIs• Multimedia• Controls• Animation• 3D Comparison
Technical Comparison Agenda
HTML5 & JavaFX
• 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.
Overview: Comparison Challenge
HTML5 & JavaFX
• JavaScript language• Browser challenges• Custom browser extensions• Concurrency• Time zone detection• Tooling challenges• Patent infringement/ IP theft.
Overview: HTML5 Limitations
HTML5 & JavaFX
• 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.
Overview: JavaFX Limitations
HTML5 & JavaFX
JavaFX HTML5
Mac App Store ✔ ✔Microsoft App Store
✔ ✔
Android Stores ✖ ✔iTunes ✔Browser ✔
Deployment Strategies
HTML5 & JavaFX
Feature IE Chrome FireFox Safari
Canvas IE 9 26 21 5.1
WebGL ✖ 26 Web Sockets
10 26 21 6.0
SVG 9 26 21 5.1
Offline Apps
10 26 21 5.1
Animation 10 26 21 6.0
HTML5 Feature Support
HTML5 & JavaFX
• 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.
Rendering
HTML5 & JavaFX
Rendering
javafx.scene.Scene
javafx.scene.canvas.Canvas
SVG
Canvas
JavaFX HTML5
HTML5 & JavaFX
• 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.
2D Canvas: JavaFX vs. HTML5
HTML5 & JavaFX
Feature Integration
Scene
Canvas Video
Audio
Canvas
SVG
CSS Audio
Video
JavaFX HTML5
Feature Layout not integrated.
3D
WebGL (3D)
HTML5 & JavaFX
Feature Integration
Video and Canvas integrated via layout.
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>
SVG
HTML5 & JavaFX
• 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: SVG
HTML5 & JavaFX
• 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.
Controls
HTML5 & JavaFX
• 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.
Tables
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)
Multimedia Support
HTML5 & JavaFX
JavaFX HTML5
Chrome FireFox Safari IE
FLV (VP6 video/mp3 audio)
✔ ✔ ✔ ✖ ✖
H.264 ✔ ✔ ✔ ✔ ✔
Theora ✖ ✔ ✔ ✖ ✖
VP8 (WebM) ✖ ✔ ✔ ✖ ✖
VP9 (WebM) ✖ ✔ ✖ ✖ ✖
Video Codecs Support Matrix
HTML5 & JavaFX
• 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!
Video Codec Support
JavaFX & HTML5
JavaFX HTML5
Chrome FireFox Safari IE
ACC ✔ ✔ ✔ ✔
AIFF ✔ ✖ ✖ ✖ ✖
Ogg Opus ✖ ✔ ✔ ✖ ✖
Ogg Vorbis ✖ ✔ ✔ ✔ ✖
MP3 ✔ ✔ ✔ ✔
WAV PCM ✔ ✔ ✔ ✔ ✖
WebM ✖ ✖ ✔ ✖ ✖
Audio Codecs Support Matrix
HTML5 & JavaFX
• 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.
Animation
HTML5 & JavaFX
• 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
JavaFX Animation Support
HTML5 & JavaFX
HTML5 Animation Support
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.
3D Support
HTML5 & JavaFX
• 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
WebGL
HTML5 & JavaFX
Feature JavaFX WebGL three.js
Light 7 2
Built-in Shapes 25 4
three.js vs. JavaFX 3D
WebGL – no JavaScript libariesOnly triangle meshesNo picking API, lines, etc. (currently)
JavaFXHighlevel API – use jogl for OpenGL capabilities.
HTML5 & JavaFX
• 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.
Performance Tuning
http://www.html5rocks.com/en/tutorials/speed/static-mem-pools
Integration
HTML5 & JavaFX
• CSS for skinning components.• WebView for rendering HTML5 content.• SVG rendering support.
Integrating JavaFX & HTML5
HTML5 & JavaFX
• 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.
JavaFX CSS Control Skinning
HTML5 & JavaFX
JavaFX CSS Control Skinning
JavaFX
HTML5
HTML5 & JavaFX
JavaFX CSS Control Skinning
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
HTML5 & JavaFX
• 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.
WebView Overview
HTML5 & JavaFX
Bidirectional communication:• JavaScript code can call Java code from WebView.• Java code can invoke JavaScript methods.
WebView Integration
HTML5 & JavaFX
WebView Debugging (Secret)
Response will be JSON.
HTML5 & JavaFX
• 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.)
Integrating WebView
HTML5 & JavaFX
SVG & JavaFX
HTML5 & JavaFX
• 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.
Conclusion
Summary
• Email contact: • [email protected]
• 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:
References