MVVM/MVC in Client-side SPA

1. MVVM/MVC in Client-side SPA varsubTitle = { value: ‘Single page application approaches and usage’, speaker1: ‘StanimirTodorov, 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

5. Example

6. 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 varViewModel = 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 <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 varTaskView= 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 varTasksCollection= Backbone.Collection.extend({ model: Task }); varmyTask= 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 vartask = {}; // 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 varTaskRouter= 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){ varpage_number = page || 1; … } }); varmyTaskRouter= 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/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/

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 (15th)! • www.SharePointSaturday.eu

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