Intro to KnockoutJS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Intro to KnockoutJS

  • 2,038 views
Uploaded on

Introduction to KnockoutJS and MVC frameworks.

Introduction to KnockoutJS and MVC frameworks.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,038
On Slideshare
2,034
From Embeds
4
Number of Embeds
2

Actions

Shares
Downloads
45
Comments
0
Likes
0

Embeds 4

http://www.linkedin.com 3
http://www.php-talks.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. JOURNEY THROUGH MVC ARCHITECTURE USING KNOCKOUTJS KIANOSH POURIAN
  • 2. WHO AM I?WEB DEVELOPER WITH 12+ YEARS EXPERIENCE IN FRONT END DEVELOPMENTWORKED ON PROJECTS FOR ISOBAR/MOLECULAR VMWARE MIT NOVARTISBLOG AT: INNOVATORYLIFE.COMTWITTER: @KIANOSHP
  • 3. WHAT IS MVC?THE IDEA BEHIND [MVC] IS TO MAKE A CLEAR DIVISION BETWEEN DOMAIN OBJECTS THAT MODEL OURPERCEPTION OF THE REAL WORLD AND PRESENTATIONOBJECTS THAT ARE THE UI ELEMENTS WE SEE ON THE SCREEN…DOMAIN OBJECTS SHOULD BE COMPLETELYSELF CONTAINED AND WORK WITHOUT REFERENCE TOTHE PRESENTATION, THEY SHOULD ALSO BE ABLE TO SUPPORT MULTIPLE PRESENTATION, POSSIBLY SIMULTANEOUSLY. MARTIN FOWLER
  • 4. MV* OR MVWTF (MVC, MVP, MVVM, ETC...)BACKBONEJSEMBERJAVASCRIPTMVCKNOCKOUTJSBATMANJSWHATEVER THE LATEST FRAMEWORK THAT HAS BEENWRITTEN IN THE LAST HOUR...
  • 5. MV* REFERENCETODO MVC SITEUNDERSTANDING MVVMJAVASCRIPT MVC JUNGLEKNOCKOUTJSANY ARTICLE BY ADDY OSMANI
  • 6. BENEFITS OF MV* FRAMEWORKSEPARATION OF CONCERNSEASIER OVERALL MAINTENANCESIDE BY SIDE DEVELOPMENTORGANIZATION
  • 7. A COMPLEX SYSTEM THAT WORKS IS INVARIABLY FOUNDTO HAVE EVOLVED FROM A SIMPLE SYSTEM THAT WORKS. JOHN GAULE
  • 8. WHAT IS MVVM?MVVM WAS ORIGINALLY DEFINED BY MICROSOFT FOR USE WITH WINDOWS PRESENTATION FOUNDATION (WPF) AND SILVERLIGHT, HAVING BEEN OFFICIALLY ANNOUNCED IN2005 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.
  • 9. MODEL THE MODEL IN MVVM REPRESENTS DOMAIN-SPECIFICDATA 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.
  • 10. VIEWTHE 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 DATATHAT IS THE JOB OF THE CONTROLLER OR IN THIS CASE THE VIEWMODEL.
  • 11. VIEWMODELTHE VIEWMODEL, AS THE NAME SUGGESTS, IS THE GOBETWEEN 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.
  • 12. WHY USE KNOCKOUTJS?DECLARATIVE BINDINGS: EASILY ASSOCIATE DOMELEMENTS WITH MODEL DATA USING A CONCISE,READABLE SYNTAXAUTOMATIC UI REFRESH: WHEN YOUR DATA MODELSSTATE CHANGES, YOUR UI UPDATES AUTOMATICALLYDEPENDENCY TRACKING: IMPLICITLY SET UP CHAINS OFRELATIONSHIPS BETWEEN MODEL DATA, TO TRANSFORMAND COMBINE ITTEMPLATING: QUICKLY GENERATE SOPHISTICATED,NESTED UIS AS A FUNCTION OF YOUR MODEL DATA
  • 13. EXAMPLE FLICKER APP
  • 14. MODELVAR 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; };
  • 15. 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>
  • 16. VIEWMODELVAR PHOTOVIEWMODEL = { PHOTOS: KO.OBSERVABLEARRAY([]), FAVORITES: KO.OBSERVABLEARRAY([]), ... };
  • 17. VIEWMODEL (CONTINUED)VAR PHOTOVIEWMODEL = {... 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); }); }); },...};! ! ! ! ! ! ! !
  • 18. VIEWMODEL (CONTINUED)VAR PHOTOVIEWMODEL = {... CREATESRC: FUNCTION(FARMID, SERVERID, ID, SECRET, SIZE) { RETURN HTTP://FARM + FARMID + .STATICFLICKR.COM/ +SERVERID + / + ID + _ + SECRET + (SIZE === "THUMBNAIL" ?"_S.JPG" : "_N.JPG"); },...};! !
  • 19. TRUE SEPARATION OF CONCERNSCOMMON COMPLAINT OF KNOCKOUTJS IS THE WHATSEEMS LIKE THE MIXING OF JAVASCRIPT, DATA-BINDATTRIBUTES, AND MARKUP.HOWEVER KNOCKOUTJS ALLOWS YOU TO CREATECUSTOM BINDINGS. BINDING PROVIDER IMPLEMENTSTWO 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
  • 20. DATA-CLASS BINDINGONE 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.
  • 21. DATA-CLASS BINDINGVAR BINDINGS = { RETRIEVEPHOTOS: { SUBMIT: VIEWMODEL.GETPHOTOS }, RENDERPHOTOTEMPLATE : { TEMPLATE: PHOTOS-TEMPLATE }};! ! !
  • 22. DATA-CLASS BINDINGKO.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; };};! ! ! ! ! ! ! !
  • 23. DATA-CLASS BINDING // SET KOS 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);})();
  • 24. KNOCKBACKJSKNOCKBACKJS COMBINES THE ADVANTAGES OF BACKBONEJS ANDKNOCKOUTJS CREATING A RATHER UNIQUE SOLUTION TO THESHORTCOMINGS OF EITHER FRAMEWORK. BACKBONES ORM BACKBONESS BUILT-IN SERIALIZATION/DESERIALIZATION KNOCKOUTS MVVM FRAMEWORK KNOCKOUTS DATA-BIND SORCERY BACKBONES ROUTING AND HISTORY SUPPORT KNOCKBACKS PROPER SEPARATION OF CONCERNS
  • 25. THANK YOUTWITTER: @KIANOSHPBLOG: INNOVATORYLIFE.COMPRESENTATION INFO: HTTP://KIANO.SH/RIB8KH