Bringing the light to the client with KnockoutJS

Bringing the light to the client
with KnockoutJS

var speaker = {
name: “Boyan Mihaylov”,
company: “Ebita.dk”
};

About me

 Software Developer @ Ebita.dk
 Software architectures / system integration
 Best practices
 Web trends
 (Almost) Ms.c. in Computer Science @ The
University of Copenhagen
 Teaching assistant @ UCPH
 Principles of Computer System Design

What‟s there for today?

 Why JavaScript
 Why MV* patterns
 What is KnockoutJS
 How it works
 Extensibility

Why is JavaScript so popular?

 Runs in the browser
 No 3rd-party software
 Considerably fast (in the latest browsers)
 Low entry barriers
 a.k.a. (reasonably) low learning curve
 Still in the game with HTML5

Why people hate JavaScript?

 “Few” programming misunderstandings
 Global variables
 The proper “this” in functions
 …
 Browser (in)compatibility
Especially the blue guy
behind

jQuery for the win!

 Rich API for DOM manipulation
 Traversing
 Event handling
 Animations
 Browser compatibility

Before & after jQuery

if (document.getElementById) ...
else if (document.layers) … Before
else if (document.all) …

$(‟#my_id‟) After

But...

Too much of a good thing is not a good thing

The rise of MV* patterns

 MV* stands for Model-View-(many variations)
 MVC (Model-View-Controller)
 MVVM (Model-View-ViewModel)
 Separation between the data and how it is
displayed

MVC vs. MVVM

MVC MVVM
User
User
Determines View
Controller Passes
calls to
View Fires events
ViewModel
State Fires
Fires events
queries events

Manipulates Manipulates
Model Model

MV* libraries & frameworks

http://todomvc.com

What is KnockoutJS?

 MVVM JavaScript library
 MIT license
 No dependencies
 Supports all mainstream browsers
 Active community

Key concepts

Declarative Automatic UI
bindings refresh

Dependency Templating
tracking

First steps: data binding (1)

 The magic of data-bind attribute
<span data-bind=“text: name”></span>

 Apply the bindings
ko.applyBindings(viewModel);

First steps: data binding (2)

 The syntax
data-bind=“binding1: value1, binding2: value2,…”
 Pre-defined bindings
 text – displays text in an element (span, div, ....)
 value – for form elements (input, textarea, ...)
 click – associates a function
 visible – whether to display an element or not
 [ more on Knockout‟s website ]

Meet the observables

var name = ko.observable(„Boyan‟);
 Functions
 Provide getters and setters
 name() is getter, name(„Peter‟) is setter
 Cache values
 Notify on changes
 name.subscribe(function(newValue) { … })

Computed observables (1)

var firstName = ko.observable(„Boyan‟);
var lastName = ko.observable(„Mihaylov‟);
var fullName = ko.computed(function() {
return firstName() + „ „ + lastName();
});

Computed observables (2)

 Track dependencies
 Reevaluate on changes in the dependencies
 Can provide only getter or both getter and
setter
 NOTE: Beware of circular dependencies

Observable arrays

var names = ko.observableArray(
['Boyan', 'Peter', 'Elena']);

 Same as normal observables, but …
 Provide array utility functions
 push, pop, remove, slice, etc.

How to display an array? Indeed,
how??

 Display each item in the array
 Meet the foreach binding
 Repeat the children template for each array item
 Efficient DOM manipulation - update only the
changed parts
 Special context parameter - $parent

Extensibility: make it your way

Extend the observables

 Custom functionality associated with an
observable
 What can we do?
 Validation
 Custom event
 …
var age = ko.observable(10)
.extend({ numeric: true });

Integration with other libraries

Can we use
Knockout
with jQuery?

I don‟t
Yes, yes, yes!
know…

Custom bindings (1)

<div data-bind="myBinding: data">…</div>

Custom bindings (2)

ko.bindingHandlers.myBinding = {
// Set initial state for the DOM element
// or register event handlers
init: function(element, valueAccessor) { },

// Whenever the value changes
update: function(element, valueAccessor) { }
};

Custom bindings (3)

 Parameters
 element – the bound DOM element
 valueAccessor – a function, which returns the
value (an observable or a plain value)
 allBindingsAccessor – a function, which returns all
other bindings set to the element
 [ some more parameters on Knockout‟s website ]

Custom providers (1)

 Looks nice

<div data-bind="text: name"></div>


 Getting a bit messy

<div data-bind="text: name, visible:
items().length > 0 && amICool(),
customBinding: { item: 5 },
click: showMeMoreCoolStuff"></div>


 A complete disaster!

<div data-bind="text: name, visible:
items().length > 0 && amICool(),
customBinding: { item: 5, count: getGount
}, click: showMeMoreCoolStuff, children: {
showOnly: myChildren().length > 5,
deleteOn: „mouseover‟ }, reset:
„onleave‟"></div>


 Don‟t like the data-bind attributes?
 Your markup is too messy?
 All designers in the company hate you?
 …


 We have a solution for you!

var myBindingProvider = {
// does a node have bindings?
nodeHasBindings: function(node) { },
// give me the bindings!
getBindings: function(node, context) {}
};


 Use id/class for attaching bindings
 Knockout.Unobtrusive plugin
 Store bindings in jQuery $.data on the
elements
 Use more specific attributes
 e.g., data-bind-text, data-bind-image, …

Nice to read

 http://www.knockoutjs.com

 http://www.knockmeout.net

 http://groups.google.com/group/knockoutjs

Expect very soon: SharePoint Saturday!

 Saturday, June 8, 2013
 Same familiar format – 1 day filled with sessions
focused on SharePoint technologies
 Best SharePoint professionals in the region
 Registrations will be open next week (15th)!
 www.SharePointSaturday.eu

Thanks to our Sponsors:
Diamond Sponsor:

Platinum Sponsors:

Gold Sponsors:

Swag Sponsors:

Media Partners:

Bringing the light to the client with KnockoutJS

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Bringing the light to the client with KnockoutJS (20)

More from Boyan Mihaylov (17)

Recently uploaded (20)

Bringing the light to the client with KnockoutJS