Modular & Event drivenUI Architecture

Vytautas Butkus

Content

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

Modules

• What is it?

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

Modules

• What is it?• Why use it?

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

Modules

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

Gmail system

Possible modules

Modules structure

Event driven architecture

• What is it?

Publish/Subscribe pattern

Event driven architecture

• What is it?• Where is it used?

• Node.js• jQuery.events• Backbone.js• OS interrups

$(“body”).on(“click”, function(){ alert(“Clicked”);});$(“body”).on(“alarm”, function(){ alert(“Alarm alarm!!!”);});

$(“.button”).on(“click”, function(){ $(“body”).trigger(“alarm”);});

Backbone.js

• Structural framework• Very popular• Huge community• Still under v1.0• RESTful JSON interface• Based on MVC paradigm

library

MV*

Backbone tools

• Models• Views• Collections (not controller)• Router• Events

=> Array of models

=> DOM controller

=> { } with events & sync

=> URL controller

=> Extend native { }

Underscore.js

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

Other MV* frameworks

• AngularJS (by Google)• Ember.js• YUI (by Yahoo!)• KnockoutJS

...many more

• Check them out at

Gmail example with Backbone.js

• Collection -> Message List• Model -> Message• Views -> Message, Message List• Router -> URL

Model

Collection

Mes

sage

Vie

w

Message list view

Router

Init

Source code

• https://github.com/bytasv/gmail-example

Thank you!