Mlocjs buzdin

Mlocjs buzdin

• 1.
  Polyglot Programming inthe Browser or ‘Building Hybrid Web Apps’
• 2.
  buzdin@gmail.com @buzdin www.buzdin.lv Dmitry Buzdin
• 3.
  The Story Begins...
• 4.
  This story begins long time ago...
• 5.
  When Browsers WereBrutal
• 6.
  Back in SchoolI learned JavaScript
• 7.
  JavaScript seemed simplistic, fragileand useless...
• 8.
  I skipped thatand went for Windows-based client-server apps
• 9.
  Some time passed...
• 10.
  I joined myfirst serious Java-based Web project
• 11.
  It had quitestandard architecture: JSP, Struts, Servlets, XML
• 12.
  > Ajax > Dragand drop > Custom components > Auto-completion > XSLT transformations > Lots of CSS
• 13.
  Running in IE6
• 14.
  Written in plainJavaScript, without jQuery!
• 15.
  JavaScript seemed simplistic, fragileand kinda useful ...
• 16.
  People liked thesystem ! And they asked for more like that ...
• 17.
  After a lotof thinking we picked Google Web Toolkit
• 18.
  GWT Primer Write inJava - compile to JavaScript Recompilation on browser refresh Transparent RPC protocol via Ajax
• 19.
  > Everything isdynamic > Everything is Ajax > OOP and Modularity > Refactoring Support
• 20.
  Some More Features >Multi-browser support > Obfuscation and compression > Browser-specific optimization > No vendor lock-in
• 21.
  Shipped 10+ applications own custom widget set and few reusable libraries
• 22.
  Some more time passed...
• 23.
  JavaScript became cool!
• 24.
  Two more things appeared
• 25.
  Customers started demanding >Excel-like grids > Data Visualization > Mobile Support
• 26.
  We started considering JavaScript seriously
• 27.
  console.log("2" / "2"); //1 console.log("2" * "2"); // 4 console.log("1" + "2"); // 12
• 28.
  console.log([1, 2, 3]+ 1); // 1,2,31 console.log(1 + true + false); // 2 console.log(true + "a"); // truea
• 29.
  > Weak typing >No scopes, no modules > Awkward class syntax > No refactoring > DIY builds
• 30.
  JavaScript...
• 31.
  JavaScript is stillsimplistic, fragile, but extremely useful !
• 32.
  So what todo?
• 33.
  We decided tostick with Google Web Toolkit
• 34.
  GWT had fewproblems: > No high-end widgets > No HTML5 support > No eval()
• 35.
  How to integratewith JavaScript libraries?
• 36.
  GWT JavaScript NativeInterface private static void java(String param) { } private native void javaScript() /*-{ $wnd.alert(‘Hello, JavaScript!’); $wnd.callback = @com.a.b.Type.java(Ljava.lang.String;); }-*/;
• 37.
  Java <> JSON classJSOAttributes extends JavaScriptObject { public native void set(String k, String v) /*-{ this[k]=v; }-*/; public native String get(String k) /*-{ return this[k]; }-*/; }
• 38.
  Hybrid Web App Morethan 1 language in your app JavaScript as host platform
• 39.
  Views UI Components View Libs JSON Model Controllers Support Libs Ajax REST Storage
• 40.
  Frequency of changes Views UI Components Application Logic Infrastructure Code complexity
• 41.
  UI plumbing couldbe done in dynamic language Infrastructure code is more manageable in static language
• 42.
  JavaScript GWT Part Part
• 43.
  JSNI Method forEvery Call ? private native void drawThings(...) /*-{ $jsLib.drawThings(...); }-*/; private native void drawStuff(...) /*-{ $jsLib.drawStuff(...); }-*/; private native void paintBlue() /*-{ $jsLib.paint(‘blue’); }-*/;
• 44.
  Code like that?... Really?
• 45.
  Too complex and unmanageable JavaScript Dart/GWT Part Part
• 46.
  JavaScript ? Dart/GWT Part Part What if we do it like this?
• 47.
  Event Bus inthe browser?!
• 48.
  Event Bus Pattern EventBridge Callback subscribe(Topic, Callback) unsubscribe(Callback) onEvent(Data, Callback) publish(Topic, Data)
• 49.
  This resulted in eventping-pong
• 50.
  Introducing ‘Event Bridge’ EventBridge Callback subscribe(Topic, Callback) unsubscribe(Callback) onEvent(Data, Callback) publish(Topic, Data, Callback)
• 51.
  Java bridge.subscribe("broadcast", this); public voidonEvent(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);
• 52.
  $bridge.subscribe('broadcast', JavaScript function (attrs, fn) { // JavaScript code fn(); }); $bridge.publish('broadcast', { value: ‘Hello from JavaScript‘ }, onResult );
• 53.
  Profit! Not using JavaScriptinteroperability API Transparent JSON based exchange Single point of communication Sync/async possible
• 54.
  Some Real-World Stuff
• 55.
  Introducing Livesheets Visual Graph-based spreadsheets in the cloud www.livesheets.com
• 57.
  Main Challenges Complex DomainModel Expression language Offline calculations Sharing and embedding
• 58.
  JavaScript Client TechStack Java Twitter Bootstrap GWT SDK Underscore.js Guava Require.js B Guice jQuery ANTLR jsPlumb Domain Model
• 59.
  Event Flow Draw Domain Model Click jQuery B Controller jsPlumb REST
• 60.
  Views UI Components View Libs JavaScript JSON Model Java Controllers Support Libs Ajax REST Storage
• 61.
  Clean View andLogic separation Reusing cool JavaScript libraries ANTLR in the browser! Evaluation on client and server
• 62.
  But what if?...
• 63.
  Event Bridge iscoded in JavaScript. Can we use other languages?
• 64.
  Dart Primer • Newlanguage by Google • Compiles to JavaScript and runs in VM • Both server and client modes
• 65.
  Dart Highlights • Created by people with GWT, V8, JVM and Java background • Sweet spot between Java and JavaScript • Optional type safety
• 66.
  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); } }
• 67.
  onEvent(data, callback) { // Dart code Dart } eventBridge.subscribe(‘broadcast’, onEvent); onResult(data) { // Dart code } eventBridge.publish('broadcast', {'value': 'Hello from Dart'}, onResult);
• 68.
  Event Bridge wasmuch simpler to implement in Dart
• 69.
  Dart Coffee Clojure Script Type GWT JS Script Fantom Kotlin Ceylon One B!d" to rule #em all
• 70.
  JavaScript is aplatform, not only a language JavaScript libraries should be pluggable JavaScript is challenging to scale For ambitious projects pick GWT, Dart or other
• 71.
  Next Web LangChecklist JavaScript bi-directional integration No recompilation while developing Source maps for in-browser debugging Consider using Event Bridge
• 72.
  Pick the righttools!
• 73.
  buzdin@gmail.com @buzdin www.buzdin.lv Dmitry Buzdin
• 74.
  Additional Info https://developers.google.com/web-toolkit/ http://www.dartlang.org https://github.com/buzdin/hybrid-web-apps FlickrAttributions robert.molinarius theirhistory al unisono esther** Maccio Capatonda