JavaFX Versus HTML5

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


• 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


JavaFX: Architecture with Controllers

MainMenu Race

Weather NavigationMapLogin Chat

Register

Main

fxmlfxmlfxmlfxml

fxml

fxml

fxmlfxml


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>

info.html<html><body><div id=“page”>

Info</div></body></html>

<a href=“info.html”>Info </a>

Info


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.


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>


HTML5: UI Transitions

Changing to another page:

• Processing a page before rendering:


HTML5: Apache Cordova + JQuery Mobile Initialization

App “states” are different.


HTML5: Loading DataJQuery Mobile – varies by JavaScript library


HTML5: Using Knockout

Using Bindings


Converting data to JSON becomes more complicated:

HTML5: Knockout Complications


JavaFX: Data BindingBound using

@FXML

@FXMLvoid userNameEntered(ActionEvent)


JavaFX: Binding

Conditionally enable the login button


Busy Indicator


JavaFX: Busy Indicator


JavaFX: Busy Indicator


HTML5: Busy Indicator – Animation Markup


HTML5: Busy Indicator – Animation with CSS3


HTML5: Tables

JQuery plug: Data Tableshttp://www.datatables.net


HTML5: Tables


JavaFX: Tables


JavaFX: Tables

Client


Server Communication

Java EE 7 App Server

REST

Web Sockets

Request/Response

Bidirectional

Restful Web Service

Web Socket Endpoint


• 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

https://tyrus.java.net/index.html





https://jersey.java.net/



mailto:https://jsonp.java.net

mailto:https://jsonp.java.net


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


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


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

http://www.robovm.org/

http://www.robovm.org/

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

http://www.glge.org/

http://www.scenejs.org/

http://www.cubicvr.org/

http://www.threejs.org/

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

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

• 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

mailto:[email protected]

Date post:	03-Jan-2016
Category:	Documents
Upload:	wyoming-sparks
View:	171 times
Download:	0 times

JavaFX Versus HTML5

Documents