1. 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’ };

2. Contents  Past vs. present  Usage  Approaches  Frameworks and libraries  Knockout.js  Backbone.js  Hands on

3. Past vs. present  Past  Static HTML  Server rendered HTML  Present  JavaScript

4. Example

7. Usage Improve User Experience

8. Approaches  AJAX  Server API  JSON / XML / AJAX

9. Frameworks and libraries  Libraries  Knockout.js  Frameworks  Backbone.js  Angular.js

11. MVVM  Handles single or multiple ViewModels  Observer pattern  DOM elements bind to the model  Built-in templating

12. 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

13. Hands on Knockout.js

15. MVC

16. Overview  Models  Views  Collections  RESTful Persistence  Events  Routers  Dependencies

17. Model Example var Task = Backbone.Model.extend({}); var task = new Task({title: “Fix Bugs”}); var title = task.get(“title");

18. Model Concepts  Default values  Getters & Setters  Listening for changes to your model  Validation

19. View Example  Template Title: "/>  Rendering Container Your task goes here.  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();

20. 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]);

21. Collections Concepts  Adding / Removing Models  Retrieving Models  Listening for events  Resetting / Refreshing  Underscore utility functions  Chainable API

22. RESTful Persistence  Fetching models  Saving models to the server  Deleting models from the server

23. 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’)

24. 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');

25. 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();

26. Dependencies  Underscore || Lo-Dash  Json2.js for RESTful (IE7), history support via Backbone.Router and DOM manipulation with Backbone.View  jQuery || Zepto

27. Hands on Backbone.js

28. Resources  https://github.com/thomasdavis/backbonetutorials/blob/gh- pages/videos/beginner/index.html 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 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://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://addyosmani.github.com/backbone-fundamentals/  http://www.infragistics.com/products/jquery http://www.infragistics.com/products/jquery  http://knockoutjs.com/ http://knockoutjs.com/

29. 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 www.SharePointSaturday.eu

30. Thanks to our Sponsors: Diamond Sponsor: Platinum Sponsors: Gold Sponsors: Swag Sponsors: Media Partners: