KnockoutJS: Web Dev Bliss

16
KnockoutJS Data-bind your way to dynamic HT ML UIs with clean, maintainable code

description

Web development with KnockoutJS is sweet: data-binding, MVVM, automatic UI refresh, dependency tracking, and data templates make web development easier. Stop manipulating the DOM. Start writing clean, object oriented JavaScript.

Transcript of KnockoutJS: Web Dev Bliss

Page 1: KnockoutJS: Web Dev Bliss

KnockoutJSData-bind your way to dynamic HTML UIs with clean, maintainable code

Page 2: KnockoutJS: Web Dev Bliss

Le Knockout?

It gives structure to your JS code!

And it’s easy!

It’s data-binding for your HTML!

Page 3: KnockoutJS: Web Dev Bliss

And, fine sir, what problems does it

solve?

DOM manipulation

Event handler soup

Page 4: KnockoutJS: Web Dev Bliss

Mmmm hmmmm. Go on…

Knockout is awesome! Blah blah derp…

Declarative bindingsAutomatic UI refresh

Dependency tracking

Data templates

Page 5: KnockoutJS: Web Dev Bliss

Cereal-eatin’ man says, show me the

codez!

knockout.GetToWork()

Page 6: KnockoutJS: Web Dev Bliss

Let’s try out Declarative Bindings

Page 7: KnockoutJS: Web Dev Bliss

Data binding is easy!

Derp! Yeah, so easy; it’s just the data-bind attribute

Page 8: KnockoutJS: Web Dev Bliss

Let’s try out Automatic UI

Refresh

Page 9: KnockoutJS: Web Dev Bliss

Automatic UI refresh is easy, too!

Oh, yeah, blah blah it’s just the ko.observable thingy!

Page 10: KnockoutJS: Web Dev Bliss

Let’s try out Dependency Tracking

Page 11: KnockoutJS: Web Dev Bliss

Dependency tracking is the derp!

You see, my dear, ko.dependentObservable lets you setup complex UI relationships and dependencies with ease.

Page 12: KnockoutJS: Web Dev Bliss

Let’s try out Templating

Page 13: KnockoutJS: Web Dev Bliss

Herp ‘a derp, templating is so

simple!

The template binding lets you to render UI for model data!

Page 14: KnockoutJS: Web Dev Bliss

Demos look good…but does it work

in the real world?

Page 15: KnockoutJS: Web Dev Bliss

1. Data binding

2. Auto UI Refresh

3. Dependency tracking

4. Data templates

RECAP

Page 16: KnockoutJS: Web Dev Bliss

Thank you!(Hope this has helped!)

Try KnockoutJS for yourself, right in your web browser:

learn.knockoutjs.com