1. JavaFX Versus HTML5 Ryan Cuprak, Dassault Systemès David Grieve, Oracle

2. Agenda Demo Application Technical Comparison JavaFX in Perspective HTML5 in Perspective Analysis Integration Summary https://github.com/rcuprak/n34sailor Both designed and engineered using Dassault Systèmes CATIA software!

3. Demo Application

4. 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?

5. 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/BlueToo th Background

6. 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?

7. Demo Application What type of demo application? Not this type of web app!

8. Demo Application Sailboat Racing 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 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

11. 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

12. Mobile Overview Native HTML5 vs. Web Apps HTTP Session JSF/JSP/Facelets

13. Demo Application UI Mockup

14. 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/BlackBe rry) JQuery JQuery Mobile Knockout JS Technologies

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. Mobile Overview Secha Architect

17. Demo Application JavaFX No camera integration No GPS integration Connectivity information (network availability/type) HTML5 UI layout Background threading Browser support – IndexDB Material Differences

18. Technical Comparison

19. 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

20. Technical Comparison JavaFX: Architecture with Controllers MainMen u Race Weather Navigation Map Login Chat Register Main 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 Menu index.html Menu menu.html Info menu.html Info info.html Info info.html Info Info Info

24. Technical Comparison HTML5: Page Flow index.html account.html joinRace.html login.htmlmenu.html register.html results.html welcome.html chat.html info.html tracking.html weather.

25. Technical Comparison HTML5: UI Flow App.js joinRace.html Race.js - getRaces() - pageBeforeJoinRaces() - joinSelectedRace() - pageBeforeShow() - pageChange() menu.html 1.menu.html - Join Race 2.app.js – pageChange() 3.app.js – pageBeforeShow() -> Race.js getRaces() 4.joinRace.html - Confirm

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 Converting data to JSON becomes more complicated: HTML5: Knockout Complications

31. Technical Comparison JavaFX: Data Binding Bound using @FXML @FXML void userNameEntered(ActionEvent) @FXML void userNameEntered(ActionEvent)

32. Technical Comparison JavaFX: Binding Conditionally enable the login button

33. Technical Comparison Busy Indicator

34. Technical Comparison JavaFX: Busy Indicator

35. Technical Comparison JavaFX: Busy Indicator

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. Technical Comparison HTML5: Tables

40. Technical Comparison JavaFX: Tables

41. Technical Comparison JavaFX: Tables

42. Client Technical Comparison Server Communication Java EE 7 App Server REST Web Sockets Request/Response Bidirectional Restful Web Service Web Socket Endpoint

43. Technical Comparison JavaFX Not part of Java 8. Websocket: Project Tyrus https://tyrus.java.net/index.html REST: Project Jersey https://jersey.java.net JSON Processing https://jsonp.java.net HTML5 REST – native support: Xmlhttp – used to issue AJAX calls. WebSocket – native support: WebSocket – used to register callbacks and send data. Server Communication

44. Technical Comparison HTML5: WebSocket Support http://caniuse.com/#search=webso Android VersionDateWebSocketDeployed 4.4 JellyBeanJuly 24, 2013No26.5% (80% can’t) 4.4 KitKatOctober 31, 2013Yes20% (8/2014)

45. Technical Comparison Java: REST Invocation Java Objects! Java API for JSON JAX-RS Client

46. Technical Comparison HTML5: REST Invocation

47. Technical Comparison HTML5: WebSocket Support

48. Technical Comparison JavaFX: WebSocket Support

49. Technical Comparison HTML5: Layout Challenges

50. Apache Cordova HTML5: Device Access

51. Technical Comparison HTML5 Development Challenges Null versus undefined Different approaches to defining “classes” Global namespace IDE coding support Threading – Web Workers cannot update the DOM IndexDB support/access Recovering from fatal errors (application “hung”) JavaFX Development Challenges Mobile support Interaction with hardware Challenges

52. JavaFX in Perspective

53. HTML5 & JavaFX JavaFX is irrelevant with the advent of HTML5. Java on the desktop is dead. JavaFX and HTML5 are mutually exclusive. Java does not have good graphics performance. JavaFX is only for rich media applications – not desktop apps. JavaFX is meant for only building games and mobile apps. You would never use JavaFX in a business application. JavaFX Misconceptions

54. HTML5 & JavaFX Java3D, JAI, and JMF are dead. Java3D, JAI, and JMF have no relationship to JavaFX. JavaFX is not like these technologies: Cross-platform – features are available everywhere. Integrated into the JRE – no separate download/versioning/etc. JavaFX includes support for common video and audio formats. Legacy Technologies

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 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

57. HTML5 in Perspective

58. 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

59. 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

60. HTML5 & JavaFX Many mobile apps are hybrids: Native application shell with HTML5 content. PhoneGap aka Apache Cordova Native application development dominates mobile: Mobile phones, while powerful, are not as powerful as 2 GHz i3. Mobiles devices are RAM limited – garbage collection and RAM Android support native apps (C/C++) – NDK. Performance/usability issues - FaceBook went native. HTML5 Applied

61. Technical Comparison

62. HTML5 & JavaFX Overview Feature Support Rendering APIs Multimedia Controls Animation 3D Comparison Technical Comparison Agenda

63. 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

64. HTML5 & JavaFX JavaScript language Browser challenges Custom browser extensions Concurrency Time zone detection Tooling challenges Patent infringement/ IP theft. Overview: HTML5 Limitations

65. 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

66. HTML5 & JavaFX JavaFXHTML5 Mac App Store ✔✔ Microsoft App Store ✔✔ Android Stores ✖✔ iTunes ✔ Browser ✔ Deployment Strategies

67. HTML5 & JavaFX FeatureIEChromeFireFoxSafari CanvasIE 926215.1 WebGL ✖ 26 Web Sockets 1026216.0 SVG926215.1 Offline Apps 1026215.1 Animation1026216.0 HTML5 Feature Support

68. 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

69. HTML5 & JavaFX Rendering javafx.scene.Scene javafx.scene.canvas.Canvas SVG Canvas JavaFXHTML5

70. 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

71. HTML5 & JavaFX Feature Integration Scene Canvas Video Audio Canvas SVG CSS Audio Video JavaFXHTML5 Feature Layout not integrated. 3D WebGL (3D)

72. HTML5 & JavaFX Feature Integration Video and Canvas integrated via layout.

73. HTML5 & JavaFX SVG – 2D vector image support (.svg) XML based: supports vector, raster, and text. SVG 1.0 release in 2001. SVG 2.0 targeted for 8/2014. Can be compressed using gzip. Browser support is not robust IE8 didn’t provide SVG support Modules lacking full support: Font, Filter, Clip, Cursor Include in HTML using,, or SVG

74. 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

75. 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

76. HTML5 & JavaFX HTML5 No native “grid” data grid component (JTable/Excel equivalent) You cannot drag and drop 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

77. HTML5 & JavaFX Video/audio codec support determined by patents. Oracle licenses formats for JavaFX. HTML5 supports no audio/video codecs by default. JavaFX provides a known set of codecs. Built on top of Gstreamer (http://www.gstreamer.com) Multimedia Support

78. HTML5 & JavaFX JavaFXHTML5 ChromeFireFoxSafariIE FLV (VP6 video/mp3 audio) ✔✔✔✖✖ H.264 ✔✔✔✔✔ Theora ✖✔✔✖✖ VP8 (WebM) ✖✔✔✖✖ VP9 (WebM) ✖✔✖✖✖ Video Codecs Support Matrix

79. 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

80. JavaFX & HTML5 JavaFXHTML5 ChromeFireFoxSafariIE ACC ✔✔✔✔ AIFF ✔✖✖✖✖ Ogg Opus ✖✔✔✖✖ Ogg Vorbis ✖✔✔✔✖ MP3 ✔✔✔✔ WAV PCM ✔✔✔✔✖ WebM ✖✖✔✖✖ Audio Codecs Support Matrix

81. 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

82. 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

83. HTML5 & JavaFX HTML5 Animation Support

84. HTML5 & JavaFX JavaFX 8 and HTML5 WebGL both support 3D. JavaFX 8 3D support: Built on top of OpenGL/Direct 3D Provides a built-in scene graph Decora – DSL Shader language HTML5 JavaFX WebView does not support WebGL. JavaFX 3D – 3D without the overhead. 3D Support

85. 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.orghttp://www.glge.org SceneJS: http://www.scenejs.orghttp://www.scenejs.org CubicVR: http://www.cubicvr.orghttp://www.cubicvr.org Three.js: http://www.threejs.orghttp://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

86. HTML5 & JavaFX FeatureJavaFXWebGL three.js Light72 Built-in Shapes254 three.js vs. JavaFX 3D WebGL – no JavaScript libaries Only triangle meshes No picking API, lines, etc. (currently) JavaFX Highlevel API – use jogl for OpenGL capabilities.

87. 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

88. Integration

89. HTML5 & JavaFX CSS for skinning components. WebView for rendering HTML5 content. SVG rendering support. Integrating JavaFX & HTML5

90. 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

91. HTML5 & JavaFX JavaFX CSS Control Skinning JavaFX HTML5

92. HTML5 & JavaFX JavaFX CSS Control Skinning

93. HTML5 & JavaFX HTML5 PropertyHTML5 ValueJavaFX PropertyJavaFX 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-radius8px-fx-border-radius8px box-shadowrgba(0,0,0,1) 0 1px 0 -fx-effectdropshadow(one- pass-box,black, 0, 0.0, 0, 1) JavaFX CSS Control Skinning

94. 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

95. HTML5 & JavaFX Bidirectional communication: JavaScript code can call Java code from WebView. Java code can invoke JavaScript methods. WebView Integration

96. HTML5 & JavaFX WebView Debugging (Secret) Response will be JSON.

97. 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

98. HTML5 & JavaFX SVG & JavaFX

99. 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

100. Summary 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: References