JavaFX Versus HTML5 - JavaOne 2014

12,558 views

Published on

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.

Published in: Software
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
12,558
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
178
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide
  • [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 -
  • 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.
  • Usage of HTML5 is different.
  • JavaFX:
    AIFF (containing uncompressed PCM)
    WAV (containing uncompressed PCM)
    MPEG-4 (containing ACC audio)

  • JavaFX Versus HTML5 - JavaOne 2014

    1. 1. JavaFX Versus HTML5 Ryan Cuprak, Dassault Systemès David Grieve, Oracle
    2. 2. Agenda • Demo Application • Technical Comparison • JavaFX in Perspective • HTML5 in Perspective • Analysis • Integration • Summary Both designed and engineered using Dassault Systèmes CATIA software! https://github.com/rcuprak/n34sailor
    3. 3. Demo Application
    4. 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. 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. 6. Demo Application What type of demo application? • Mobile – using HTML5 and Apache Cordova • Apps not websites! • HTML5 enables app development • Excitement is around app development • Rich user experiences • Not talking about JSF + HTML5
    7. 7. Demo Application What type of demo application? Not this type of web app!
    8. 8. Demo Application Sailboat Racing Start/Finish
    9. 9. Demo Application Architecture Interface Application Entities Infrastructure Apache Cordova EJB JPA Entities JPA JavaFX JAX-RS WebSocket JMS CDI
    10. 10. Demo Application Sailboat Racing Overview • Committee boat sets the course and announces it via radio. • Boats register via radio specifying their class. • Start sequence for class: • Warning horn is sounded • Start horn is sounded (boats cross start line) • Start sequence repeated for next class. • Committee boat monitors progress and weather. • Race course altered if wind dies or conditions deteriorate. • Finish time for each boat is registered at the end of the race • Final results are calculated.
    11. 11. Mobile Overview Native HTML5 Apps • Single Page Application (SPA) wrapped in Native application. • Native application displays a WebView – embedded browser. • Logic: • JavaScript • JavaScript platform extensions • UI • HTML5 markup • SVG • Canvas • WebGL • All assets are bundled with the application.
    12. 12. Mobile Overview Native HTML5 vs. Web Apps HTTP Session JSF/JSP/Facelets
    13. 13. Demo Application UI Mockup
    14. 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. 15. Mobile Overview Framework License jQuery Mobile http://jquerymobile.com MIT Sencha Touch http://sencha.com Commercial(Free) & Open Source (GPLv3) Intel App Framework http://app-framework-software.intel.com MIT Ionic http://ionicframework.com MIT M-Project http://www.the-m-project.org MIT Kendo UI http://www.telerik.com Commercial Twitter Bootstrap 3 http://getbootstrap.com MIT Mobile Frameworks
    16. 16. Mobile Overview Secha Architect
    17. 17. Demo Application Material Differences • JavaFX • No camera integration • No GPS integration • Connectivity information (network availability/type) • HTML5 • UI layout • Background threading • Browser support – IndexDB
    18. 18. Technical Comparison
    19. 19. Technical Comparison High Level Overview • HTML5 • UI constructed using HTML5 markup • Logic implemented using JavaScript • Tooling: NetBeans • JavaFX • UI constructed using FXML • Logic implemented using Java • Tooling: NetBeans, Scene Builder 2
    20. 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. 21. Technical Comparison JavaFX: Controller Architecture
    22. 22. Technical Comparison JavaFX: UI Flow 1. JoinRace.fxml invokes confirmAction(ActionEvent) 2. RaceController sets the data on RaceController.
    23. 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. 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. 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. 26. Technical Comparison HTML5: UI Transitions Changing to another page: • Processing a page before rendering:
    27. 27. Technical Comparison HTML5: Apache Cordova + JQuery Mobile Initialization App “states” are different.
    28. 28. Technical Comparison HTML5: Loading Data JQuery Mobile – varies by JavaScript library
    29. 29. Technical Comparison HTML5: Using Knockout Using Bindings
    30. 30. Technical Comparison HTML5: Knockout Complications Converting data to JSON becomes more complicated:
    31. 31. Technical Comparison JavaFX: Data Binding Bound using @FXML @FXML void userNameEntered(ActionEvent)
    32. 32. Technical Comparison JavaFX: Binding Conditionally enable the login button
    33. 33. Technical Comparison Busy Indicator
    34. 34. Technical Comparison JavaFX: Busy Indicator
    35. 35. Technical Comparison JavaFX: Busy Indicator
    36. 36. Technical Comparison HTML5: Busy Indicator – Animation Markup
    37. 37. Technical Comparison HTML5: Busy Indicator – Animation with CSS3
    38. 38. Technical Comparison HTML5: Tables JQuery plug: Data Tables http://www.datatables.net
    39. 39. Technical Comparison HTML5: Tables
    40. 40. Technical Comparison JavaFX: Tables
    41. 41. Technical Comparison JavaFX: Tables
    42. 42. Technical Comparison Server Communication Client Java EE 7 App Server REST Request/Response Web Sockets Bidirectional Restful Web Service Web Socket Endpoint
    43. 43. Technical Comparison Server Communication • JavaFX • Not part of Java 8. • Websocket: Project Tyrus https://tyrus.java.net/index.html • REST: Project Jersey https://jersey.java.net • JSON Processing https://jsonp.java.net • HTML5 • REST – native support: • Xmlhttp – used to issue AJAX calls. • WebSocket – native support: • WebSocket – used to register callbacks and send data.
    44. 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. 45. Technical Comparison Java: REST Invocation Java Objects! Java API for JSON JAX-RS Client
    46. 46. Technical Comparison HTML5: REST Invocation
    47. 47. Technical Comparison HTML5: WebSocket Support
    48. 48. Technical Comparison JavaFX: WebSocket Support
    49. 49. Technical Comparison HTML5: Layout Challenges
    50. 50. Apache Cordova HTML5: Device Access
    51. 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. 52. JavaFX in Perspective
    53. 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. 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. 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. 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. 57. HTML5 in Perspective
    58. 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. 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. 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. 61. Technical Comparison
    62. 62. HTML5 & JavaFX Technical Comparison Agenda • Overview • Feature Support • Rendering APIs • Multimedia • Controls • Animation • 3D Comparison
    63. 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. 64. HTML5 & JavaFX Overview: HTML5 Limitations • JavaScript language • Browser challenges • Custom browser extensions • Concurrency • Time zone detection • Tooling challenges • Patent infringement/ IP theft.
    65. 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. 66. HTML5 & JavaFX JavaFX HTML5 Deployment Strategies Mac App Store ✔ ✔ Microsoft App Store ✔ ✔ Android Stores ✖ ✔ iTunes  ✔ Browser  ✔
    67. 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. 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. 69. HTML5 & JavaFX Rendering JavaFX HTML5 javafx.scene.Scene javafx.scene.canvas.Canvas SVG Canvas
    70. 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. 71. HTML5 & JavaFX Feature Integration JavaFX HTML5 Scene Canvas Video Audio Canvas SVG Video CSS Audio Feature Layout not integrated. 3D WebGL (3D)
    72. 72. HTML5 & JavaFX Feature Integration Video and Canvas integrated via layout.
    73. 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. 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. 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. 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. 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. 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. 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. 80. JavaFX & HTML5 Audio Codecs Support Matrix JavaFX HTML5 Chrome FireFox Safari IE ACC ✔ ✔  ✔ ✔ AIFF ✔ ✖ ✖ ✖ ✖ Ogg Opus ✖ ✔ ✔ ✖ ✖ Ogg Vorbis ✖ ✔ ✔ ✔ ✖ MP3 ✔ ✔  ✔ ✔ WAV PCM ✔ ✔ ✔ ✔ ✖ WebM ✖ ✖ ✔ ✖ ✖
    81. 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. 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. 83. HTML5 & JavaFX HTML5 Animation Support
    84. 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. 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. 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. 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. 88. Integration
    89. 89. HTML5 & JavaFX Integrating JavaFX & HTML5 • CSS for skinning components. • WebView for rendering HTML5 content. • SVG rendering support.
    90. 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. 91. HTML5 & JavaFX JavaFX CSS Control Skinning JavaFX HTML5
    92. 92. HTML5 & JavaFX JavaFX CSS Control Skinning
    93. 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. 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. 95. HTML5 & JavaFX WebView Integration Bidirectional communication: • JavaScript code can call Java code from WebView. • Java code can invoke JavaScript methods.
    96. 96. HTML5 & JavaFX WebView Debugging (Secret) Response will be JSON.
    97. 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. 98. HTML5 & JavaFX SVG & JavaFX
    99. 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. 100. Summary References • Email contact: • rcuprak@gmail.com • Twitter: @ctjava • Other Session: • Hybrid Mobile Development with Apache Cordova and Java EE 7 (TUT5276) • 50 EJB 3 Best Practices in 50 Minutes - CON1947 • Books:

    ×