h-ubu - CDI in JavaScript
Download as PPTX, PDF2 likes960 views
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.
h-ubu - CDI in JavaScript
- 1. Dynamis Technologies h-ubu CDI in JavaScript Clement Escoffier
- 4. How do we do that in Java ?
- 6. Components
- 7. Interfaces
- 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/