Client side mvvm pattern

CLIENT SIDE MVVM PATTERN

TEST DRIVEN UIS IN SHAREPOINT USING KNOCKOUT.JS

GREG GALIPEAU

CEO/CHIEF ARCHITECT

REPOINT TECHNOLOGIES, LLC

ABOUT

• SHAREPOINT FOCUSED CONSULTING FIRM IN THE WASHINGTON, D.C. AREA

• CONCENTRATIONS

• HIGH QUALITY

• DEVELOPMENT/DESIGN/GOVERNANCE/ARCHITECTURE

• PROGRESSIVE TECHNIQUES (HTML5, CSS3, RESPONSIVE DESIGN)

• STAFFING OF EXPERIENCED SHAREPOINT PROFESSIONALS

• WWW.REPOINTTECHNOLOGIES.COM

• OBLIGATORY SOCIAL PAGES

• @REPOINTTECH

• FACEBOOK.COM/REPOINTTECHNOLOGIES

• ABOUT ME…

• GREG GALIPEAU

• CEO/CHIEF ARCHITECT

• @GGALIPEAU

• [email protected]

OFFICE/SHAREPOINT APPS

• MIND-O-MAPPER: WORD/EXCEL/POWERPOINT APP. WINNER OF THE INAUGURAL MICROSOFT APP DEVELOPMENT CONTEST

• ULTIMATESLIDER: SHAREPOINT IMAGE/CONTENT SLIDER/ROTATOR THAT HAS “LOTS” OF CONFIGURATIONS. ONE OF THE FEW SLIDERS ON THE MARKET (IF NOT THE ONLY) THAT WORKS ON ANONYMOUS/PUBLIC SITES TOO

DEVELOPING A USER INTERFACE• MURKY BLEND OF

• DATA

• INTERACTION DESIGN

• VISUAL DESIGN

• CONNECTIVITY

• MULTITHREADING

• SECURITY

• VALIDATION

• UNIT TESTING

• TOUCH OF VOODOO

Often times is the most volatile area of many applications and is the least tested in terms of unit testing.

Server-side programming allows some testing of UI. But… the industry is moving towards client-side programming to get faster, better, more interactive sites (facebook, twitter, etc…)

POSTBACKS ARE A THING OF THE PAST• NOT A FACT – JUST MY OPINION

• WHENS THE LAST TIME YOU SAW A REALLY GREAT COMMERCIAL APPLICATION AND HAD TO WAIT FOR THE PAGE TO RELOAD EVERY TIME YOU HIT A BUTTON?

• WHAT HAPPENS WITH MOBILE APPS WHEN SOMEONE LOSES CONNECTIVITY ON SAVE?

• WHEN ARE POSTBACKS RELEVANT

• SWITCHING PAGES ON A WEBSITE

• WHEN ARE POSTBACKS NOT RELEVANT

• SUBMITTING INFORMATION TO SERVER

• DYNAMIC FUNCTIONALITY ON THE UI

POPULAR DESIGN PATTERNS FOR UI• MOST POPULAR

• MVC (MODEL VIEW CONTROLLER)

• INFLUENTIAL – CONSIDERED THE GODFATHER OF UI DESIGN PATTERNS BY MANY

• DEVELOPED IN 70S IN SMALLTALK-80

• POPULARIZED IN JAVA PROGRAMMING

• FOR YOU .NET PROGRAMMERS OUT THERE. I AM TALKING ABOUT THE PATTERN NOT THE ASP.NET MVC PROJECT. THAT IS JUST AN IMPLEMENTATION OF THIS MODEL.

• MVP (MODEL VIEW PRESENTER)

• MODIFICATION OF THE MVC PATTERN SEPARATING MORE CONTROL TO THE UI

• COUPLE WAYS TO DO IT

• SUPERVISING CONTROLLER

• PASSIVE VIEW

• MVVM – ORIGINATED FROM MICROSOFT FOR THE WPF PLATFORM AND XAML PROGRAMMING. INTRODUCED BY MARTIN FOWLER – IF YOU DON’T KNOW HIM, READ ABOUT HIM. ONE OF THE BEST PATTERN PEOPLE OUT THERE.

WHY MVVM• SOMETIMES WE USE COMPLICATED DESIGN PATTERNS, WHICH REQUIRE WRITING A

LOT OF CODE BECAUSE THE UI PLATFORM DOES NOT LEND ITSELF WELL TO A SIMPLE PATTERN

• WHAT’S NEEDED IN A PATTERN?

• EASY TO BUILD UIS USING SIMPLE, TIME-TESTED, DEVELOPER-APPROACHED DESIGN PATTERNS

• WHY MVVM?

• CLEAR SEPARATION OF THE DEVELOPMENT OF THE GUI (VIEW) FROM THE BUSINESS LOGIC (MODEL)

• ONE OBJECT RESPONSIBLE FOR EXPOSING THE DATA OBJECTS FROM THE MODEL (VIEWMODEL)

• VERY CLEAR – ONE TO ONE RELATIONSHIP FROM VIEW TO VIEWMODEL

• LITTLE ROOM FOR INTERPRETATION OF WHAT GOES WHERE LIKE IN THE MVC OR MVP MODEL

• IN ESSENCE, THE VIEWMODEL HANDLES MOST, IF NOT ALL, OF THE VIEW’S DISPLAY LOGIC

• DESIGNED PRIMARILY SO “DATA BINDING” COULD WORK IN MICROSOFT’S WPF FRAMEWORK. MICROSOFT WAS BASICALLY TRYING TO FIND A WAY TO DO DATA BINDING SUCH AS ASP.NET DOES WITH POSTBACKS (PAGE REFRESHES) WITHOUT DOING POSTBACKS. AND, THEY STUMBLED UPON THIS GREAT PATTERN.

IS THIS JUST FOR MICROSOFT?• NO, JUST LIKE SMALLTALK-80 CREATED MVC – A PATTERN IS A

PATTERN

• PATTERNS ARE MORE PHILOSOPHY BASED AND IT IS UP TO VARIOUS TECHNOLOGIES TO IMPLEMENT THE PATTERNS PER THE RULES OF THE PATTERN

• MANY MVVM TECHNOLOGIES HAVE BEEN POPPING UP RECENTLY AND IS BECOMING A DEFACTO WAY TO BUILD HTML5, JAVASCRIPT AND CSS3 BASED WEBSITES. WHY? BECAUSE HTML5 AND JAVASCRIPT CAN DO SO MUCH NOW A DAYS. WE NEED A WAY TO CLEARLY TEST THE UI LAYER AND MVVM WORKS PERFECTLY FOR THAT

WHY MVVM - SIMPLIFIED• UNIT TESTING 0N THE UI – MOST IMPORTANT REASON FOR A

UI PATTERN

• CLEAR DELINEATION BETWEEN THE VIEW (HTML), THE VIEWMODEL (UI FUNCTIONALITY) AND THE MODEL (BUSINESS LAYER)

• CREATE STUNNING WEBSITES WITH RESPONSIVE DESIGN, ANIMATIONS, REUSE, SIMPLE HTML, BETTER CSS. THE POSSIBILITIES ARE ENDLESS WHEN YOU DON’T CROWD YOUR VIEW WITH NEEDLESS FUNCTIONALITY CODE AND LET THE VIEW JUST BE THE HTML AND BIND TO THE VIEWMODEL

INCORPORATING MVVM (KNOCKOUT)• KNOCKOUT.JS – HTTP://KNOCKOUT.JS.COM

• PURE JAVASCRIPT MVVM PATTERN

• CONTAINS

• DECLARATIVE BINDINGS

• AUTOMATIC UI REFRESH

• DEPENDENCY TRACKING

• TEMPTING

• GREAT DOCUMENTATION INCLUDING INTERACTIVE TUTORIALS

KNOCKOUT.JS INTERACTIVE TUTORIAL

HTTP://KNOCKOUT.JS.COM

HOW DO YOU DO UNIT TESTING IN JAVASCRIPT?• HTTP://QUNIT.JS.COM

• “QUNIT IS A POWERFUL, EASY-TO-USE JAVASCRIPT UNIT TESTING FRAMEWORK. IT'S USED BY THE JQUERY, JQUERY UI AND JQUERY MOBILE PROJECTS AND IS CAPABLE OF TESTING ANY GENERIC JAVASCRIPT CODE.“

OTHER TOOLS?• JQUERY – HARD TO FIND A PROJECT THAT DOESN’T USE JQUERY NOW A

DAYS. MAKES WRITING PURE JAVASCRIPT SO MUCH EASIER.

• KNOCKOUT MAPPING – MAPPING PLUG-IN FOR KNOCKOUT SO WE DON’T HAVE TO WRITE OUR BINDINGS FOR OUR PROPERTIES ONE BY ONE. IT DOES IT FOR US. HTTP://KNOCKOUTJS.COM/DOCUMENTATION/PLUGINS-MAPPING.HTML

• KNOCKOUT VALIDATION – VALIDATION PLUG-IN FOR KNOCKOUT. HTTPS://GITHUB.COM/KNOCKOUT-CONTRIB/KNOCKOUT-VALIDATION

• WINDOWS COMMUNICATION FOUNDATION (WCF) – USED FOR WEB SERVICE LAYER USING REST SERVICES. WHY – SINCE THE MVVM PATTERN IS ALL CLIENT-SIDE, WE NEED TO GET INFORMATION OFF THE SERVER AND DATABASE. WEB SERVICES IS THE WAY TO GO. WCF ALLOWS FOR REST SERVICES THAT PRODUCE JSON. THIS ALLOWS SEAMLESS BINDING WITH OUR CLIENT SIDE.

• BOOTSTRAP – CSS STARTER LAYER DEVELOPED BY TWITTER. VERY HELPFUL IN THE BEGINNING OF ANY PROJECT TO GET BEAUTIFUL UIS AND FORM ELEMENTS. TIP – SOMETIME ITS BETTER TO START HERE WITH PROTOTYPES THAN START WITH A DESIGN FIRM.

DEMOWALKTHROUGH AND THE VARIOUS STEP BY STEP

DOCUMENTATION

GREG’S RULES FOR KNOCKOUT IN SHAREPOINT WEBPARTS

1. VISUAL WEBPART = KNOCKOUT VIEW (ADD THE WEBPARTS TO A FOLDER CALLED VIEWS TO MAKE IT CLEAR)

2. 1 WEBPART/VIEW PER 1 JAVASCRIPT VIEWMODEL (ADD THE JAVASCRIPT FILES TO A MODULE CALLED VIEWMODELS)

NOTE: DON’T FORGET TO REGISTER THE .JS FILE IN THE ELEMENTS.XML

3. USE OBJECT ORIENTED CONCEPTS IN YOUR VIEW MODEL. IT WILL HELP WHEN SOLUTION GETS LARGE. YES, JAVASCRIPT IS OBJECT ORIENTED! PUT FUNCTIONS WITHIN OTHER FUNCTIONS…

VAR PROJVIEWMODEL = NEW PROJECTLISTVIEWMODEL();

FUNCTION PROJECTLISTVIEWMODEL() {

VAR SELF = THIS;

SELF.ADD = FUNCTION () {

};

}

GREG’S RULES FOR KNOCKOUT IN SHAREPOINT WEBPARTS

MAIN FUNCTION

PERSONALINFORMATION = FUNCTION () {

THIS.LOAD = FUNCTION() {

$.AJAX({

TYPE: "POST",

CACHE: FALSE,

CONTENTTYPE: "APPLICATION/JSON; CHARSET=UTF-8",

URL: "/_VTI_BIN/EODSSERVICES/REST/DATA.SVC/GETPAGEDATA",

DATA: JSON.STRINGIFY(PAGEDATA),

DATATYPE: "JSON",

SUCCESS: FUNCTION (DATA) {

// ACTIVATES KNOCKOUT.JS ON OUR VIEWMODEL

THIS.VIEWMODEL = NEW PERSONALINFORMATIONVIEWMODEL(DATA);

KO.APPLYBINDINGS(THIS.VIEWMODEL);

},

ERROR: FUNCTION (XHR, STATUS, ERROR) {

//LOG

}

});

}

}

VIEW MODEL

PERSONALINFORMATIONVIEWMODEL = FUNCTION (DATA) {

VAR SELF = THIS;

KO.VALIDATEDOBSERVABLE(KO.MAPPING.FROMJS(DATA, PERSONALINFOVALIDATIONMAPPING, SELF));

SELF.SAVE = FUNCTION () {

VAR PERSONALINFO = KO.MAPPING.TOJS(SELF);

$.AJAX({

TYPE: "POST",

CACHE: FALSE,

CONTENTTYPE: "APPLICATION/JSON; CHARSET=UTF-8",

URL: "/_VTI_BIN/EODSSERVICES/REST/PERSON.SVC/SAVEPREHIRE",

DATA: JSON.STRINGIFY({ "PERSONINFORMATION": PERSONALINFO }),

DATATYPE: "JSON",

SUCCESS: FUNCTION (DATA) {

//MESSAGE

},

ERROR: FUNCTION (XHR, STATUS, ERROR) {

//LOG

}

});

};

SELF.CLOSE = FUNCTION () {

RETURN EODS.UTILS.BUILDCANCELBOX();

};

};

4. VIEW MODEL JAVASCRIPT FILE HAS MINIMAL TWO FUNCTIONS

Note: ko.validateObservable is from validation plugin.

Ko.Mapping is from mapping plugin. If you

don’t have the mapping plugin you can write your

observable properties one by one by looping through the data and writing ko.observable

properties

Validation Mapping: Will discuss in a few

slides

KO.MAPPING.FROMJS IS THE SAME AS

SELF.FIRSTNAME = KO.OBSERVABLE(“GREG”);

SELF.LASTNAME = KO.OBSERVABLE(“GALIPEAU”);

ETC…

THE KO.MAPPING BASICALLY TAKES THE JSON STRUCTURE RETURNED FROM THE WEB SERVICE AND DYNAMICALLY LOOPS THROUGH THE DATA AND BUILDS EACH OBSERVABLE FOR YOU. IT’S GREAT WHEN YOU HAVE LARGE DATASETS.

GREG’S RULES FOR KNOCKOUT IN SHAREPOINT WEBPARTS

5. REGISTER THE JAVASCRIPT VIEW MODELL AND CALL THE MAIN FUNCTION FROM THE CODE BEHIND OF YOUR WEBPART/VIEW IN ORDER TO INITIATE THE AJAX LOAD FROM YOUR WEBSERVICE

PROTECTED VOID PAGE_LOAD(OBJECT SENDER, EVENTARGS E)

{

SPSITE SITE = SPCONTEXT.CURRENT.SITE;

LITERALCONTROL JSRESOURCE = NEW LITERALCONTROL();

JSRESOURCE.TEXT += "<SCRIPT TYPE=\"TEXT/JAVASCRIPT\" SRC=\"" + SITE.URL + "/STYLE

LIBRARY/VIEWMODELS/PERSONALINFORMATION.JS"></SCRIPT>";

JSRESOURCE.TEXT += "<SCRIPT TYPE=\"TEXT/JAVASCRIPT\">$(FUNCTION () {

VAR PERSONALINFORMATION = NEW EODS.PERSONALINFORMATION();

PERSONALINFORMATION.LOAD(); });

</SCRIPT>";

PAGE.HEADER.CONTROLS.ADD(JSRESOURCE);

}

GREG’S RULES FOR KNOCKOUT IN SHAREPOINT WEBPARTS

6. CREATE YOUR UNIT TESTS “BEFORE” YOUR VIEW. BEST WAY TO DO TDD:

• CREATE UNIT TESTS FOR ALL THE FUNCTIONALITY YOU EXPECT ON YOUR VIEW MODEL

• LET THE UNIT TEST FAIL

• CREATE YOUR VIEW MODEL

• GO BACK TO THE UNIT TEST UNTIL IT PASSES

• CREATE YOUR VIEW

7. LEARN CUSTOM KNOCKOUT BINDINGS FOR COMPLEX/REUSABLE SITUATIONS INSTEAD OF FORCING IT

• EXAMPLES:

• JQUERY MODAL DIALOGS

• DATETIME PICKERS

• ETC…

GREG’S RULES FOR KNOCKOUT IN SHAREPOINT WEBPARTS

8. WHEN USING DYNAMIC KO.MAPPING (INSTEAD OF MANUALLY WRITING YOUR KO.OBSERVABLES) USE THE MAPPING FUNCTIONALITY TO “EXTEND” AND VALIDATE. TECHNICALLY YOU ARE OVERWRITING THE KO.MAPPING FUNCTIONALITY AND RE-WRITING THE OBSERVABLE IN ORDER TO EXTEND IT FOR VALIDATION PURPOSES

VAR PERSONALINFOVALIDATIONMAPPING = {

PERSON_FIRST_NAME: {

CREATE: FUNCTION (OPTIONS) {

RETURN KO.OBSERVABLE(OPTIONS.DATA).EXTEND({REQUIRED: TRUE});

}

},

PERSON_LAST_NAME: {

CREATE: FUNCTION (OPTIONS) {

RETURN KO.OBSERVABLE(OPTIONS.DATA).EXTEND({REQUIRED: TRUE});

}

}

}

NOTE: KO.MAPPING IS A PLUGIN: HTTP://KNOCKOUTJS.COM/DOCUMENTATION/PLUGINS-MAPPING.HTML

NOTE: KO.VALIDATION IS A PLUGIN: HTTPS://GITHUB.COM/KNOCKOUT-CONTRIB/KNOCKOUT-VALIDATION

IS IT ALWAYS AS SIMPLE AS THAT?• NO

• MVVM CREATES A GREAT BINDING PATTERN FOR SIMPLE UI ELEMENTS.

• BUT… THE FRAMEWORKS USED TO IMPLEMENT THE PATTERN CAN GET TRICKY

• I CHOSE KNOCKOUT.JS BECAUSE

• IT IS VERY SIMPLE FOR 90% OF THE SITUATIONS

• IT HAS GREAT SUPPORT

• IT HAS A GREAT USER COMMUNITY WITH LOTS OF PLUG-INS

• IT IMPLEMENTS MVVM VERY WELL

• BUT…

• WHEN A SITUATION IS OUTSIDE THE NORM, YOU REALLY HAVE TO UNDERSTAND HOW THE TOOL WORKS. THIS CAN TAKE MORE TIME IN THESE SITUATIONS THAN TRADITIONAL PROGRAMMING. HOWEVER, I ESTIMATE WE’VE SAVED SO MUCH MORE TIME BY HAVING A SIMPLE 90/10 RULE (90% SIMPLE, 10% HARD). YOU JUST HAVE TO HAVE SOMEONE THAT REALLY UNDERSTANDS THE TOOL BACKWARDS AND FORWARDS FOR THAT 10% HARD SITUATION.