Your SlideShare is downloading. ×
Web polyglot programming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web polyglot programming

1,382
views

Published on


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,382
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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