1. h-ubu is a service-based injection framework for JavaScript that allows for component-based architecture, loose coupling, and dependency injection similar to what is available in Java. 2. It provides services, components, and contracts to define interfaces and allow components to publish and consume services. It also supports events through a publish/subscribe system. 3. The goal of h-ubu is to make JavaScript application development more modular, configurable, and composable by treating code as components that can be assembled through services and events.

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/