2019-01 Java on JavaScript VMs

Transcript

1. 1 Java on JavaScript VMs Deploying Java Desktop and Mobile Applications on JavaScript Virtual Machines Ming Iu
2. 2 • Java programmers – Mostly enterprise server stuff – Web stuff • When was the last time you made a desktop program?
3. 3 What I’ve Been Doing • Writing an application that runs on PC, Mac, web, and on mobile – Problem: Java doesn't run everywhere • But I like Java – Found a way to write in Java – Deploy everywhere using JavaScript VMs • Overview of my experiences – What I’ve tried – What works, etc
4. 4 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
5. 5 PC Mac www iOS Android Java Cross-Platform Development is Hard C# Kotlin Swift ? ?
6. 6 Writing UIs is Hard • Simple Button OK • Text and icon • Extra space for internationalization • Long press and dragging • Keyboard support for accessibility • Touch support • Simultaneous keyboard/mouse/touch/stylus actions? • Scripting support for testing • High dpi and HDR support • Should look different when pressed • Different look when enabled/disabled • MVC syncing on data/state changes • Alignment and layout
7. 7 Writing UIs is hard • Lots of quirks of each UI framework that you have to learn – Do widgets have sizes after creation? After being added to the screen? In a later stage after layout? – How do you alter the default behavior of certain events? • Why learn it five times for five different frameworks?
8. 8 PC Mac www iOS Android Java Java Run Anywhere Activities
9. 9 More Reasons Why • Java UI stuff is lagging – Future of AWT / Swing / SWT / JavaFX? • Java desktop deployment is rarely done – Less documentation and tooling
10. 10 One UI to Rule Them All • My philosophy – No time to learn multiple UI systems – No time to rewrite code for each platform – HTML5 is available for all platforms • HTML5 skills will always be useful because of web – Learn HTML5 really well and use it everywhere
11. 11 Jank Off! • HTML5 UIs are janky and inconsistent? – Mac cultists who insist on native UIs with no jank are insane – Not even native applications on the Mac are consistent • Users know how to use websites, they can figure out how a web UI on multiple platforms
12. 12 But Does It Work? • Yes, yes it does. – I've deployed an app with a single code base across many platforms • It requires some UI / Java / JS expertise – Hopefully, it will get easier for others
13. 13 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
14. 14 The Goal • Write all code in Java • UI code in HTML5 – With Java instead of JavaScript • Deploy same code to all major platforms • How can we achieve this?
15. 15 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
16. 16 PC Mac www iOS Android Java JavaFX Web Browser GWT JS
17. 17 Deploy JavaFX’s WebKit Browser • Java actually contains a WebKit browser in JavaFX – Useful for migrating legacy AWT/Swing/SWT apps to web apps • Many modern features disabled – Sound, webgl, Intl
18. 18 JavaFX’s WebKit Browser • Java ↔ JavaScript bridge – Has good integration, but underdocumented • How does garbage collection work? – Missing efficient transfers of typed arrays etc. • Ported Elemental to map all JS objects to Java – Manipulate a web page from Java using DOM API – Made new Elemental alternative called DOMjnate • https://github.com/my2iu/Domjnate • Mostly works – Can even use the Java debugger etc
19. 19 JavaFX Create Browser class main extends Application { public void start(Stage stage) { BorderPane border = new BorderPane(); WebView webView = new WebView(); border.setCenter(webView); Scene scene = new Scene(border); stage.setScene(scene); stage.show(); WebEngine engine = webView.getEngine(); engine.load( new File("index.html").toURI().toURL().toExternalForm()); } }
20. 20 Manipulate DOM with Elemental Window win = (Window)GwtFxBridge.wrapJs( engine.executeScript("window")); Document doc = win.getDocument(); doc.getBody().setInnerHTML(“<div>Hi</div>”); Element div = doc.querySelector(“div”); div.setOnclick((evt) -> { div.setTextContent(“Clicked”); });
21. 21 Java VM JavaFX WebKit Nitro/ SquirrelFish/ JavaScriptCore JavaFX / WebKit bridge App Java Browser • Not true WebKit • JavaFX backend for rendering • If pushed hard, JavaFX has strange errors or dies – No fix?
22. 22 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
23. 23 PC Mac www iOS Android Java Java Translated to JavaScript GWT JS
24. 24 JavaScript SuxOrz? • No types = no performance? – Poor performance for heavy computation • Sandboxes – No file access – No foreign functions • API is bizarre – Some parts are very mature – Some parts are a joke (multi-threading, font handling, widgets, MVC, text entry with IMEs, etc) – New UI frameworks every year
25. 25 Java VM vs JavaScript VM • Performance is not bad actually – The top Java VM people work on Chrome's V8 VM – Has a low level semi-typed subset • Typed arrays, inferred types for classes and arrays – Still not great for very heavy computation • Floating point representation • Can use WebAssembly for heavy computation • VMs are reasonably robust – Used for servers and long-running client code
26. 26 GWT • Java → GWT → JavaScript → JavaScript VMs – Bizarre toolchain that no one uses • No JS language awfulness – Still have to deal with JS API awfulness
27. 27 GWT Issues • Google is not an enterprise company – People keep saying it's dead, but it works great • Documentation is years out of date – Most docs refer to stuff that no longer exists – No idea how to create a new GWT project – I modify an old version that I created using some docs I found in a forum post years ago • But once it works, it works fine – Occasionally need to reset caches and stuff
28. 28 Welcome to the JS Ecosystem • JS ecosystem heavily revolves around node.js – StackOverflow of programming ecosystems
29. 29 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
30. 30 PC Mac www iOS Android Java Cordova GWT JS Cordova
31. 31 Cordova • Apache Cordova – Previously PhoneGap – Deploy JavaScript apps on mobile platforms – Especially useful on iPhone • No garbage collected languages except for C# and JS • Cordova itself is primarily an Adobe project? – Maker of other “enterprise” software ecosystems like Adobe Flex
32. 32 Cordova AppDir www index.html ... config.xml • Export your GWT app to a web page – Dump web page in a directory – Run some magic Cordova commands – Get a runnable binary
33. 33 Cordova Flavour • Based on the node.js ecosystem • More of a modular build system – Plugins for different platforms – Plugins for different features
34. 34 Cordova Issues • Good getting started docs – Other docs are confusing – Often still need to learn Android/iOS, then how to do the same functionality in Cordova • Have you actually saved any time? • Lots of plugins for doing native stuff in JS – Written by JS programmers • JS async API limitations of iPhone and Android
35. 35 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
36. 36 PC Mac www iOS Android Java Node.js/Electron/nw.js GWT JS Node.js / Electron / nw.js
37. 37 Node.js (i.e. Electron + nw.js) • Node.js cross-platform JS server • Two variants – Electron • Used by VisualStudio Code, Atom, Slack, etc. – nw.js
38. 38 Node.js (i.e. Electron + nw.js) • nw.js has enterprise-quality devs by Intel – Good documentation that's very clear • Electron is made by GitHub – Documentation is sometimes marginally better than a list of method names
39. 39 Node.js (i.e. Electron + nw.js) • nw.js is easier to use • Just drop html files somewhere and start it up • Limited functionality, but well-explained, well thought-out – Some additional libraries available for common stuff • Electron is a bit of a pain • Have to write a separate loader to open up initial window • Has more libraries for doing tighter desktop integration – Often need to call in to separate boot process asynchronously to make certain library calls – Some standard HTML5 stuff like file access doesn't work • Need to use Electron APIs for working with it • Moving in direction of the node.js tooling rabbithole – Can't just put web files in a directory any more
40. 40 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
41. 41 PC Mac www iOS Android Java Custom Webview GWT JS WKWebView WKWebView WebView UWP ObjC ObjC Java C# !
42. 42 Why Custom Webview? • Deploying your own browser is big – Just use the native one • Webview abstractions like Cordova are limiting – Most plugins are iffy • Plugin documentation is barebones • Lots of docs for doing stuff natively – We're real programmers! – No need to learn how to wrangle Cordova to get some native feature • Read native docs and implement directly
43. 43 UWP • Microsoft supports JS as a first class language in UWP • But it's JS with some weird restrictions and some strange extra lifecycle management APIs that you must follow • Very good bridge with C# – If you can figure out the documentation
44. 44 UWP Problems • UWP can't be used to make “Windows” programs – No menu bars, no multi-window • UWP keeps changing – Hard to understand documentation – Edge is now moving to Blink
45. 45 WKWebView on Mac/iOS • Cordova annoying, Electron is too big • Safari is pretty fast, and has reasonable (though idiosyncratic) support for latest html5 stuff – Can use WKWebView to embed stuff – Asynchronous API to call into JS or out from JS • No easy means for passing large amounts of data – Mac users tend to lag the latest OS version by a year or two, even though it's free – Embedding process is sloppy, but can be worked around
46. 46 WebView on Android • Async API for calling into JS or out from JS – No easy means for passing large amounts of data – Weirdness around Android lifecycle it expects synchronous calls – Possible delays when switching activities? • Old webview has to unload before new one can start?
47. 47 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
48. 48 Preparing to Deploy JavaFX • It’s big – 110MB (30MB of WebKit, 10-20MB of JFX) • Compresses to about 50MB • At the time, had to build my own OpenJDK8 – Very annoying • Building JavaFX was even more annoying – Must dig through .jars to remove unneeded classes • Recently, JDK prebuilt binaries are available – Can use javapackager and modules to prune things • Launch4j to make executable file
49. 49 Preparing to Deploy Node.js • Around 80-90MB (40MB compressed) • Need to go through a separate rebranding step to rebrand everything as “MyApp” instead of “Electron/nw.js”
50. 50 Deployment • Java/JS VMs are self-contained – Just dump VM in a directory along with code – No .DLL registration needed • Deployment is easy, right? – .zip file is not good enough any more
51. 51 Deployment Windows Windows Store Mac WWW iOS Android $75/year code signing cert ($100 yellow pages) $19/$100 Microsoft Dev Account $100/year Apple Dev Account Free $100/year Apple Dev Account $25 Android Dev Account (.Net only for UWP) Objective-C or Swift JavaScript Objective-C or Swift Java or Kotlin Windows StoreMac Store or elsewhere App Store Play Store or elsewhere No sandbox (Medium sandbox for UWP) Light sandbox Heavy sandbox Heavy sandbox Medium sandbox
52. 52 Windows Installer • MS wants you to use Visual Studio, but manual creation of installer is possible • Tool called Wix to make MSI installers – Lots of documentation and XML to do something simple (1-2 weeks for an installer that just copies stuff into the Program Files directory) – It might be purposely complicated because the company makes money from consulting on how to build installers
53. 53 Windows Signing • If the installer is unsigned, – Browsers won’t let you download it – Windows won’t let you run it • Need to purchase a code signing certificate – Picked up a Comodo certificate from Tucows for around $100 – Requires a yellow pages listing (another $100) • People don’t really make Windows applications any more apparently – All code signing web pages are 1990s era stuff
54. 54 Windows Store for Win32 App • Creating a Windows Store installer is easy – Dump everything in a directory – Create a configuration file – Run a command-line tool to make upload package
55. 55 Mac Apps • Like MS, Apple really wants you to use Xcode • Mac has no installers – MacOS will “automatically” install things – Stale application caches will drive you insane during development • Signing from outside Xcode possible – Hard to find any docs on how to do this
56. 56 Mobile Stuff • I gave up and just used the IDE for packaging things for deployment
57. 57 Why? Approaches – JavaFX WebView – Java to JS • Cordova • Electron/Nw.js • Custom Webview Deploying Desktop Apps Conclusion
58. 58 PC Mac www iOS Android Java What I Use Now GWT JS WKWebView WKWebView WebView ObjC ObjC Java Electron C++
59. 59 JavaFX Cordova Electron Custom Webview Must compile to JS No Yes Yes Yes Access to native features Through Java If plugins available Some C++ messiness Custom code needed for each platform Synchornous API to native? Yes No Yes No Large data transfers to native? No No Yes No Up-to-date web engine? No Yes Yes Yes-ish Stability Ok Depends on plugins Good Good Expertise Needed Medium Medium Medium High Community Non-Existent Unskilled Depends Depends Size Very large Small Large Small Platform Win, Mac Android, iOS Win, Mac No Windows
60. 60 Ideal: Java with custom web engine and native compilers Must compile to JS No Access to native features Through Java or C++ Synchornous API to native? Yes Large data transfers to native? Yes Up-to-date web engine? Yes Stability Good Expertise Needed Low because of good docs and frameworks Community ? Size Configurable Platform All
61. 61 Conclusion • Java on JS VMs is viable – Shared UI code for everything – One codebase for everything – JS ecosystem isn't clean and well-engineered • Very vibrant though • Web didn't make desktop/mobile apps obsolete – Lots of things to learn to deploy client apps
62. 62 • Diagram of write once, run anywhere • Diagram of different toolkits, where they fit in – Flutter – Mono – LibGDX – Unity • Diagram of native UI and common Java code (the Google model) Just say this (no slide?)