Modular & Event driven UI Architecture - Backbone.js example

1. Modular & Event driven
UI Architecture
Vytautas Butkus

2. Content
• Modules
• Event driven architecture
• Backbone.js - MV* framework
• Questions

3. Modules
• What is it?

4. • Single, solid unit
• Have interfaces defined
• Made of multiple other modules

5. Modules
• What is it?
• Why use it?

6. • Loose coupling
• Easier maintanance
• Changes affects only changed modules
• Removed module does not break page

7. Modules
• What is it?
• Why use it?
• Modules in real life

8. Gmail system

9. Possible modules

10. Modules structure

11. Event driven architecture
• What is it?

12. Publish/Subscribe pattern

13. Event driven architecture
• What is it?
• Where is it used?

14. • Node.js
• jQuery.events
• Backbone.js
• OS interrups
$(“.button”).on(“click”, function(){
$(“body”).on(“click”, function(){
$(“body”).trigger(“alarm”);
alert(“Clicked”);
});
$(“body”).on(“alarm”, function(){
alert(“Alarm alarm!!!”);
});

16. Backbone.js
library
• Structural framework
• Very popular
• Huge community
• Still under v1.0
• RESTful JSON interface
• Based on MVC paradigm
MV*

17. Backbone tools
• Models => { } with events & sync
• Views => DOM controller
• Collections (not controller) => Array of models
• Router => URL controller
• Events => Extend native { }

18. Underscore.js
• Utility-belt library
• Eases work with collections, arrays & objects
• Provides function helpers
• The only one Backbone.js dependency

19. Other MV* frameworks
• AngularJS (by Google)
• Ember.js
• YUI (by Yahoo!)
• KnockoutJS
...many more
• Check them out at

20. Gmail example with Backbone.js
• Collection -> Message List
• Model -> Message
• Views -> Message, Message List
• Router -> URL

21. Model

22. Collection

23. Message View

24. Message list view

25. Router

26. Init

27. Source code
• https://github.com/bytasv/gmail-example

28. Thank you!