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.

1. Polyglot
Programming in
or ‘building hybrid web

2. buzdin@gmail.com
@buzdin
Dmitry Buzdin

3. The Problem

4. Web App of 2006

5. Web App of 201

6. Local
WebGL Storage
Perfor
CSS3
mance
Interopera
Mobile
Respon
bility
RESTCanvas
sive
Offline apps
design
Modulari
JSONComet

7. Complexity inside
your 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 not
JavaScript?!

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
Weak dynamic typing
No modularity/proper class
syntax/scopes
Portability problems
Lack of Refactoring support
Slow Evolution?

14. JavaScri
pt...

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 you lose
without JavaScript?
JSON
Eval()
Hundreds of
Libraries
jQuery?

20. How to get
the best from

21. The Solution

22. Hybrid Approach
Two or more 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. How to
integrate

29. GWT in 2
•Write in Java compile
to JavaScript
•
Development mode
with code refresh
•
Transparent remoting

30. Some Features
•HTML5 API support
•Cross-browser
compatibility
•Closure Tools compiler
•Production-ready since

31. Used In
•Google products
•Web projects (Evernote
for example)
•Plenty of Enterprise
Apps!

32. GWT <> JavaScript
private static 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 2 Minutes
•New language made by
Google
•Compiles to JavaScript
or runs in VM
•Both server and client

34. Dart Highlights
•
Created by people with
GWT, V8, JVM and Java
background
•
Sweet spot between Java
and JavaScript

35. Used In
•
Milestone 1 released 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. Code
like
that?...

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 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);

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 using JavaScript
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. Real-World Stuff

50. Introducing
Visual Graph-
based
spreadsheets in
the cloud
www.livesheets.com

52. Main
Challenges
Complex Domain
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 and Logic
separation
Reusing cool
JavaScript libraries
ANTLR in the browser!
Expressions on client

57. Conclusions

58. JavaScript is not enough 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
Essential for 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