Polyglot Programming in
or ‘building hybrid web
The Problem
Web App of 2006
Web App of 2012
Performance
RESTInteropera
bilityResponsive
designModularity
Offline appsCanvas
Local Storage
Comet
Mobile
JSON
WebGLCSS3
Complexity inside your browser app
The most popular
* and Node.js
Good Stuff about JavaScript
Simple to start withDynamicRuns in all browsersHundreds of libraries
So why not JavaScript?!
console.log("2" / "2"); // 1console.log("2" * "2"); // 4console.log("1" + "2"); // 12console.log(1 + "2"); // 12
console.log([1, 2, 3] + 1); // 1,2,31console.log(1 + true + false); // 2console.log(true + "a"); // truea
JavaScript Flaws Weak dynamic typing No modularity/proper class syntax/scopes Portability problems Lack of Refactoring support Slow Evolution?
JavaScript...
JavaScript is hard to scale!
There is an Languages,
which compile to JavaScript
Type safety
Proper classes/modules
Evolution is not tied to all browser vendors
Good Stuff About
JSON Eval() Hundreds of
Libraries jQuery?
What will you lose without JavaScript?
How to get the best from
The Solution
Hybrid Approach
Two or more languages on the client
JavaScript as target platform
Let’s split our system to
JSON Model
Controllers
UI Components
Views
View Libraries
Support Libraries
AJAX/Comet REST Storage
Frequency of changes
Code complexity
Infrastructure Code
Application Logic
UI Components
Views
Infrastructure code is more
manageable in static language
UI plumbing could be done with dynamic
language
Some ProblemsHow do these
languages interoperate?
How to reuse existing
How to integrate
GWT in 2 •Write in Java compile
to JavaScript
•Development mode with code refresh
•Transparent remoting
•HTML5 API support
•Cross-browser compatibility
•Closure Tools compiler
•Production-ready since
Some Features
•Google products
•Web projects (Evernote for example)
•Plenty of Enterprise Apps!
Used In
GWT <> JavaScriptprivate static void java(String param) {}
private native void javaScript() /*-{
$wnd.alert(‘Hello, JavaScript!’);
$wnd.callback = @com.a.b.Type.java(Ljava.lang.String;);
}-*/;
•New language made by Google
•Compiles to JavaScript or runs in VM
•Both server and client
Dart in 2 Minutes
•Created by people with GWT, V8, JVM and Java background
•Sweet spot between Java and JavaScript
Dart Highlights
•Milestone 1 released in October 2012
•Not used yet...
Used In
Dart <> JavaScript#import('package:js/js.dart', prefix: 'js');
void main() {
dart() { }
js.scoped() { js.context.alert(‘Hello, JavaScript!’); js.context.x = new js.Callback.once(dart); }}
Code like
that?...
JavaScript Part
Dart/GWTPart
JavaScript Part
Dart/GWTPart
Too complex and unmanageable
JavaScript Part
Dart/GWTPart
?
What if we do it like this?
Event Bus in the
OMG!
Introducing Event Bridge
EventBridge Callback
subscribe(Topic, Callback)unsubscribe(Callback)publish(Topic, Data, Callback)
onEvent(Data, Callback)
public void onEvent(ModelAttributes attributes, ModelEventCallback callback) { ModelAttributes result = Responses.attributes(); result.set("result", "Response for JS"); callback.resolve(result);}
ModelAttributes data = Responses.attributes();data.set("value", "Hello from GWT");bridge.publish("broadcast", data);
Javabridge.subscribe("broadcast", this);
onResult(data) { // Dart code}
eventBridge.publish('broadcast', {'value': 'Hello from Dart'}, onResult);
DartonEvent(data, callback) { // Dart code}
eventBridge.subscribe(‘broadcast’, onEvent);
$bridge.subscribe('broadcast', function (attrs, fn) { // JavaScript code fn(); });
$bridge.publish('broadcast', { value: ‘Hello from JavaScript‘ }, onResult );
JavaScript
Not using JavaScript interoperability APITransparent JSON based
exchangeSingle point of
communication
Profit!
Event Bridge is coded in
JavaScript,
JS
One B!d" to rule #em all
Dart
Type ScriptGWT
Clojure
Fantom
CoffeeScript
KotlinCeylon
Real-World Stuff
Introducing
www.livesheets.com
Visual Graph-based
spreadsheets in the cloud
Complex Domain Model Expression language Offline calculations Sharing and
Main Challenges
Twitter Bootstrap
Underscore.js
Require.js
jsPlumb
jQuery
GWT SDK
Guava
ANTLR
Domain Model
Guice
Client TechStack in Javain JavaScript
B
Click
jsPlumb
jQuery Controller
REST
Domain Model
B
Event Flow
Draw
JSON Model
Controllers
UI Components
Views
View Libraries
Support Libraries
AJAX/Comet REST Storage
Java
JavaScript
Clean View and Logic separation
Reusing cool JavaScript libraries
ANTLR in the browser!
Expressions on client
Conclusions
JavaScript is not enough for big/complex apps!JavaScript is a platform, not a languageFor ambitious projects use GWT, Dart or otherClient side has architecture
JavaScript Interoperability Essential for anything in
the browser If missing -> choose
next technology Check for JavaScript
library wrappers
Pick the right tools!
Additional Info
https://github.com/buzdin/hybrid-web-apps
https://developers.google.com/web-toolkit/
http://www.dartlang.org
FlickrAttributionsSander van der Wel
Alex E. Proimosesther**
Maccio Capatonda