SharePoint Solutions with KnockoutJS

Marc D Anderson

Who Is Marc?• Co-Founder and President of Sympraxis

Consulting LLC, located in the Boston suburb of Newton, MA, USA. Sympraxis focuses on enabling collaboration throughout the enterprise using the SharePoint application platform.• Over 30 years of experience in technology professional services and software development. Over a wide-ranging career in consulting as well as line manager positions, Marc has proven himself as a problem solver and leader who can solve difficult technology problems for organizations across a wide variety of industries and organization sizes.

• Awarded Microsoft MVP for SharePoint Server 2011-2014

Session Overview

• Building SharePoint solutions is changing a lot. Just a few years ago, creating an entire application client-side seemed to many like a foolhardy idea. However, with the maturing of many solid JavaScript development tools and frameworks, it's not only possible, but in many cases preferable to server-side development.

• In this session, we'll look at how you can use KnockoutJS as part of your development toolkit. Whether you're building on SharePoint 2007 with SPServices as the data layer or in SharePoint 2013 using REST, KnockoutJS can help you build rock solid SharePoint solutions that are adaptive and maintainable.

What Is KnockoutJS?

• Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

• Headline features:• Elegant dependency tracking - automatically updates the

right parts of your UI whenever your data model changes.• Declarative bindings - a simple and obvious way to

connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.

• Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code.

Source: http://knockoutjs.com/documentation/introduction.html

Comparing Popular Frameworks

•Declarative bindings• Automatic UI refresh•Dependency Tracking• Templating

• Single page applications (SPAs)•Routing•Data-binding

•Most often used for responsive designs• Sometimes used as a dev framework

•Rolling into AngularJS (Angular and Durandal Converge)

Referencing Script Files

Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisitedhttp://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/

Note the “protocol-less” references

HTML File

Anatomy of KnockoutJS – SharePoint Genus

JavaScript File

Templates

View Model

Startup script

Custom Bindings

Utility Functions

Script References

[SharePoint] Data Sources

Was made possible by the generous support of the following sponsors…

And by your participation… Thank you!

Be sure to fill out your eval form & turn in at the end of the day for a ticket to the

BIG raffle!

Join us for the raffle & SharePint following the last session

Demo

Contact InformationEmail marc.anderson@sympraxisconsulting.

comTwitter @sympmarc

Blog http://sympmarc.com

SPServices http://spservices.codeplex.com

SPXSLT http://spxslt.codeplex.com

Books http://sympmarc.com/books

The Middle Tier Manifesto

http://bit.ly/middletier