Polyglot Programming in

or ‘building hybrid web

Dmitry Buzdin

buzdin@gmail.com

@buzdin

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!

Dmitry Buzdin

buzdin@gmail.com

@buzdin

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