MVVM/MVC in Client-side SPA
var subTitle = {
value: ‘Single page application approaches and usage’,
speaker1: ‘Stanimir Todorov, Product Developer Infragistics’,
speaker2: ‘Konstantin Dinev, Software Engineer Infragistics’
};
Contents




Past vs. present
Usage
Approaches
Frameworks and libraries
 Knockout.js
 Backbone.js
 Hands on
Past vs. present
 Past
 Static HTML
 Server rendered HTML
 Present
 JavaScript
Example
Example
Example
Usage
Improve
User
Experience
Approaches
 AJAX
 Server API
 JSON / XML / AJAX
Frameworks and libraries
 Libraries
 Knockout.js
 Frameworks
 Backbone.js
 Angular.js
MVVM




Handles single or multiple ViewModels
Observer pattern
DOM elements bind to the model
Built-in templating
Example
// Here's my data model
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function() {
// Knockout tracks dependencies automatically. It knows that fullName depends on
firstName and lastName, because these get called when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
Hands on Knockout.js
MVC
Overview







Models
Views
Collections
RESTful Persistence
Events
Routers
Dependencies
Model Example
var Task = Backbone.Model.extend({});
var task = new Task({title: “Fix Bugs”});
var title = task.get(“title");
Model Concepts




Default values
Getters & Setters
Listening for changes to your model
Validation
View Example
 Template
<script type="text/template" id=“task-template">
<div class="view">
<p>Title: <input type="text" value="<%= title%>"/></p>
</div>
</script>
 Rendering Container
<div id="container">Your task goes here.</div>
 Define the script
var TaskView = Backbone.View.extend({
el: '#container',
model: task,
template: _.template($("#task-template").html()),
initialize: function(){this.render();},
render: function(){this.$el.html(this.template(this.model.toJSON()));}
});
// initialize view
new TaskView();
Collections Example
var TasksCollection = Backbone.Collection.extend({
model: Task
});
var myTask = new Task({title:'Read the whole book', id: 2});
var tasks = new TasksCollection([myTask]);
Collections Concepts






Adding / Removing Models
Retrieving Models
Listening for events
Resetting / Refreshing
Underscore utility functions
Chainable API
RESTful Persistence
 Fetching models
 Saving models to the server
 Deleting models from the server
Events Example 1 / 2
var task = {};
// Mixin
_.extend(task, Backbone.Events);
// Add a custom event
task.on(‘completed’, function(msg){…});
// Trigger the custom event
task.trigger(‘completed‘, 'our event');
// Removes event bound to the object
obj.off(‘completed’)
Events Example 2 / 2
var a = _.extend({}, Backbone.Events);
var b = _.extend({}, Backbone.Events);
var c = _.extend({}, Backbone.Events);
// add listeners to A for events on B and C
a.listenTo(b, 'anything', function(event){ console.log("anything happened"); });
a.listenTo(c, 'everything', function(event){ console.log("everything happened"); });
// trigger an event
b.trigger('anything'); // logs: anything happened
// stop listening
a.stopListening();
// A does not receive these events
b.trigger('anything');
c.trigger('everything');
Router Example
var TaskRouter = Backbone.Router.extend({
/* define the route and function maps for this router */
routes: {
"about" : "showAbout",
"search/:query" : "searchTasks",
"search/:query/p:page" : "searchTasks"
},
showAbout: function(){…},
searchTasks: function(query, page){
var page_number = page || 1;
…
}
});
var myTaskRouter = new TaskRouter();
Backbone.history.start();
Dependencies
 Underscore || Lo-Dash
 Json2.js for RESTful (IE7), history support via Backbone.Router
and DOM manipulation with Backbone.View
 jQuery || Zepto
Hands on Backbone.js
Resources
 https://github.com/thomasdavis/backbonetutorials/blob/ghpages/videos/beginner/index.html
 https://github.com/addyosmani/todomvc/blob/ghpages/architecture-examples/backbone/js/views/app.js
 http://www.infragistics.com/community/blogs/nanil/archive/2013/
04/01/exploring-javascript-mv-frameworks-part-1-hellobackbonejs.aspx
 http://addyosmani.github.com/backbone-fundamentals/
 http://www.infragistics.com/products/jquery
 http://knockoutjs.com/
Expect very soon: SharePoint Saturday!
 Saturday, June 8, 2013
 Same familiar format – 1 day filled with sessions
focused on SharePoint technologies
 Best SharePoint professionals in the region
 Registrations will be open next week (15th)!
 www.SharePointSaturday.eu
Thanks to our Sponsors:
Diamond Sponsor:
Platinum Sponsors:
Gold Sponsors:
Swag Sponsors:
Media Partners: