Thanks to visit codestin.com
Credit goes to www.slideshare.net

Ryan Cuprak, profile picture
Uploaded byRyan Cuprak
PPTX, PDF14,894 views

JavaFX Versus HTML5 - JavaOne 2014

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.

Downloaded 207 times
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
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 UI Mockup
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
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
Technical Comparison JavaFX: Architecture with Controllers Login Map Weather Navigation Chat MainMen u Race Register Main fxml fxml fxml fxml fxml fxml fxml fxml
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> <a href=“info.html”> Info </a> info.html <html><body> <Info div id=“page”> Info </div> </body></html>
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
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>
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 Data JQuery Mobile – varies by JavaScript library
Technical Comparison HTML5: Using Knockout Using Bindings
Technical Comparison HTML5: Knockout Complications Converting data to JSON becomes more complicated:
Technical Comparison JavaFX: Data Binding Bound using @FXML @FXML void 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 Tables http://www.datatables.net
Technical Comparison HTML5: Tables
Technical Comparison JavaFX: Tables
Technical Comparison JavaFX: Tables
Technical Comparison Server Communication Client Java EE 7 App Server REST Request/Response Web Sockets Bidirectional Restful Web Service Web Socket Endpoint
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.
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 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
JavaFX in Perspective
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 in Perspective
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.
Technical Comparison
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
Integration
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 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 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 SVG & JavaFX
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:

More Related Content

PDF
[English version] JavaFX and Web Integration
byKazuchika Sekiya
 
PPTX
JavaFX 2 Using the Spring Framework
byStephen Chin
 
PDF
DataFX - JavaOne 2013
byHendrik Ebbers
 
PDF
JavaFX Enterprise (JavaOne 2014)
byHendrik Ebbers
 
PDF
Java EE 8: On the Horizon
byJosh Juneau
 
PDF
Building Java Desktop Apps with JavaFX 8 and Java EE 7
byBruno Borges
 
PDF
Modern web application development with java ee 7
byShekhar Gulati
 
PPT
Developing modular Java applications
byJulien Dubois
 
[English version] JavaFX and Web Integration
byKazuchika Sekiya
 
JavaFX 2 Using the Spring Framework
byStephen Chin
 
DataFX - JavaOne 2013
byHendrik Ebbers
 
JavaFX Enterprise (JavaOne 2014)
byHendrik Ebbers
 
Java EE 8: On the Horizon
byJosh Juneau
 
Building Java Desktop Apps with JavaFX 8 and Java EE 7
byBruno Borges
 
Modern web application development with java ee 7
byShekhar Gulati
 
Developing modular Java applications
byJulien Dubois
 

What's hot

PDF
Java EE Revisits GoF Design Patterns
byMurat Yener
 
PPT
Java EE and Spring Side-by-Side
byReza Rahman
 
PPT
What's New in WebLogic 12.1.3 and Beyond
byOracle
 
PDF
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
byBaruch Sadogursky
 
PDF
The State of Wicket
byMartijn Dashorst
 
PPT
Wicket Introduction
byEyal Golan
 
PDF
JavaOne 2011: Migrating Spring Applications to Java EE 6
byBert Ertman
 
PDF
jDays2015 - JavaEE vs. Spring Smackdown
byMert Çalışkan
 
PDF
Wicket 10 years and beyond
byMartijn Dashorst
 
PDF
Whats up with wicket 8 and java 8
byMartijn Dashorst
 
PDF
JavaCro'15 - Java EE 8 - An instant snapshot - David Delabassee
byHUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
PDF
Html5 with Vaadin and Scala
byJoonas Lehtinen
 
PPTX
React Vs AnagularJS
bydeepakpatil84
 
PPTX
Java EE vs Spring Framework
byRohit Kelapure
 
PDF
Java Modularity: the Year After
bySander Mak (@Sander_Mak)
 
PDF
JavaCro'14 - Vaadin web application integration for Enterprise systems – Pete...
byHUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
PDF
Java APIs- The missing manual (concurrency)
byHendrik Ebbers
 
PPTX
Frameworks in java
byDarshan Patel
 
PDF
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
byDavid Delabassee
 
PPT
Testing Java EE Applications Using Arquillian
byReza Rahman
 
Java EE Revisits GoF Design Patterns
byMurat Yener
 
Java EE and Spring Side-by-Side
byReza Rahman
 
What's New in WebLogic 12.1.3 and Beyond
byOracle
 
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
byBaruch Sadogursky
 
The State of Wicket
byMartijn Dashorst
 
Wicket Introduction
byEyal Golan
 
JavaOne 2011: Migrating Spring Applications to Java EE 6
byBert Ertman
 
jDays2015 - JavaEE vs. Spring Smackdown
byMert Çalışkan
 
Wicket 10 years and beyond
byMartijn Dashorst
 
Whats up with wicket 8 and java 8
byMartijn Dashorst
 
JavaCro'15 - Java EE 8 - An instant snapshot - David Delabassee
byHUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
Html5 with Vaadin and Scala
byJoonas Lehtinen
 
React Vs AnagularJS
bydeepakpatil84
 
Java EE vs Spring Framework
byRohit Kelapure
 
Java Modularity: the Year After
bySander Mak (@Sander_Mak)
 
JavaCro'14 - Vaadin web application integration for Enterprise systems – Pete...
byHUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
Java APIs- The missing manual (concurrency)
byHendrik Ebbers
 
Frameworks in java
byDarshan Patel
 
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
byDavid Delabassee
 
Testing Java EE Applications Using Arquillian
byReza Rahman
 

Viewers also liked

PPTX
JavaFX and HTML5 - Like Curds and Rice
byStephen Chin
 
PPTX
Moving to the Client - JavaFX and HTML5
byStephen Chin
 
PDF
Designing a JavaFX Mobile application
byFabrizio Giudici
 
PDF
Building RIA Applications with JavaFX
byMax Katz
 
PDF
JavaFX Advanced
byPaul Bakker
 
PPTX
JavaOne 2013: Organizing Your Local Community
byRyan Cuprak
 
PPTX
Java script nirvana in netbeans [con5679]
byRyan Cuprak
 
PPTX
JavaFX on Mobile (by Johan Vos)
byStephen Chin
 
PPTX
Developing in the Cloud
byRyan Cuprak
 
PDF
JavaFX Layout Secrets with Amy Fowler
byStephen Chin
 
PDF
JavaFX in Action (devoxx'16)
byAlexander Casall
 
PPTX
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
byRyan Cuprak
 
PPTX
Java EE 8 Update
byRyan Cuprak
 
PPTX
Hybrid Mobile Development with Apache Cordova and
byRyan Cuprak
 
PPTX
Batching and Java EE (jdk.io)
byRyan Cuprak
 
PPTX
Jms deep dive [con4864]
byRyan Cuprak
 
PPTX
JavaFX 2 and Scala - Like Milk and Cookies (33rd Degrees)
byStephen Chin
 
PPTX
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
byRyan Cuprak
 
PPTX
Top 50 java ee 7 best practices [con5669]
byRyan Cuprak
 
PPTX
50 EJB 3 Best Practices in 50 Minutes - JavaOne 2014
byRyan Cuprak
 
JavaFX and HTML5 - Like Curds and Rice
byStephen Chin
 
Moving to the Client - JavaFX and HTML5
byStephen Chin
 
Designing a JavaFX Mobile application
byFabrizio Giudici
 
Building RIA Applications with JavaFX
byMax Katz
 
JavaFX Advanced
byPaul Bakker
 
JavaOne 2013: Organizing Your Local Community
byRyan Cuprak
 
Java script nirvana in netbeans [con5679]
byRyan Cuprak
 
JavaFX on Mobile (by Johan Vos)
byStephen Chin
 
Developing in the Cloud
byRyan Cuprak
 
JavaFX Layout Secrets with Amy Fowler
byStephen Chin
 
JavaFX in Action (devoxx'16)
byAlexander Casall
 
Combining R With Java For Data Analysis (Devoxx UK 2015 Session)
byRyan Cuprak
 
Java EE 8 Update
byRyan Cuprak
 
Hybrid Mobile Development with Apache Cordova and
byRyan Cuprak
 
Batching and Java EE (jdk.io)
byRyan Cuprak
 
Jms deep dive [con4864]
byRyan Cuprak
 
JavaFX 2 and Scala - Like Milk and Cookies (33rd Degrees)
byStephen Chin
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
byRyan Cuprak
 
Top 50 java ee 7 best practices [con5669]
byRyan Cuprak
 
50 EJB 3 Best Practices in 50 Minutes - JavaOne 2014
byRyan Cuprak
 

Similar to JavaFX Versus HTML5 - JavaOne 2014

PPTX
Moving to the Client - JavaFX and HTML5
byStephen Chin
 
PPTX
Mobile Web Apps
byAthhar Ahamed
 
PDF
Workshop HTML5+PhoneGap by Ivano Malavolta
byCommit University
 
PDF
HTML5 Technical Executive Summary
byGilad Khen
 
KEY
Mobile ECM with JavaScript - JSE 2011
byNuxeo
 
PDF
HTML5: the new frontier of the web
byIvano Malavolta
 
PDF
Hybrid mobile apps
byErik Paulsson
 
PPTX
Mobile Web Apps and the Intel® XDK
byIntel® Software
 
PPTX
Front-end technologies for Wonderful User Experience through Websites
byReady Bytes Software labs
 
PPTX
Cross platform mobile development - you tube videos
byColin Eberhardt
 
PPT
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
byStephen Chin
 
PDF
Building Cross Platform Mobile Web Apps
byJames Pearce
 
PPTX
Mobile applications for SharePoint using HTML5
byChristian Heindel
 
PDF
Coding for Desktop and Mobile with HTML5 and Java EE 7
byPetr Jiricka
 
PDF
Bridge-Stage Framework for the Smartphone Application Development using HTML5
byijsrd.com
 
PPTX
Front End Development | Introduction
byJohnTaieb
 
PPTX
Moving To The Client - JavaFX and HTML5
byStephen Chin
 
PDF
HTML5 Can't Do That
byNathan Smith
 
PDF
Desarrollo de apps multiplataforma con tecnologías web
bySoftware Guru
 
PDF
Sg conference multiplatform_apps_adam_stanley
byn_adam_stanley
 
Moving to the Client - JavaFX and HTML5
byStephen Chin
 
Mobile Web Apps
byAthhar Ahamed
 
Workshop HTML5+PhoneGap by Ivano Malavolta
byCommit University
 
HTML5 Technical Executive Summary
byGilad Khen
 
Mobile ECM with JavaScript - JSE 2011
byNuxeo
 
HTML5: the new frontier of the web
byIvano Malavolta
 
Hybrid mobile apps
byErik Paulsson
 
Mobile Web Apps and the Intel® XDK
byIntel® Software
 
Front-end technologies for Wonderful User Experience through Websites
byReady Bytes Software labs
 
Cross platform mobile development - you tube videos
byColin Eberhardt
 
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
byStephen Chin
 
Building Cross Platform Mobile Web Apps
byJames Pearce
 
Mobile applications for SharePoint using HTML5
byChristian Heindel
 
Coding for Desktop and Mobile with HTML5 and Java EE 7
byPetr Jiricka
 
Bridge-Stage Framework for the Smartphone Application Development using HTML5
byijsrd.com
 
Front End Development | Introduction
byJohnTaieb
 
Moving To The Client - JavaFX and HTML5
byStephen Chin
 
HTML5 Can't Do That
byNathan Smith
 
Desarrollo de apps multiplataforma con tecnologías web
bySoftware Guru
 
Sg conference multiplatform_apps_adam_stanley
byn_adam_stanley
 

More from Ryan Cuprak

PPTX
Jakarta EE Test Strategies (2022)
byRyan Cuprak
 
PPTX
DIY Home Weather Station (Devoxx Poland 2023)
byRyan Cuprak
 
PPTX
Why jakarta ee matters (ConFoo 2021)
byRyan Cuprak
 
PDF
Polygot Java EE on the GraalVM
byRyan Cuprak
 
PPTX
Exploring Java Heap Dumps (Oracle Code One 2018)
byRyan Cuprak
 
PPTX
Node.js Development with Apache NetBeans
byRyan Cuprak
 
PPTX
Preparing for java 9 modules upload
byRyan Cuprak
 
PPTX
Faster Java EE Builds with Gradle
byRyan Cuprak
 
PPTX
Java EE 8
byRyan Cuprak
 
PPTX
Faster Java EE Builds with Gradle
byRyan Cuprak
 
PPTX
Containerless in the Cloud with AWS Lambda
byRyan Cuprak
 
PPTX
Faster java ee builds with gradle [con4921]
byRyan Cuprak
 
Jakarta EE Test Strategies (2022)
byRyan Cuprak
 
DIY Home Weather Station (Devoxx Poland 2023)
byRyan Cuprak
 
Why jakarta ee matters (ConFoo 2021)
byRyan Cuprak
 
Polygot Java EE on the GraalVM
byRyan Cuprak
 
Exploring Java Heap Dumps (Oracle Code One 2018)
byRyan Cuprak
 
Node.js Development with Apache NetBeans
byRyan Cuprak
 
Preparing for java 9 modules upload
byRyan Cuprak
 
Faster Java EE Builds with Gradle
byRyan Cuprak
 
Java EE 8
byRyan Cuprak
 
Faster Java EE Builds with Gradle
byRyan Cuprak
 
Containerless in the Cloud with AWS Lambda
byRyan Cuprak
 
Faster java ee builds with gradle [con4921]
byRyan Cuprak
 

Recently uploaded

PPTX
Importance of Oracle E-Business Suite Software Solution – A Conacent Consulti...
byConacent Consulting
 
PPTX
Comprehensive Minutes of Meeting for Effective Business Communication
byEHA Soft Solutions
 
PDF
The Future of Payroll Automation, Compliance and Employee Experience
byCRMLeaf
 
PPTX
Streamline Projects with the Best Contractor Management Software
bySHEQ Network Limited
 
PPTX
Unlocking ARVR Game Development Journey From Beginer To Pro.pptx
byMaria Thomas
 
PDF
NewMind AI Weekly Chronicles September ’25 Week III
byNewMind AI
 
PDF
Quick Look: How to File GSTR-3B Form with the Support and Guidance of Gen GST...
bySAG Infotech
 
PDF
Introduction to MCP and A2A Protocols: Enabling Agent Communication
byMaxim Salnikov
 
PPTX
AEM UG Presentation - Midwest Chapter Sep 2025 - AEM and AI.pptx
byrwinterpacht1
 
PDF
7 Reasons Why Digital Forms Are Better Than Fillable PDFs.pdf
bydmorin3
 
PDF
Rethinking stable teams: A practitioner's guide to dynamic reteaming
byChris Smith
 
PDF
How to Use your Existing Observability tools as a SIEM
byVictoriaMetrics
 
PDF
Top Crypto Exchange Development Companies in 2025 and the Secrets Behind Thei...
bydaniel jt
 
PPTX
Salesforce and xero success the integration your business needs.pptx
byKandisaTechnologiesS
 
PPTX
SIH2025-IDEA-PPT-1.pptx.................
byarjun220306
 
PDF
Modernize Finance Using Dynamics 365 Business Central
byNavision India
 
PPTX
UNIT- 4 REINFORCEMENT LEARNING IN MACHINE LEARNING.pptx
byishasingh561425
 
PPTX
Amazon DocumentDB Best Practices (with MongoDB).pptx
byikbalpro1995
 
PDF
Azure DevOps Update: nieuws en best practices september 2025
byDelta-N
 
PPTX
Amazon DocumentDB - Monitoring, Auditing, and Alarms ID Template.pptx
byikbalpro1995
 
Importance of Oracle E-Business Suite Software Solution – A Conacent Consulti...
byConacent Consulting
 
Comprehensive Minutes of Meeting for Effective Business Communication
byEHA Soft Solutions
 
The Future of Payroll Automation, Compliance and Employee Experience
byCRMLeaf
 
Streamline Projects with the Best Contractor Management Software
bySHEQ Network Limited
 
Unlocking ARVR Game Development Journey From Beginer To Pro.pptx
byMaria Thomas
 
NewMind AI Weekly Chronicles September ’25 Week III
byNewMind AI
 
Quick Look: How to File GSTR-3B Form with the Support and Guidance of Gen GST...
bySAG Infotech
 
Introduction to MCP and A2A Protocols: Enabling Agent Communication
byMaxim Salnikov
 
AEM UG Presentation - Midwest Chapter Sep 2025 - AEM and AI.pptx
byrwinterpacht1
 
7 Reasons Why Digital Forms Are Better Than Fillable PDFs.pdf
bydmorin3
 
Rethinking stable teams: A practitioner's guide to dynamic reteaming
byChris Smith
 
How to Use your Existing Observability tools as a SIEM
byVictoriaMetrics
 
Top Crypto Exchange Development Companies in 2025 and the Secrets Behind Thei...
bydaniel jt
 
Salesforce and xero success the integration your business needs.pptx
byKandisaTechnologiesS
 
SIH2025-IDEA-PPT-1.pptx.................
byarjun220306
 
Modernize Finance Using Dynamics 365 Business Central
byNavision India
 
UNIT- 4 REINFORCEMENT LEARNING IN MACHINE LEARNING.pptx
byishasingh561425
 
Amazon DocumentDB Best Practices (with MongoDB).pptx
byikbalpro1995
 
Azure DevOps Update: nieuws en best practices september 2025
byDelta-N
 
Amazon DocumentDB - Monitoring, Auditing, and Alarms ID Template.pptx
byikbalpro1995
 

JavaFX Versus HTML5 - JavaOne 2014

  • 1.
    JavaFX Versus HTML5 Ryan Cuprak, Dassault Systemès David Grieve, Oracle
  • 2.
    Agenda • DemoApplication • 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.
  • 4.
    Demo Application Whynot 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 Whattype 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 Whattype of demo application? Not this type of web app!
  • 8.
    Demo Application SailboatRacing 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 SailboatRacing 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 NativeHTML5 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 NativeHTML5 vs. Web Apps HTTP Session JSF/JSP/Facelets
  • 13.
  • 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 FrameworkLicense 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.
  • 17.
    Demo Application MaterialDifferences • JavaFX • No camera integration • No GPS integration • Connectivity information (network availability/type) • HTML5 • UI layout • Background threading • Browser support – IndexDB
  • 18.
  • 19.
    Technical Comparison HighLevel 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.
  • 34.
  • 35.
  • 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.
  • 40.
  • 41.
  • 42.
    Technical Comparison ServerCommunication Client Java EE 7 App Server REST Request/Response Web Sockets Bidirectional Restful Web Service Web Socket Endpoint
  • 43.
    Technical Comparison ServerCommunication • 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.
  • 47.
    Technical Comparison HTML5:WebSocket Support
  • 48.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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: • [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:

Editor's Notes

  • #12 [Michael] 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: Back button URL bar History Shortcuts The user cannot escape from your application. You code the logic of the application in JavaScript -
  • #16 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.
  • #60 Usage of HTML5 is different.
  • #79 JavaFX: AIFF (containing uncompressed PCM) WAV (containing uncompressed PCM) MPEG-4 (containing ACC audio)