1. Dynamis
Technologies
h-ubu
CDI in JavaScript
Clement Escoffier

4. How do we do that
in Java ?

6. Components

7. Interfaces

8. Dependency
Injection

9. What do we have
in JavaScript ?

10. Module Patterns
+ -
Fix visibility A bit complex
No interfaces

11. Module loaders
+ -
Avoid <script> Hard-coded
Transitive dependencies
Reuse

12. MVC / MVVM
+ -
Code
Pushing
organization
the limits
UI Bindings

13. Well, so what’s
h-ubu ?

14. Service-based
Injection
Framework

15. hub

16. components

17. var component = {
configure : function(hub, conf) { },
getComponentName : function() { },
start : function() { },
stop : function() {}
};
hub
.registerComponent(component)
.start()

18. contracts

19. var myService= {
doSomething : function() {}
}

20. services

21. services
Service
Registry
2 – Lookup, 1 - Publication
Service Listener 3 - Binding

22. Substitutability
Loose-coupling
Why services ?
Testable
Dynamic

23. var provider = {
configure : function(hub, conf) {
hub.provideService({
component: this,
contract: myService
});
},
getComponentName : function() { },
start : function() { },
stop : function() {},
doSomething : function() { … }
}

24. var consumer = {
configure : function(hub, conf) {
hub.requireService({
component: this,
contract: myService,
field: "svc"
});
},
getComponentName : function() { },
start : function() {},
stop : function() {},
work : function() {
this.svc.doSomething();
}
}

25. var consumer = {
configure : function(hub, conf) {
hub.requireService({
component: this,
contract: myService,
field: "svc"
});
},
getComponentName : function() { },
start : function() {},
stop : function() {},
work : function() {
}
this.svc.doSomething(); Proxy
}

26. events

27. var publisher = {
configure : function(hub, conf) {}
getComponentName : function() { },
start : function() {},
stop : function() {},
work : function() {
this.hub.publish(this, "my/topic",
event);
}
}

28. var receiver = {
configure : function(hub, conf) {
hub.subscribe(this, "my/(.)*?",
this.receive);
},
getComponentName : function() { },
start : function() {},
stop : function() {},
receive: function(event) { }
}

29. require.js/node.js
Composition
Modularize your
JavaScript
Standalone
Configurability

30. h bu
Stop hacking,
Start composing
http://nanoko-project.github.com/h-ubu/snapshot/