Download as PDF, PPTX
![console.log([1, 2, 3] + 1);
// 1,2,31
console.log(1 + true + false);
// 2
console.log(true + "a");
// truea](https://image.slidesharecdn.com/webpolyglotprogramming-121102103502-phpapp01/85/Web-polyglot-programming-12-320.jpg)
![console.log([1, 2, 3] + 1);
// 1,2,31
console.log(1 + true + false);
// 2
console.log(true + "a");
// truea](https://image.slidesharecdn.com/webpolyglotprogramming-121102103502-phpapp01/75/Web-polyglot-programming-12-2048.jpg)
Uploaded byDmitry Buzdin
Web polyglot programming
1) Polyglot or hybrid programming uses multiple programming languages on the client side, with JavaScript as the target platform. This allows leveraging the strengths of different languages while avoiding JavaScript's weaknesses like weak typing. 2) Frameworks like GWT and Dart compile other languages like Java and Dart respectively to JavaScript, allowing their use in web apps while preserving features like static typing. They interface with JavaScript via APIs. 3) An event bridge pattern allows different language parts to communicate asynchronously by publishing and subscribing to messages, avoiding direct interop and enabling clean separation of concerns.
More Related Content
Web polyglot programming
- 1. Polyglot Programming in or ‘buildinghybrid web
- 2. buzdin@gmail.com @buzdin Dmitry Buzdin
- 3.
- 4. Web App of2006
- 5. Web App of201
- 6. Local WebGL Storage Perfor CSS3 mance Interopera Mobile Respon bility RESTCanvas sive Offline apps design Modulari JSONComet
- 7.
- 8. The most popular * and Node.js
- 9. Good Stuff about JavaScript Simple to start with Dynamic Runs in all browsers Hundreds of libraries
- 10.
- 11. console.log("2" / "2"); // 1 console.log("2" * "2"); // 4 console.log("1" + "2"); // 12 console.log(1 + "2"); // 12
- 12. console.log([1, 2, 3]+ 1); // 1,2,31 console.log(1 + true + false); // 2 console.log(true + "a"); // truea
- 13. JavaScript Flaws Weakdynamic typing No modularity/proper class syntax/scopes Portability problems Lack of Refactoring support Slow Evolution?
- 14.
- 16. JavaScript is hard to scale!
- 17. There is an Languages, which compile to JavaScript
- 18. Good Stuff About Type safety Proper classes/modules Evolution is not tied to all browser vendors
- 19. What will youlose without JavaScript? JSON Eval() Hundreds of Libraries jQuery?
- 20. How to get thebest from
- 21.
- 22. Hybrid Approach Two ormore languages on the client JavaScript as target platform
- 23. Let’s split our system to
- 24. Views UI Components View Libraries JSON Model Controllers Support Libraries AJAX/Comet REST Storage
- 25. Frequency of changes Views UI Components Application Logic Infrastructure Code Code complexity
- 26. UI plumbing could be done with dynamic language Infrastructure code is more manageable in
- 27. Some Problems How do these languages interoperate? How to reuse existing
- 28.
- 29. GWT in 2 •Writein Java compile to JavaScript • Development mode with code refresh • Transparent remoting
- 30. Some Features •HTML5 APIsupport •Cross-browser compatibility •Closure Tools compiler •Production-ready since
- 31. Used In •Google products •Webprojects (Evernote for example) •Plenty of Enterprise Apps!
- 32. GWT <> JavaScript privatestatic void java(String param) { } private native void javaScript() /*-{ $wnd.alert(‘Hello, JavaScript!’); $wnd.callback = @com.a.b.Type.java (Ljava.lang.String;); }-*/;
- 33. Dart in 2Minutes •New language made by Google •Compiles to JavaScript or runs in VM •Both server and client
- 34. Dart Highlights • Created bypeople with GWT, V8, JVM and Java background • Sweet spot between Java and JavaScript
- 35. Used In • Milestone 1released in October 2012 • Not used yet...
- 36. 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); } }
- 37.
- 38. JavaScript Dart/GWT Part Part
- 39. Too complex and unmanageable JavaScript Dart/GWT Part Part
- 40. JavaScript ? Dart/GWT Part Part What if we do it like this?
- 41. Event Bus in the OMG!
- 42. Introducing Event Bridge EventBridge Callback subscribe(Topic, Callback) unsubscribe(Callback) onEvent(Data, Callback) publish(Topic, Data, Callback)
- 43. 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);
- 44. onEvent(data, callback) { // Dart code Dart } eventBridge.subscribe(‘broadcast’, onEvent); onResult(data) { // Dart code } eventBridge.publish('broadcast', {'value': 'Hello from Dart'}, onResult);
- 45. $bridge.subscribe('broadcast', JavaScript function (attrs, fn) { // JavaScript code fn(); }); $bridge.publish('broadcast', { value: ‘Hello from JavaScript‘ }, onResult );
- 46. Profit! Not usingJavaScript interoperability API Transparent JSON based exchange Single point of communication
- 47. Event Bridge is coded in JavaScript,
- 48. Dart Coffee Clojure Script Type GWT JS Script Fantom Kotlin Ceylon One B!d" to rule #em all
- 49.
- 50. Introducing Visual Graph- based spreadsheets in the cloud www.livesheets.com
- 52. Main Challenges ComplexDomain Model Expression language Offline calculations Sharing and
- 53. in JavaScript Client TechStack in Java Twitter Bootstrap GWT SDK Underscore.js Guava Require.js B Guice jQuery ANTLR jsPlumb Domain Model
- 54. Event Flow Draw Domain Model Click jQuery B Controller jsPlumb REST
- 55. Views UI Components View Libraries JavaScript JSON Model Java Controllers Support Libraries AJAX/Comet REST Storage
- 56. Clean View andLogic separation Reusing cool JavaScript libraries ANTLR in the browser! Expressions on client
- 57.
- 58. JavaScript is notenough for big/complex apps! JavaScript is a platform, not a language For ambitious projects use GWT, Dart or other Client side has architecture
- 59. JavaScript Interoperability in Essentialfor anything the browser If missing -> choose next technology Check for JavaScript library wrappers
- 60. Pick the right tools!
- 61. buzdin@gmail.com @buzdin Dmitry Buzdin
- 62. Additional Info https://developers.google.com/web-toolkit/ http://www.dartlang.org https://github.com/buzdin/hybrid-web-apps FlickrAttributions Sander van der Wel Alex E. Proimos esther** Maccio Capatonda