Polyglot Programming in the          Browser   or ‘Building Hybrid Web Apps’
buzdin@gmail.com         @buzdin         www.buzdin.lvDmitry Buzdin
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 timepassed...
I joined my first seriousJava-based Web project
It had quite standardarchitecture: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 ofthinking we pickedGoogle Web Toolkit
GWT PrimerWrite in Java - compile to JavaScriptRecompilation on browser refreshTransparent RPC protocol via Ajax
> Everything is dynamic> Everything is Ajax> OOP and Modularity> Refactoring Support
Some More Features> Multi-browser support> Obfuscation and compression> Browser-specific optimization> No vendor lock-in
Shipped 10+ applications own custom widget setand few reusable libraries
Some more timepassed...
JavaScript became cool !
Two more thingsappeared
Customers started demanding> Excel-like grids> Data Visualization> Mobile Support
We startedconsideringJavaScript seriously
console.log("2" / "2");// 1console.log("2" * "2");// 4console.log("1" + "2");// 12
console.log([1, 2, 3] + 1);// 1,2,31console.log(1 + true + false);// 2console.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(...
Java <> JSONclass JSOAttributes extends JavaScriptObject {    public native void set(String k, String v) /*-{      this[k]...
Hybrid Web AppMore than 1 language in your app JavaScript as host platform
ViewsUI Components           View Libs          JSON Model Controllers           Support Libs  Ajax          REST         ...
Frequency of changes                       Views                 UI Components                 Application Logic          ...
UI plumbing could be done    in dynamic language Infrastructure code is moremanageable in static language
JavaScript   GWT   Part      Part
JSNI Method for Every Call ?private native void drawThings(...) /*-{  $jsLib.drawThings(...);}-*/;private native void draw...
Code like that?... Really?
Too complex and              unmanageableJavaScript                     Dart/GWT   Part                           Part
JavaScript         ?          Dart/GWT   Part                          Part             What if we do              it like...
Event Bus in the   browser?!
Event Bus Pattern         EventBridge                Callbacksubscribe(Topic, Callback)unsubscribe(Callback)        onEven...
This resulted inevent ping-pong
Introducing ‘Event Bridge’        EventBridge                     Callbacksubscribe(Topic, Callback)unsubscribe(Callback) ...
Javabridge.subscribe("broadcast", this);public void onEvent(ModelAttributes attributes,  		 	 	 	 	 	       ModelEventCall...
$bridge.subscribe(broadcast,         JavaScript        function (attrs, fn) {            // JavaScript code            fn(...
Profit!Not using JavaScript interoperability APITransparent JSON based exchangeSingle point of communicationSync/async pos...
SomeReal-World Stuff
Introducing Livesheets   Visual Graph-basedspreadsheets in the cloud               www.livesheets.com
Main ChallengesComplex Domain ModelExpression languageOffline calculationsSharing and embedding
JavaScript     Client TechStack          Java     Twitter Bootstrap         GWT SDK       Underscore.js             Guava ...
Event FlowDraw                    Domain Model       Click       jQuery   B    Controller   jsPlumb                       ...
Views         UI Components              View LibsJavaScript                      JSON Model  Java             Controllers...
Clean View and Logic separationReusing cool JavaScript librariesANTLR in the browser!Evaluation on client and server
But what if ?...
Event Bridge is coded in      JavaScript.   Can we use other      languages?
Dart Primer• New language by Google• Compiles to JavaScript and runs in VM• Both server and client modes
Dart Highlights•   Created by people with GWT, V8, JVM    and Java background•   Sweet spot between Java and JavaScript• O...
Dart <> JavaScript#import(package:js/js.dart, prefix: js);void main() {    dart() {    }    js.scoped() {      js.context....
onEvent(data, callback) {  // Dart code                             Dart}eventBridge.subscribe(‘broadcast’, onEvent);onRes...
Event Bridge was muchsimpler to implement in          Dart
Dart                      Coffee   Clojure                      Script                           TypeGWT            JS    ...
JavaScript is a platform, not only a languageJavaScript libraries should be pluggableJavaScript is challenging to scaleFor...
Next Web Lang ChecklistJavaScript bi-directional integrationNo recompilation while developingSource maps for in-browser de...
Pick the right tools!
buzdin@gmail.com         @buzdin         www.buzdin.lvDmitry Buzdin
Additional Infohttps://developers.google.com/web-toolkit/http://www.dartlang.orghttps://github.com/buzdin/hybrid-web-apps ...
Mlocjs buzdin
Upcoming SlideShare
Loading in...5
×

Mlocjs buzdin

2,410

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,410
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Mlocjs buzdin

  1. 1. Polyglot Programming in the Browser or ‘Building Hybrid Web Apps’
  2. 2. buzdin@gmail.com @buzdin www.buzdin.lvDmitry Buzdin
  3. 3. The Story Begins...
  4. 4. This story begins long time ago...
  5. 5. When Browsers Were Brutal
  6. 6. Back in School I learned JavaScript
  7. 7. JavaScript seemed simplistic,fragile anduseless...
  8. 8. I skipped that andwent for Windows-based client-server apps
  9. 9. Some timepassed...
  10. 10. I joined my first seriousJava-based Web project
  11. 11. It had quite standardarchitecture:JSP, Struts, Servlets, XML
  12. 12. > Ajax> Drag and drop> Custom components> Auto-completion> XSLT transformations> Lots of CSS
  13. 13. Running in IE6
  14. 14. Written in plain JavaScript, without jQuery!
  15. 15. JavaScript seemed simplistic,fragile andkinda useful ...
  16. 16. People liked the system !And they asked for morelike that ...
  17. 17. After a lot ofthinking we pickedGoogle Web Toolkit
  18. 18. GWT PrimerWrite in Java - compile to JavaScriptRecompilation on browser refreshTransparent RPC protocol via Ajax
  19. 19. > Everything is dynamic> Everything is Ajax> OOP and Modularity> Refactoring Support
  20. 20. Some More Features> Multi-browser support> Obfuscation and compression> Browser-specific optimization> No vendor lock-in
  21. 21. Shipped 10+ applications own custom widget setand few reusable libraries
  22. 22. Some more timepassed...
  23. 23. JavaScript became cool !
  24. 24. Two more thingsappeared
  25. 25. Customers started demanding> Excel-like grids> Data Visualization> Mobile Support
  26. 26. We startedconsideringJavaScript seriously
  27. 27. console.log("2" / "2");// 1console.log("2" * "2");// 4console.log("1" + "2");// 12
  28. 28. console.log([1, 2, 3] + 1);// 1,2,31console.log(1 + true + false);// 2console.log(true + "a");// truea
  29. 29. > Weak typing> No scopes, no modules> Awkward class syntax> No refactoring> DIY builds
  30. 30. JavaScript...
  31. 31. JavaScript is still simplistic,fragile,but extremely useful !
  32. 32. So what to do?
  33. 33. We decided to stick with Google Web Toolkit
  34. 34. GWT had few problems:> No high-end widgets> No HTML5 support> No eval()
  35. 35. How to integrate with JavaScript libraries?
  36. 36. 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;);}-*/;
  37. 37. 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]; }-*/;}
  38. 38. Hybrid Web AppMore than 1 language in your app JavaScript as host platform
  39. 39. ViewsUI Components View Libs JSON Model Controllers Support Libs Ajax REST Storage
  40. 40. Frequency of changes Views UI Components Application Logic Infrastructure Code complexity
  41. 41. UI plumbing could be done in dynamic language Infrastructure code is moremanageable in static language
  42. 42. JavaScript GWT Part Part
  43. 43. JSNI Method for Every Call ?private native void drawThings(...) /*-{ $jsLib.drawThings(...);}-*/;private native void drawStuff(...) /*-{ $jsLib.drawStuff(...);}-*/;private native void paintBlue() /*-{ $jsLib.paint(‘blue’);}-*/;
  44. 44. Code like that?... Really?
  45. 45. Too complex and unmanageableJavaScript Dart/GWT Part Part
  46. 46. JavaScript ? Dart/GWT Part Part What if we do it like this?
  47. 47. Event Bus in the browser?!
  48. 48. Event Bus Pattern EventBridge Callbacksubscribe(Topic, Callback)unsubscribe(Callback) onEvent(Data, Callback)publish(Topic, Data)
  49. 49. This resulted inevent ping-pong
  50. 50. Introducing ‘Event Bridge’ EventBridge Callbacksubscribe(Topic, Callback)unsubscribe(Callback) onEvent(Data, Callback)publish(Topic, Data, Callback)
  51. 51. Javabridge.subscribe("broadcast", this);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);
  52. 52. $bridge.subscribe(broadcast, JavaScript function (attrs, fn) { // JavaScript code fn(); });$bridge.publish(broadcast, { value: ‘Hello from JavaScript‘ }, onResult);
  53. 53. Profit!Not using JavaScript interoperability APITransparent JSON based exchangeSingle point of communicationSync/async possible
  54. 54. SomeReal-World Stuff
  55. 55. Introducing Livesheets Visual Graph-basedspreadsheets in the cloud www.livesheets.com
  56. 56. Main ChallengesComplex Domain ModelExpression languageOffline calculationsSharing and embedding
  57. 57. JavaScript Client TechStack Java Twitter Bootstrap GWT SDK Underscore.js Guava Require.js B Guice jQuery ANTLR jsPlumb Domain Model
  58. 58. Event FlowDraw Domain Model Click jQuery B Controller jsPlumb REST
  59. 59. Views UI Components View LibsJavaScript JSON Model Java Controllers Support Libs Ajax REST Storage
  60. 60. Clean View and Logic separationReusing cool JavaScript librariesANTLR in the browser!Evaluation on client and server
  61. 61. But what if ?...
  62. 62. Event Bridge is coded in JavaScript. Can we use other languages?
  63. 63. Dart Primer• New language by Google• Compiles to JavaScript and runs in VM• Both server and client modes
  64. 64. Dart Highlights• Created by people with GWT, V8, JVM and Java background• Sweet spot between Java and JavaScript• Optional type safety
  65. 65. 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); }}
  66. 66. onEvent(data, callback) { // Dart code Dart}eventBridge.subscribe(‘broadcast’, onEvent);onResult(data) { // Dart code}eventBridge.publish(broadcast, {value: Hello from Dart}, onResult);
  67. 67. Event Bridge was muchsimpler to implement in Dart
  68. 68. Dart Coffee Clojure Script TypeGWT JS Script Fantom Kotlin CeylonOne B!d" to rule #em all
  69. 69. JavaScript is a platform, not only a languageJavaScript libraries should be pluggableJavaScript is challenging to scaleFor ambitious projects pick GWT, Dart or other
  70. 70. Next Web Lang ChecklistJavaScript bi-directional integrationNo recompilation while developingSource maps for in-browser debuggingConsider using Event Bridge
  71. 71. Pick the right tools!
  72. 72. buzdin@gmail.com @buzdin www.buzdin.lvDmitry Buzdin
  73. 73. Additional Infohttps://developers.google.com/web-toolkit/http://www.dartlang.orghttps://github.com/buzdin/hybrid-web-apps FlickrAttributions robert.molinarius theirhistory al unisono esther** Maccio Capatonda
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×