Intro to KnockoutJS

JOURNEY THROUGH MVC
ARCHITECTURE USING
KNOCKOUTJS
KIANOSH POURIAN

WHO AM I?

WEB DEVELOPER WITH 12+ YEARS EXPERIENCE IN FRONT END DEVELOPMENT

WORKED ON PROJECTS FOR

ISOBAR/MOLECULAR

VMWARE

MIT

NOVARTIS

BLOG AT: INNOVATORYLIFE.COM

TWITTER: @KIANOSHP

WHAT IS MVC?

THE IDEA BEHIND [MVC] IS TO MAKE A CLEAR DIVISION
BETWEEN DOMAIN OBJECTS THAT MODEL OUR
PERCEPTION OF THE REAL WORLD AND PRESENTATION
OBJECTS THAT ARE THE UI ELEMENTS WE SEE ON THE
SCREEN…DOMAIN OBJECTS SHOULD BE COMPLETELY
SELF CONTAINED AND WORK WITHOUT REFERENCE TO
THE PRESENTATION, THEY SHOULD ALSO BE ABLE TO
SUPPORT MULTIPLE PRESENTATION, POSSIBLY
SIMULTANEOUSLY.

MARTIN FOWLER

MV* OR MVWTF (MVC, MVP,
MVVM, ETC...)

BACKBONEJS

EMBER

JAVASCRIPTMVC

KNOCKOUTJS

BATMANJS

WHATEVER THE LATEST FRAMEWORK THAT HAS BEEN
WRITTEN IN THE LAST HOUR...

MV* REFERENCE

TODO MVC SITE

UNDERSTANDING MVVM

JAVASCRIPT MVC JUNGLE

KNOCKOUTJS

ANY ARTICLE BY ADDY OSMANI

BENEFITS OF MV* FRAMEWORK

SEPARATION OF CONCERNS

EASIER OVERALL MAINTENANCE

SIDE BY SIDE DEVELOPMENT

ORGANIZATION

A COMPLEX SYSTEM THAT WORKS IS INVARIABLY FOUND
TO HAVE EVOLVED FROM A SIMPLE SYSTEM THAT WORKS.

JOHN GAULE

WHAT IS MVVM?

MVVM WAS ORIGINALLY DEFINED BY MICROSOFT FOR USE
WITH WINDOWS PRESENTATION FOUNDATION (WPF) AND
SILVERLIGHT, HAVING BEEN OFFICIALLY ANNOUNCED IN
2005 BY JOHN GROSSMAN IN A BLOG POST ABOUT AVALON
(THE CODENAME FOR WPF). IT ALSO FOUND SOME
POPULARITY IN THE ADOBE FLEX COMMUNITY AS AN
ALTERNATIVE TO SIMPLY USING MVC.

MODEL

THE MODEL IN MVVM REPRESENTS DOMAIN-SPECIFIC
DATA OR INFORMATION THAT OUR APPLICATION WILL BE
WORKING WITH. A TYPICAL EXAMPLE OF DOMAIN-
SPECIFIC DATA MIGHT BE A USER ACCOUNT (E.G NAME,
AVATAR, E-MAIL) OR A MUSIC TRACK (E.G TITLE, YEAR,
ALBUM). MODELS WILL HOLD THE INFORMATION BUT
TYPICALLY DO NOT HANDLE THE BEHAVIOR.

VIEW

THE VIEW IS THE PART OF APPLICATION THAT THE USER
IS ABLE TO VIEW AND INTERACT WITH THE DATA. THE
VIEW WILL NOT MANIPULATE OR CHANGE THE DATA
THAT IS THE JOB OF THE CONTROLLER OR IN THIS CASE
THE VIEWMODEL.

VIEWMODEL

THE VIEWMODEL, AS THE NAME SUGGESTS, IS THE GO
BETWEEN THE VIEW AND THE MODEL. THE VIEWMODEL
CAN BE CONSIDERED A SPECIALIZED CONTROLLER
THAT ACTS AS A DATA CONVERTER. IT CHANGES
MODEL INFORMATION INTO VIEW INFORMATION,
PASSING COMMANDS FROM THE VIEW TO THE MODEL.
FOR EXAMPLE, THE MODEL MAY CONTAIN A
BOOLEAN VALUE LIKE ISAVAILABLE, IT IS UP TO THE
VIEWMODEL TO INTERPRET THAT AND DISPLAY THE
CORRECT INFORMATION TO THE USER.

WHY USE KNOCKOUTJS?

DECLARATIVE BINDINGS: EASILY ASSOCIATE DOM
ELEMENTS WITH MODEL DATA USING A CONCISE,
READABLE SYNTAX

AUTOMATIC UI REFRESH: WHEN YOUR DATA MODEL'S
STATE CHANGES, YOUR UI UPDATES AUTOMATICALLY

DEPENDENCY TRACKING: IMPLICITLY SET UP CHAINS OF
RELATIONSHIPS BETWEEN MODEL DATA, TO TRANSFORM
AND COMBINE IT

TEMPLATING: QUICKLY GENERATE SOPHISTICATED,
NESTED UIS AS A FUNCTION OF YOUR MODEL DATA

MODEL
VAR FAVORITES, PHOTO;
PHOTO = FUNCTION(ID, OWNER, TITLE, FARMID, SERVERID, SECRET,
ISPUBLIC, ISFRIEND, ISFAMILY)
{
THIS.ID = ID;
THIS.OWNER = OWNER;
THIS.TITLE = TITLE;
THIS.FARMID = FARMID;
THIS.SERVERID = SERVERID;
THIS.SECRET = SECRET;
THIS.ISPUBLIC = ISPUBLIC;
THIS.ISFRIEND = ISFRIEND;
THIS.ISFAMILY = ISFAMILY;
};

FAVORITES = FUNCTION(PHOTO) {
RETURN THIS.PHOTO = PHOTO;
};

VIEW

<DIV ID="RESULTS" DATA-BIND="TEMPLATE: 'PHOTOS-TEMPLATE'"></DIV>
...
<SCRIPT TYPE="TEXT/HTML" ID="PHOTOS-TEMPLATE">
<UL CLASS="CLEARFIX">
{{EACH PHOTOS}}
! <LI CLASS="FLT-LEFT"><IMG SRC="${PHOTOSRC}" ALT="$
{PHOTOOBJ.TITLE}-${PHOTOOBJ.OWNER}" TITLE="${PHOTOOBJ.TITLE}" /></
LI>
{{/EACH}}
</UL>
</SCRIPT>

VIEWMODEL

VAR PHOTOVIEWMODEL = {
PHOTOS: KO.OBSERVABLEARRAY([]),
FAVORITES: KO.OBSERVABLEARRAY([]),
...
};

VIEWMODEL (CONTINUED)
...
GETPHOTOS: FUNCTION(FORMELEMENT) {
VAR SEARCHTAG, THAT;
SEARCHTAG = $(FORMELEMENT).FIND('#SEARCH').VAL();
THAT = THIS;
$.GETJSON(FLICKRURL + SEARCHTAG).DONE(FUNCTION(PHOTODATA) {
RETURN _.EACH(PHOTODATA.PHOTOS.PHOTO, FUNCTION(PHOTO) {
VAR IMAGE;
IMAGE = {
PHOTOOBJ: NEW PHOTO(PHOTO.ID, PHOTO.OWNER, PHOTO.TITLE, PHOTO.FARM,
PHOTO.SERVER, PHOTO.SECRET, PHOTO.ISPUBLIC, PHOTO.ISFRIEND, PHOTO.ISFAMILY),
PHOTOSRC: THAT.CREATESRCTHUMBNAIL(PHOTO.FARM, PHOTO.SERVER,
PHOTO.ID, PHOTO.SECRET)
};
RETURN THAT.PHOTOS.PUSH(IMAGE);
});
});
},
...
};! ! ! ! ! ! ! !

VIEWMODEL (CONTINUED)

...
CREATESRC: FUNCTION(FARMID, SERVERID, ID, SECRET, SIZE) {
RETURN 'HTTP://FARM' + FARMID + '.STATICFLICKR.COM/' +
SERVERID + '/' + ID + '_' + SECRET + (SIZE === "THUMBNAIL" ?
"_S.JPG" : "_N.JPG");
},
...
};! !

TRUE SEPARATION OF CONCERNS
COMMON COMPLAINT OF KNOCKOUTJS IS THE WHAT
SEEMS LIKE THE MIXING OF JAVASCRIPT, DATA-BIND
ATTRIBUTES, AND MARKUP.
HOWEVER KNOCKOUTJS ALLOWS YOU TO CREATE
CUSTOM BINDINGS. BINDING PROVIDER IMPLEMENTS
TWO FUNCTIONS:

NODEHASBINDINGS: THIS TAKES IN A DOM NODE WHICH
DOESN’T NECESSARILY HAVE TO BE AN ELEMENT

GETBINDINGS: RETURNS AN OBJECT REPRESENTING THE
BINDINGS AS APPLIED TO THE CURRENT DATA CONTEXT

DATA-CLASS BINDING

ONE OPTION TO COMBAT THE OVERLY TIED APPLICATION
LOGIC TO THE VIEW IS TO CREATE A CUSTOM BINDING
SIMILAR TO CSS CLASSES. RYAN NIEMEYER HAS
SUGGESTED THIS PROCEDURE. IN ORDER TO
ACCOMPLISH THIS, ONE HAS TO CUSTOMIZE THE
NODEHASBINDINGS AND GETBINDINGS FUNCTIONS.

DATA-CLASS BINDING
VAR BINDINGS = {
RETRIEVEPHOTOS: { SUBMIT: VIEWMODEL.GETPHOTOS },
RENDERPHOTOTEMPLATE : { TEMPLATE: 'PHOTOS-TEMPLATE' }
};! ! !

DATA-CLASS BINDING
KO.CUSTOMBINDINGPROVIDER = FUNCTION(BINDINGOBJECT) {
THIS.BINDINGOBJECT = BINDINGOBJECT;
THIS.NODEHASBINDINGS = FUNCTION(NODE) {
RETURN NODE.GETATTRIBUTE ? NODE.GETATTRIBUTE("DATA-CLASS") : FALSE;
};
};
THIS.GETBINDINGS = FUNCTION(NODE, BINDINGCONTEXT) {
VAR RESULT = {};
VAR CLASSES = NODE.GETATTRIBUTE("DATA-CLASS");
IF (CLASSES) {
CLASSES = CLASSES.SPLIT(' ');
FOR (VAR I = 0, J = CLASSES.LENGTH; I < J; I++) {
VAR BINDINGACCESSOR = THIS.BINDINGOBJECT[CLASSES[I]];
IF (BINDINGACCESSOR) {
VAR BINDING = TYPEOF BINDINGACCESSOR == "FUNCTION" ?
BINDINGACCESSOR.CALL(BINDINGCONTEXT.$DATA) : BINDINGACCESSOR;
KO.UTILS.EXTEND(RESULT, BINDING);
}
}
}
RETURN RESULT;
};
};! ! ! ! ! ! ! !

DATA-CLASS BINDING

// SET KO'S CURRENT BINDINGPROVIDER EQUAL TO OUR NEW BINDING PROVIDER
KO.BINDINGPROVIDER.INSTANCE = NEW KO.CUSTOMBINDINGPROVIDER(BINDINGS);
// BIND A NEW INSTANCE OF OUR VIEWMODEL TO THE PAGE
KO.APPLYBINDINGS(VIEWMODEL);
})();

KNOCKBACKJS
KNOCKBACKJS COMBINES THE ADVANTAGES OF BACKBONEJS AND
KNOCKOUTJS CREATING A RATHER UNIQUE SOLUTION TO THE
SHORTCOMINGS OF EITHER FRAMEWORK.

BACKBONE'S ORM

BACKBONES'S BUILT-IN SERIALIZATION/DESERIALIZATION

KNOCKOUT'S MVVM FRAMEWORK

KNOCKOUT'S DATA-BIND SORCERY

BACKBONE'S ROUTING AND HISTORY SUPPORT

KNOCKBACK'S PROPER SEPARATION OF CONCERNS

THANK YOU

TWITTER: @KIANOSHP

BLOG: INNOVATORYLIFE.COM

PRESENTATION INFO: HTTP://KIANO.SH/RIB8KH

Intro to KnockoutJS

More Related Content

What's hot

Viewers also liked

Similar to Intro to KnockoutJS

Recently uploaded

Intro to KnockoutJS

Editor's Notes