-
7/30/2019 Event Oriented Architecture and Client side Applications
1/32
EOA and Client side
applications
Mihael Konjevi - @mihaelkonjevicWebCamp Zagreb 2012
-
7/30/2019 Event Oriented Architecture and Client side Applications
2/32
-
7/30/2019 Event Oriented Architecture and Client side Applications
3/32
Syntaxcan.Control('Controller.Name', {
static:function(){...
}}, {
instance:function(){...
},".selector click":function(el, ev){
...},
"{object} synEvent":function(){...
}})
-
7/30/2019 Event Oriented Architecture and Client side Applications
4/32
WHAT WE WANT?
Ease of development Maintainability of code
Testability
-
7/30/2019 Event Oriented Architecture and Client side Applications
5/32
SRCHR APP
-
7/30/2019 Event Oriented Architecture and Client side Applications
6/32
WHAT WELL
COVER
Modules and isolation Directory structure
Application glue
-
7/30/2019 Event Oriented Architecture and Client side Applications
7/32
MODULESPerfect module is dumb, lonely and replaceable
-
7/30/2019 Event Oriented Architecture and Client side Applications
8/32
Modules should beDumb
-
7/30/2019 Event Oriented Architecture and Client side Applications
9/32
Modules should beLonely
-
7/30/2019 Event Oriented Architecture and Client side Applications
10/32
Modules should beReplaceable
-
7/30/2019 Event Oriented Architecture and Client side Applications
11/32
Application structure
-
7/30/2019 Event Oriented Architecture and Client side Applications
12/32
Search module
User can select services to search
User can enter the search term and trigger search
-
7/30/2019 Event Oriented Architecture and Client side Applications
13/32
History module
Keep track ofsearches
On click redo search
User can delete
search
-
7/30/2019 Event Oriented Architecture and Client side Applications
14/32
Search Results
Perform search
List results
-
7/30/2019 Event Oriented Architecture and Client side Applications
15/32
Tabs
Clicking on the tabs shows search results for thatservice
-
7/30/2019 Event Oriented Architecture and Client side Applications
16/32
Events
DOM events Synthetic events on DOM elements Synthetic events on JavaScript objects
-
7/30/2019 Event Oriented Architecture and Client side Applications
17/32
Search module
Triggers search event on the Searchmodel$([Models.Search]).trigger("search",search);
-
7/30/2019 Event Oriented Architecture and Client side Applications
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'))
}
-
7/30/2019 Event Oriented Architecture and Client side Applications
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);
},
-
7/30/2019 Event Oriented Architecture and Client side Applications
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");
}
-
7/30/2019 Event Oriented Architecture and Client side Applications
21/32
What about disabled
tabs?
-
7/30/2019 Event Oriented Architecture and Client side Applications
22/32
"li activate":function( el, ev ) {if(!el.hasClass('disabled')){
this.activate(el);}
}
What about disabled
tabs?
-
7/30/2019 Event Oriented Architecture and Client side Applications
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();
}}
})
-
7/30/2019 Event Oriented Architecture and Client side Applications
24/32
Application workflow
-
7/30/2019 Event Oriented Architecture and Client side Applications
25/32Events diagram
-
7/30/2019 Event Oriented Architecture and Client side Applications
26/32
Keep your modules dumb, isolated andreplaceable Define inputs and outputs
Use events instead callbacks
Summary
-
7/30/2019 Event Oriented Architecture and Client side Applications
27/32
The secret to buildinglarge apps is to
never build largeapps.
Justin Meyer
-
7/30/2019 Event Oriented Architecture and Client side Applications
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
-
7/30/2019 Event Oriented Architecture and Client side Applications
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
-
7/30/2019 Event Oriented Architecture and Client side Applications
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
-
7/30/2019 Event Oriented Architecture and Client side Applications
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)
})
-
7/30/2019 Event Oriented Architecture and Client side Applications
32/32
Questions?