Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PolyglotProgramming inor ‘building hybrid web
buzdin@gmail.com          @buzdinDmitry Buzdin
The Problem
Web App of 2006
Web App of 201
Local WebGL Storage     Perfor               CSS3     manceInteropera            MobileRespon   bility          RESTCanvas...
Complexity insideyour browser app
The most popular        * and       Node.js
Good Stuff about   JavaScript Simple to start with Dynamic Runs in all browsers Hundreds of libraries
So why notJavaScript?!
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 classsyntax/scopes Portability problems Lack of Refactoring sup...
JavaScri  pt...
JavaScript is hard    to scale!
There is an  Languages,which compile to   JavaScript
Good Stuff About  Type safety  Proper classes/modules  Evolution is not tied to all browser vendors
What will you losewithout JavaScript?   JSON   Eval()    Hundreds of  Libraries   jQuery?
How to getthe best from
The Solution
Hybrid ApproachTwo or more languages     on the client JavaScript as target      platform
Let’s split our  system to
Views UI Components              View Libraries                 JSON Model   Controllers             Support LibrariesAJAX...
Frequency of  changes                    Views               UI Components               Application Logic           Infra...
UI plumbing   could be done   with dynamic     languageInfrastructure code       is more  manageable in
Some Problems     How do theselanguages interoperate? How to reuse existing
How tointegrate
GWT in 2•Write in Java compileto JavaScript•Development modewith code refresh•Transparent remoting
Some Features•HTML5 API support•Cross-browser compatibility•Closure Tools compiler•Production-ready since
Used In•Google products•Web projects (Evernote for example)•Plenty of Enterprise Apps!
GWT <> JavaScriptprivate static void java(String param) {}private native void javaScript() /*-{  $wnd.alert(‘Hello, JavaSc...
Dart in 2 Minutes•New language made by Google•Compiles to JavaScript or runs in VM•Both server and client
Dart Highlights•Created by people withGWT, V8, JVM and Javabackground•Sweet spot between Javaand JavaScript
Used In•Milestone 1 released inOctober 2012•Not used yet...
Dart <> JavaScript#import(package:js/js.dart, prefix: js);void main() {    dart() {    }    js.scoped() {      js.context....
Code  likethat?...
JavaScript   Dart/GWT   Part         Part
Too complex and              unmanageableJavaScript                     Dart/GWT   Part                           Part
JavaScript         ?          Dart/GWT   Part                          Part             What if we do              it like...
Event Bus  in the        OMG!
Introducing     Event Bridge        EventBridge                     Callbacksubscribe(Topic, Callback)unsubscribe(Callback...
Javabridge.subscribe("broadcast", this);public void onEvent(ModelAttributes attributes,  		 	 	 	 	 	       ModelEventCall...
onEvent(data, callback) {  // Dart code                             Dart}eventBridge.subscribe(‘broadcast’, onEvent);onRes...
$bridge.subscribe(broadcast,         JavaScript        function (attrs, fn) {            // JavaScript code            fn(...
Profit! Not using JavaScriptinteroperability API Transparent JSON basedexchange Single point ofcommunication
Event Bridge is   coded in  JavaScript,
Dart                      Coffee   Clojure                      Script                           TypeGWT            JS    ...
Real-World Stuff
Introducing Visual Graph-      basedspreadsheets in    the cloud         www.livesheets.com
Main Challenges Complex DomainModel Expression language Offline calculations Sharing and
in JavaScript                Client TechStack          in Java       Twitter Bootstrap        GWT SDK          Underscore....
Event FlowDraw                    Domain Model       Click       jQuery   B    Controller   jsPlumb                       ...
Views             UI Components             View LibrariesJavaScript                            JSON Model  Java          ...
Clean View and Logicseparation  Reusing coolJavaScript libraries ANTLR in the browser! Expressions on client
Conclusions
JavaScript is not enough forbig/complex apps!JavaScript is a platform, nota languageFor ambitious projects useGWT, Dart or...
JavaScriptInteroperability in Essential for anythingthe browser  If missing -> choosenext technology   Check for JavaScrip...
Pick the right    tools!
buzdin@gmail.com          @buzdinDmitry Buzdin
Additional Infohttps://developers.google.com/web-toolkit/http://www.dartlang.orghttps://github.com/buzdin/hybrid-web-apps ...
Web polyglot programming
Web polyglot programming
Upcoming SlideShare
Loading in …5
×

Web polyglot programming

1,845 views

Published on

  • Be the first to comment

Web polyglot programming

  1. 1. PolyglotProgramming inor ‘building hybrid web
  2. 2. buzdin@gmail.com @buzdinDmitry Buzdin
  3. 3. The Problem
  4. 4. Web App of 2006
  5. 5. Web App of 201
  6. 6. Local WebGL Storage Perfor CSS3 manceInteropera MobileRespon bility RESTCanvas sive Offline apps designModulari JSONComet
  7. 7. Complexity insideyour browser app
  8. 8. The most popular * and Node.js
  9. 9. Good Stuff about JavaScript Simple to start with Dynamic Runs in all browsers Hundreds of libraries
  10. 10. So why notJavaScript?!
  11. 11. console.log("2" / "2");// 1console.log("2" * "2");// 4console.log("1" + "2");// 12console.log(1 + "2");// 12
  12. 12. console.log([1, 2, 3] + 1);// 1,2,31console.log(1 + true + false);// 2console.log(true + "a");// truea
  13. 13. JavaScript Flaws Weak dynamic typing No modularity/proper classsyntax/scopes Portability problems Lack of Refactoring support Slow Evolution?
  14. 14. JavaScri pt...
  15. 15. JavaScript is hard to scale!
  16. 16. There is an Languages,which compile to JavaScript
  17. 17. Good Stuff About Type safety Proper classes/modules Evolution is not tied to all browser vendors
  18. 18. What will you losewithout JavaScript? JSON Eval() Hundreds of Libraries jQuery?
  19. 19. How to getthe best from
  20. 20. The Solution
  21. 21. Hybrid ApproachTwo or more languages on the client JavaScript as target platform
  22. 22. Let’s split our system to
  23. 23. Views UI Components View Libraries JSON Model Controllers Support LibrariesAJAX/Comet REST Storage
  24. 24. Frequency of changes Views UI Components Application Logic Infrastructure Code Code complexity
  25. 25. UI plumbing could be done with dynamic languageInfrastructure code is more manageable in
  26. 26. Some Problems How do theselanguages interoperate? How to reuse existing
  27. 27. How tointegrate
  28. 28. GWT in 2•Write in Java compileto JavaScript•Development modewith code refresh•Transparent remoting
  29. 29. Some Features•HTML5 API support•Cross-browser compatibility•Closure Tools compiler•Production-ready since
  30. 30. Used In•Google products•Web projects (Evernote for example)•Plenty of Enterprise Apps!
  31. 31. 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;);}-*/;
  32. 32. Dart in 2 Minutes•New language made by Google•Compiles to JavaScript or runs in VM•Both server and client
  33. 33. Dart Highlights•Created by people withGWT, V8, JVM and Javabackground•Sweet spot between Javaand JavaScript
  34. 34. Used In•Milestone 1 released inOctober 2012•Not used yet...
  35. 35. 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); }}
  36. 36. Code likethat?...
  37. 37. JavaScript Dart/GWT Part Part
  38. 38. Too complex and unmanageableJavaScript Dart/GWT Part Part
  39. 39. JavaScript ? Dart/GWT Part Part What if we do it like this?
  40. 40. Event Bus in the OMG!
  41. 41. Introducing Event Bridge EventBridge Callbacksubscribe(Topic, Callback)unsubscribe(Callback) onEvent(Data, Callback)publish(Topic, Data, Callback)
  42. 42. 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);
  43. 43. onEvent(data, callback) { // Dart code Dart}eventBridge.subscribe(‘broadcast’, onEvent);onResult(data) { // Dart code}eventBridge.publish(broadcast, {value: Hello from Dart}, onResult);
  44. 44. $bridge.subscribe(broadcast, JavaScript function (attrs, fn) { // JavaScript code fn(); });$bridge.publish(broadcast, { value: ‘Hello from JavaScript‘ }, onResult);
  45. 45. Profit! Not using JavaScriptinteroperability API Transparent JSON basedexchange Single point ofcommunication
  46. 46. Event Bridge is coded in JavaScript,
  47. 47. Dart Coffee Clojure Script TypeGWT JS Script Fantom Kotlin CeylonOne B!d" to rule #em all
  48. 48. Real-World Stuff
  49. 49. Introducing Visual Graph- basedspreadsheets in the cloud www.livesheets.com
  50. 50. Main Challenges Complex DomainModel Expression language Offline calculations Sharing and
  51. 51. in JavaScript Client TechStack in Java Twitter Bootstrap GWT SDK Underscore.js Guava Require.js B Guice jQuery ANTLR jsPlumb Domain Model
  52. 52. Event FlowDraw Domain Model Click jQuery B Controller jsPlumb REST
  53. 53. Views UI Components View LibrariesJavaScript JSON Model Java Controllers Support Libraries AJAX/Comet REST Storage
  54. 54. Clean View and Logicseparation Reusing coolJavaScript libraries ANTLR in the browser! Expressions on client
  55. 55. Conclusions
  56. 56. JavaScript is not enough forbig/complex apps!JavaScript is a platform, nota languageFor ambitious projects useGWT, Dart or otherClient side has architecture
  57. 57. JavaScriptInteroperability in Essential for anythingthe browser If missing -> choosenext technology Check for JavaScriptlibrary wrappers
  58. 58. Pick the right tools!
  59. 59. buzdin@gmail.com @buzdinDmitry Buzdin
  60. 60. Additional Infohttps://developers.google.com/web-toolkit/http://www.dartlang.orghttps://github.com/buzdin/hybrid-web-apps FlickrAttributions Sander van der Wel Alex E. Proimos esther** Maccio Capatonda

×