event oriented architecture and client side applications

7/30/2019 Event Oriented Architecture and Client side Applications

1/32

EOA and Client side

applications

Mihael Konjevi - @mihaelkonjevicWebCamp Zagreb 2012


2/32


3/32

Syntaxcan.Control('Controller.Name', {

static:function(){...

}}, {

instance:function(){...

},".selector click":function(el, ev){

...},

"{object} synEvent":function(){...

}})


4/32

WHAT WE WANT?

Ease of development Maintainability of code

Testability


5/32

SRCHR APP


6/32

WHAT WELL

COVER

Modules and isolation Directory structure

Application glue


7/32

MODULESPerfect module is dumb, lonely and replaceable


8/32

Modules should beDumb


9/32

Modules should beLonely


10/32

Modules should beReplaceable


11/32

Application structure


12/32

Search module

User can select services to search

User can enter the search term and trigger search


13/32

History module

Keep track ofsearches

On click redo search

User can delete

search


14/32

Search Results

Perform search

List results


15/32

Tabs

Clicking on the tabs shows search results for thatservice


16/32

Events

DOM events Synthetic events on DOM elements Synthetic events on JavaScript objects


17/32

Search module

Triggers search event on the Searchmodel$([Models.Search]).trigger("search",search);


18/32

History module Listens to search event on the search

model

Triggers selected event on the clickedelement

"{Models.Search} search":function(el, ev, searchInst){if(this.history.indexOf(searchInst) ===-1){

this.history.push(searchInst)}

},

"li click":function(el, ev){el.trigger("selected", el.data('search'))

}


19/32

Tabs module Triggers activated event on clicked tab

Listens to activated event on clicked tab

Triggers show event on search resultselementthis.tab(el.addClass('active')).show().trigger("show");

"li click":function( el, ev ) {ev.preventDefault();el.trigger("activate");

},

"li activate":function( el, ev ) {this.activate(el);

},


20/32

Search Results

module Listens to show event on the elementtriggered by the tabs module

Listens to search event on the search

model"{Models.Search} search":function(el, ev, searchInst){this.currentSearch = searchInst.query;...

},

activate:function( el ) {

this.tab(this.element.find('.active').removeClass('active')).hide();this.tab(el.addClass('active')).show().trigger("show");

}


21/32

What about disabled

tabs?


22/32

"li activate":function( el, ev ) {if(!el.hasClass('disabled')){

this.activate(el);}

}

What about disabled

tabs?


23/32

Disabler moduleDisabler = can.Control({}, {

"{Models.Search} search":function(el, ev, searchInst){var types = searchInst.attr('types');this.element.find('li').removeClass('disabled').map(function(i, el){

var $el = $(el);if(types.indexOf($el.data('service')) ===-1){$el.addClass('disabled');

}});this.element.find('li:not(.disabled):first').trigger('activate')

},"li activate":function(el, ev){

if(el.hasClass('disabled')){ev.stopImmediatePropagation();

}}

})


24/32

Application workflow


25/32Events diagram


26/32

Keep your modules dumb, isolated andreplaceable Define inputs and outputs

Use events instead callbacks

Summary


27/32

The secret to buildinglarge apps is to

never build largeapps.

Justin Meyer


28/32

button.js

jquery.ui.calendar.jscontactmanager.js

tabs.js

jquery.js

nav.js

resizer.js

\test

button_test.js

contactmanager.js

tabs_test.jsnav_test.js


29/32

\tabs

tabs.js - the code for a tabs widget

tabs.html - a demo pagefuncunit.html - a test page

tabs_test.js - test code

tabs.css - css for the tab


30/32

Assembling the app

loaddependencies

initialize the code

\srchr\disabler\history

\search\search_resultssearch_results.jssearch_results.htmlsearch_results.cssfuncunit.html

\tabssrchr.jssrchr.html


31/32

Gluing it togethervar searchController =new Search($("#searchArea"))

new SearchResult($('#upcoming'), { modelType: Models.Upcoming, resultView:'searchResultUpcomingEJS' })

new SearchResult($('#twitter'), { modelType: Models.Twitter, resultView:'searchResultTwitterEJS' })

new Disabler($('#resultsTabs'))

new Tabs($("#resultsTabs"))

new History($('#history'))

$('#history').bind("selected", function(ev, search){searchController.val(search)

})


32/32

Questions?

event oriented architecture and client side applications

Documents