1 / 100

JavaFX Versus HTML5

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

wyoming-sparks
Download Presentation

JavaFX Versus HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Demo Application

  4. Demo Application JavaFX replaces Swing Swing was a 1990s technology – different era Swing has significant shortcomings: • No support for touch • Hard to customize appearance • JTable feature poor with complex code • No support for animation • No data binding support • No support for animations • Some customization require changes to L&F classes Why not Swing?

  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/BlueTooth 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 JavaFX JAX-RS WebSocket Apache Cordova EJB Application JPA Entities Entities JMS CDI JPA Infrastructure

  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 Immersive App logic In JavaScript

  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/BlackBerry) JQuery JQuery Mobile Knockout JS Technologies

  15. Mobile Overview Mobile Frameworks Advice: Don’t reinvent the wheel! Also Angular can be used…

  16. Mobile Overview Secha Architect • Forces good MVC practices • Development similar to that in xCode, Android Studio • Costs $400 for a license

  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. Technical Comparison HTML5 • UI constructed using HTML5 markup • Logic implemented using JavaScript • Tooling: NetBeans JavaFX • UI constructed using FXML • Logic implemented using Java • Tooling: NetBeans, Scene Builder 2 High Level Overview

  20. Technical Comparison JavaFX: Architecture with Controllers fxml fxml fxml fxml fxml Login Map Weather Navigation Chat Main MainMenu Race fxml fxml fxml Register

  21. Technical Comparison JavaFX: Controller Architecture

  22. Technical Comparison JavaFX: UI Flow JoinRace.fxml invokes confirmAction(ActionEvent) 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> <div id=“page”> Info </div> </body></html> Info

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

  25. Technical Comparison HTML5: UI Flow menu.html joinRace.html App.js Race.js - pageBeforeShow() - pageChange() - getRaces() - pageBeforeJoinRaces() - joinSelectedRace() menu.html - <a id="raceMenu" onclick="getRaces();">Join Race</a> app.js – pageChange() app.js – pageBeforeShow() -> Race.jsgetRaces() 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 Converting data to JSON becomes more complicated: HTML5: Knockout Complications

  31. Technical Comparison JavaFX: Data Binding Bound using @FXML @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. Technical Comparison Server Communication Java EE 7 App Server Client REST Restful Web Service Request/Response Web Sockets Web Socket Endpoint Bidirectional

  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

  45. Technical Comparison Java Objects! Java: REST Invocation 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

More Related