mlocjs buzdin
Post on 18-Oct-2014
2.903 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related