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  Rendering Container

 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/gh pages/videos/beginner/index.html

https://github.com/addyosmani/todomvc/blob/gh pages/architecture-examples/backbone/js/views/app.js

http://www.infragistics.com/community/blogs/nanil/archive/2013/ 04/01/exploring-javascript-mv-frameworks-part-1-hello backbonejs.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 (15 th )!

www.SharePointSaturday.eu

Thanks to our Sponsors:

Diamond Sponsor: Platinum Sponsors: Gold Sponsors: Swag Sponsors: Media Partners: