1.
Java Everywhere Again
With DukeScript http://www.dukescript.com
@DukeScript

2.
Program Agenda
1st Cool Demo
Intro & Overview
2nd Cool Demo
Discussion
And so on...
1
2
3
4
5
2

3.
Demo
3
Write Once and Display Anywhere!

4.
GUI of Yesterday and Tomorrow
• Desktop applications (NetBeans Platform, Eclipse RCP)
– Not cool anymore
• Web applications (servlet, JSP, JSF, etc.)
– A bit too static
• Mobile applications
– Android is synonym for client side Java
• HTML5 applications
– HTML/CSS and JavaScript in the browser
– What should run on the server?
• Where is WORA?
4

5.
The Battle Rages On
5

6.
HTML5/CSS
• Most portable UI toolkit of today
– Any device with screen can render it
• 25-years of intensive use
– Robust, flexible
– A bit bloated
• Great tooling
– For UX designers
– Import/export assets
• Requires JavaScript!?
6

7.
Designer vs. Developer
7
Infographic by: Shane Snow. Shane Snow is an entrepreneur, writer, and recent Columbia MS/Digital Media graduate. Visit his personal site and follow him on Twitter @shanesnow.

8.
The JavaScript Problem
• Assembly language of today
– Like Z80, i8088 – cool programming “language” in 80-ties
• Runs everywhere
– Immediate availability in a browser
– Favorite target for other languages
• “WONTA”
– Write once and never touch again
• Tooling impossible
– Automatic refactorings in JavaScript!?
8

9.
The Java Situation
• WORA - Java vision in 1995
– Client side & embedded technology vs. ended up on servers
• Eating up gigabytes of memory => worse than JavaScript?
• Java browser plugins (to be) banned
• Java tooling is great
– Twenty years of heavy industrial usage
– Reliable code-completion, refactorings
– Enormous amount of libraries
– A bit verbose
• One language to rule them all
– Same language on server and client. Can Java do it?
9

10.
HTML5/CSS with Java (without JavaScript)
10

11.
Duke's Choice
Award 2014 goes
to DukeScript
11

12.
“DukeScript is the Lightweight
JavaFX I always dreamed of!”
– Stephen Chin, JavaOne M.C.
12

13.
Demo
13
Anatomy of DukeScript Sample

14.
Knockout.js
• Among four most popular JavaScript frameworks
• MVVC
– Don't touch your UI! Let it update itself!
●
Developers code. Designers play with CSS and HTML.
– Completely testable
●
Forget selenium! Unit testable!
• Revolutionary HTML/Java API
– More effective than plain JavaScript
●
Heavy use of annotation processors
– Initially may feel slightly upside down
14

15.
Effective Java API
• Eliminate getters and setters
– Describe just properties
– Generate the class via annotation processors
– 100% Java compatible
• Java to “JSON” bindings
– Convert Java models to JSON
– Expose SPI to bind to knockout.js & others
• Effective client/server JSON communication
– REST & JSON – more effective than in JavaScript
15

16.
Knockout 4 Java Bindings Architecture
16

17.
Demo: Knockout 4 Java
17
Coding & Testing for KO4J

18.
DukeScript's Highlights
• HTML/Java APIs
– Smooth integration of Java and HTML5
– NetBeans subproject
– Integrate any JavaScript library
• Java on any client
– Back to roots
– Excellent tooling
– Need runtime for iOS, Android, browsers
18

19.
Android & Java
• Dalvik VM
– Java language, different bytecode
– Subset of Java libraries
– Synonym for Java on client
• Specific UI
– WebView component
●
Asynchronous JavaScript execution
– Bridge Java / browser calls
19

20.
No Java on iOS!?
• “Apple bans Java on iOS”
– Not true. Bans dynamic code generation.
– Link everything statically!
• RoboVM
– Compiles to LLVM like Objective-C
– Uses Android non-GUI libs
●
Guarantees good compatibility
• Re-exposes Apple iOS APIs
– WebView
●
synchronous JavaScript execution
20

21.
No Java in Browsers
• Firefox & Chrome ban Java
– Claiming plugins == security holes
– Push towards JavaScript or Dart or asm.js, etc.
• Bck2Brwsr VM
– AOT and JIT to JavaScript – no plugins needed!
– Optimized for V8
– Naturally displays HTML
– Subset of OpenJDK libraries
• Plus Tea VM, Doppio...
21

22.
Demo: Tooling
22
Create, debug and deploy anywhere!

23.
Integrate any library
• Call JavaScript from Java
– Annotate a method with @JavaScriptBody annotation
– Write its implementation in JavaScript
– Synchronous & asynchronous callbacks
• Call Java from JavaScript
– Identify method with a FQN and type signature
●
r.@java.lang.Runnable::run()()
●
@java.lang.String::valueOf(I)(10)
– Synchronous callbacks
• Builds on long time existing industry standard
23

24.
Demo: Integrate a JS Library
24
Integration of 2D canvas

25.
REST and WebSockets and JSON
• Pluggable SPI for parsing JSON
– Browser implementation or org.json library
• REST calls @OnReceive annotation
– Generates boilerplate code
●
Method to initialize the call and asynchronously get result
– Browser's XMLHttpResource
– URLConnection and JSON parser
– Integration with Jersey – same code on client and server
• Web Sockets via @OnReceive annotation
– Native browser or Glassfish's Tyrus implementation
25

26.
Demo: REST
26
CRUD Demo Communication

27.
Type-safe JSON API
• Everyone wants to create own JSON API
– org.json, javax.json, even JDK!
– Type safety => verbose and reflection
• Use @Model annotation for manual JSON parsing
– Type-safe
– Reflection-less
• Set proper environment
– Use knockout4j archetype, remove ko4j
– Add ko-tyrus-ws
●
Includes Java based JSON parser
27

28.
Demo: Type-safe JSON Parsing
28
Parse JSON manually

29.
Debugging JavaScript/Java apps
• Is anything wrong in your @JavaScriptBody?
– Write a unit test
– Debug it in NetBeans
– Simulate browser environment
• Avatar.js
– Node APIs on top of JVM
– Debug it in NetBeans
29

30.
Demo: Debugging Mixed Apps
30
Java and JavaScript on the Stack

31.
Controls.js
Technology for building (web and mobile) applications.
Jiří Tulach
tulach@position.cz
http://controlsjs.com

32.
Position s.r.o. (Ltd.) - Creator of Controls.js
• History
– Founded in 2000
– Applications and services focused on electronic maps
– SaaS web application provider since 2005
– Controls.js technology since 2008 (made public in 2014)
• Customers
– Vodafone, T-Mobile, Telefónica O2, ČEZ Group, ...
• Partners
– HERE (formerly known as NAVTEQ and NOKIA Location & Commerce)
32

33.
Why Controls.js?
• Standard web application development
– Switching between HTML, CSS and JavaScript
– Code sharing?
– Dealing with cross-browser incompatibilities
33

34.
Why Controls.js?
• Standard web application development
– Switching between HTML, CSS and JavaScript
– Code sharing?
– Dealing with cross-browser incompatibilities
• Controls.js application development
– JavaScript only (No HTML, CSS needed only when creating Skins)
– Component based (No DOM)
●
create new components based on existing ones
– Cross-browser
●
IE6+, FF 2+, Opera 9.26+, Chrome, Safari
34

35.
But Controls.js can do more...
• Touch support
– Supports gestures, unifies touch and mouse events
• Multi-device development
– GUI adjustments and JavaScript loading based on detected device
type
– Optimized for Apache Cordova/PhoneGap
• Localization
– Resource strings, GUI adjustments
• Model-View-ViewModel (MVVM)
– Knockout.js bindings
– ViewModel's typed properties handles parsing, formatting and
validation
35

36.
...a lot more
• Application state handling
• Server communication
- GET/POST Request/Data/JSON, Script, IFRAME, Auto
• Asynchronous script loader
• Support for CSS sprite images
• Functions for objects duplication and merging
• Functions for URL escaping and HTML encoding/decoding
• etc.
36

37.
37
var AppForm = null;
function ngMain()
{
AppForm = new ngControls({
Edit1: {
Type: 'weEdit',
L: 20, T: 20, W: 200,
Data: {
Text: 'Hello, world!'
}
}
});
AppForm.Update();
}
Hello World

38.
Usable controls
• More than 100 visual and non-visual controls
– Buttons, Edit Boxes, Labels, Panels, Lists, Windows, Menus, …
– 3 different Skins
• Easy creation of new controls
– Create new controls based on existing ones
– Define only new visual styles (new skins)
– In application ad-hoc controls
– Encapsulate 3rd
party components (CodeMirror, amCharts)
38

39.
Usable controls (partial sample)
39

40.
Usable controls (partial sample)
40

41.
Usable controls (partial sample)
41
Chart controls are
using
3rd
party library
amCharts
http://www.amcharts.c
om

42.
Controls.js Tools – Form Editor
• WYSIWIG editor
• Controls.js application
• Instant updates
code ↔ preview ↔ properties
• Beta version available
http://formeditor.controlsjs.com
42

43.
Controls.js Tools – Skin Editor
• CSS sprite definition
• Controls.js application
43

44.
Application for Slovak Telekom – Desktop
version
44

45.
Mobile version – Mobile web / Apache Cordova
application
45
Shares more than 90% of code with desktop
version.

46.
Controls.js 4 Java
• Controls4j Package
– Integration based on Knockout.js (MVVM)
– Goal is to minimize usage of JavaScript
– Glues GUI defined in .ng files with DukeScript @Model classes
• NetBeans Controls.js 4 Java plug-in
– Integrates Controls.js Form Editor into NetBeans (associated
with .ng files)
46

47.
Demo: Controls.js 4 Java
47
Building Controls.js Java Application

48.
48
Questions?
Controls.js 4 Java:
GUI for DukeScript
DukeScript:
Write Once, Display Anywhere!