Polyglot Programming in the Browser

or ‘Building Hybrid Web Apps’

Dmitry Buzdin

buzdin@gmail.com

@buzdin

www.buzdin.lv

The Story Begins...

This story begins long time ago...

When Browsers Were Brutal

Back in School I learned JavaScript

JavaScript seemed simplistic, fragile anduseless...

I skipped that andwent for Windows-based

client-server apps

Some time passed...

I joined my first serious Java-based Web project

It had quite standard architecture:JSP, Struts, Servlets, XML

> Ajax> Drag and drop> Custom components> Auto-completion> XSLT transformations> Lots of CSS

Running in IE6

Written in plain JavaScript,without jQuery!

JavaScript seemed simplistic, fragile andkinda useful ...

People liked the system !

And they asked for morelike that ...

After a lot of thinking we picked Google Web Toolkit

GWT Primer

Write in Java - compile to JavaScriptRecompilation on browser refreshTransparent RPC protocol via Ajax

> Everything is dynamic> Everything is Ajax> OOP and Modularity> Refactoring Support

> Multi-browser support> Obfuscation and compression> Browser-specific optimization> No vendor lock-in

Some More Features

Shipped 10+ applicationsown custom widget set

and few reusable libraries

Some more time passed...

JavaScript became cool !

Two more thingsappeared

Customers started demanding > Excel-like grids> Data Visualization> Mobile Support

We started considering JavaScript seriously

console.log("2" / "2"); // 1

console.log("2" * "2"); // 4

console.log("1" + "2"); // 12

console.log([1, 2, 3] + 1); // 1,2,31

console.log(1 + true + false); // 2

console.log(true + "a"); // truea

> Weak typing> No scopes, no modules> Awkward class syntax> No refactoring> DIY builds

JavaScript...

JavaScript is still simplistic, fragile,but extremely useful !

So what to do?

We decided to stick with Google Web Toolkit

GWT had few problems:> No high-end widgets> No HTML5 support> No eval()

How to integrate with JavaScript libraries?

GWT JavaScript Native Interfaceprivate static void java(String param) {}

private native void javaScript() /*-{

$wnd.alert(‘Hello, JavaScript!’);

$wnd.callback = @com.a.b.Type.java(Ljava.lang.String;);

}-*/;

Java <> JSONclass JSOAttributes extends JavaScriptObject {

public native void set(String k, String v) /*-{ this[k]=v; }-*/;

public native String get(String k) /*-{ return this[k]; }-*/;

}

Hybrid Web App

More than 1 language in your app

JavaScript as host platform

JSON Model

Controllers

UI Components

Views

View Libs

Support Libs

Ajax REST Storage

Frequency of changes

Code complexity

Infrastructure

Application Logic

UI Components

Views

Infrastructure code is more manageable in static language

UI plumbing could be done in dynamic language

JavaScript Part

GWTPart

JSNI Method for Every Call ?private native void drawThings(...) /*-{ $jsLib.drawThings(...);}-*/;

private native void drawStuff(...) /*-{ $jsLib.drawStuff(...);}-*/;

private native void paintBlue() /*-{ $jsLib.paint(‘blue’);}-*/;

Code like that?...Really?

JavaScript Part

Dart/GWTPart

Too complex and unmanageable

JavaScript Part

Dart/GWTPart

?

What if we do it like this?

Event Bus in the browser?!

Event Bus Pattern

EventBridge Callback

subscribe(Topic, Callback)unsubscribe(Callback)publish(Topic, Data)

onEvent(Data, Callback)

This resulted in event ping-pong

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

$bridge.subscribe('broadcast', function (attrs, fn) { // JavaScript code fn(); });

$bridge.publish('broadcast', { value: ‘Hello from JavaScript‘ }, onResult );

JavaScript

Not using JavaScript interoperability API

Transparent JSON based exchange

Single point of communication

Sync/async possible

Profit!

Some Real-World Stuff

Introducing Livesheets

www.livesheets.com

Visual Graph-based spreadsheets in the cloud

Complex Domain Model

Expression language

Offline calculations

Sharing and embedding

Main Challenges

Twitter Bootstrap

Underscore.js

Require.js

jsPlumb

jQuery

GWT SDK

Guava

ANTLR

Domain Model

Guice

Client TechStack JavaJavaScript

B

Click

jsPlumb

jQuery Controller

REST

Domain Model

B

Event Flow

Draw

JSON Model

Controllers

UI Components

Views

View Libs

Support Libs

Ajax REST Storage

Java

JavaScript

Clean View and Logic separation

Reusing cool JavaScript libraries

ANTLR in the browser!

Evaluation on client and server

But what if ?...

Event Bridge is coded in JavaScript.

Can we use otherlanguages?

• New language by Google

• Compiles to JavaScript and runs in VM

• Both server and client modes

Dart Primer

• Created by people with GWT, V8, JVM and Java background

• Sweet spot between Java and JavaScript

• Optional type safety

Dart Highlights

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); }}

onResult(data) { // Dart code}

eventBridge.publish('broadcast', {'value': 'Hello from Dart'}, onResult);

DartonEvent(data, callback) { // Dart code}

eventBridge.subscribe(‘broadcast’, onEvent);

Event Bridge was much simpler to implement in

Dart

JS

One B!d" to rule #em all

Dart

Type ScriptGWT

Clojure

Fantom

CoffeeScript

KotlinCeylon

JavaScript is a platform, not only a language

JavaScript libraries should be pluggable

JavaScript is challenging to scale

For ambitious projects pick GWT, Dart or other

Next Web Lang Checklist

JavaScript bi-directional integration

No recompilation while developing

Source maps for in-browser debugging

Consider using Event Bridge

Pick the right tools!

Dmitry Buzdin

buzdin@gmail.com

@buzdin

www.buzdin.lv

Additional Info

https://github.com/buzdin/hybrid-web-apps

https://developers.google.com/web-toolkit/

http://www.dartlang.org

FlickrAttributionsrobert.molinariustheirhistoryal unisonoesther**Maccio Capatonda