slides - JS(Saturday)

quaggafoulInternet and Web Development

Dec 14, 2013 (3 years and 7 months ago)

81 views

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
t
emplating


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/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


S
ame 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: