The document introduces h-ubu, a service-based injection framework for JavaScript that allows components to publish and consume services through a central hub, addressing issues like visibility, dependencies, and organization through a modular component model based on services, contracts, and events. It describes how components can register with the hub, provide and require services through contracts, and publish and subscribe to events, aiming to make JavaScript applications more modular, configurable, substitutable, and testable.

1. Group
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://nano-project.github.com/h-ubu/snapshot/