This document discusses using multiple programming languages to build hybrid web applications. It describes how the author used Google Web Toolkit (GWT) and JavaScript to build applications, but encountered limitations with GWT. It then introduces Dart as an alternative to GWT that allows better integration with JavaScript through an event bridge pattern. This allows building applications with Dart and JavaScript components communicating through JSON messages. The document argues that a hybrid approach allows using the best languages for different application layers and reusing existing JavaScript libraries.

1. Polyglot Programming in the
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
Were Brutal

6. Back in School I learned JavaScript

7. JavaScript seemed simplistic,
fragile and
useless...

8. I skipped that and
went for Windows-based
client-server apps

9. Some time
passed...

10. I joined my first serious
Java-based Web project

11. It had quite standard
architecture:
JSP, Struts, Servlets, XML

12. > Ajax
> Drag and drop
> Custom components
> Auto-completion
> XSLT transformations
> Lots of CSS

13. Running in IE6

14. Written in plain JavaScript,
without jQuery!

15. JavaScript seemed simplistic,
fragile and
kinda useful ...

16. People liked the system !
And they asked for more
like that ...

17. After a lot of
thinking we picked
Google Web Toolkit

18. GWT Primer
Write in Java - compile to JavaScript
Recompilation on browser refresh
Transparent RPC protocol via Ajax

19. > Everything is dynamic
> 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 still simplistic,
fragile,
but extremely useful !

32. So what to do?

33. We decided to stick with
Google Web Toolkit

34. GWT had few problems:
> No high-end widgets
> No HTML5 support
> No eval()

35. How to integrate with
JavaScript libraries?

36. GWT JavaScript Native Interface
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
class JSOAttributes 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
More than 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 could be done
in dynamic language
Infrastructure code is more
manageable in static language

42. JavaScript GWT
Part Part

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. 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 in the
browser?!

48. Event Bus Pattern
EventBridge Callback
subscribe(Topic, Callback)
unsubscribe(Callback) onEvent(Data, Callback)
publish(Topic, Data)

49. This resulted in
event ping-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 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. $bridge.subscribe('broadcast', JavaScript
function (attrs, fn) {
// JavaScript code
fn();
});
$bridge.publish('broadcast',
{ value: ‘Hello from JavaScript‘ },
onResult
);

53. Profit!
Not using JavaScript interoperability 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 Domain Model
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 and Logic separation
Reusing cool JavaScript libraries
ANTLR in the browser!
Evaluation on client and server

62. But what if ?...

63. Event Bridge is coded in
JavaScript.
Can we use other
languages?

64. Dart Primer
• New language 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 was much
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 a platform, 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 Lang Checklist
JavaScript bi-directional integration
No recompilation while developing
Source maps for in-browser debugging
Consider using Event Bridge

72. Pick the right tools!

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