1. Nanoko
Design – Deliver - Drive
Clement Escoffier
Thomas Leveque

2. Web
?

3. Write once, Run everywhere

7. How do we do that
with OSGi™?

9. Modules

10. Components

11. Services

12. Dependency
Injection

13. Robust build
processes

14. Unit / Integration
Tests

15. What do we have
in JavaScript ?

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

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

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

19. Well, so what’s
Nanoko ?

20. It’s an open
stack

21. Build
Run
Adapt

22. Build
Maven
coffee-mill
play2

23. Run
h-ubu
Cordoba
play2, grails

24. Adapt
Platform
Environment

25. Something close to
OSGi™ : h-ubu

26. Service-based
Injection
Framework

27. hub

28. components

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

30. contracts

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

32. services

33. services
Service
Registry
1 - Publication2 – Lookup,
Service Listener 3 - Binding

34. Why services ?
Substitutability
Loose-coupling
Testable
Dynamic

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

36. 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();
}
}

37. 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

38. events

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

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

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

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

43. Nanoko
Design – Deliver - Drive
http://nanoko.org