Knockout js

13
Hattan Shobokshi JavaScript MVVM with Knockout JS

description

Knockout JS is a new JavaScript library that utilizes that MVVM pattern to build rich web applications. In this talk we will introduce Knockout JS as well as the MVVM pattern. This will be a code heavy presentation as we illustrate the various features of the framework. Using Knockout, you can easily build responsive, maintainable and testable JavaScript applications.We'll explore testing in Javascript and look at how you can use Knockout JS with Jasmine, a Javascript BDD library. I'll show you how to build rich JavaScript applications using a Test Driven Development approach. We'll also look into how you can extend Knockout by creating custom bindings and using it side by side with JQuery. Lastly we'll examine how you can interact with Knockout via ASP.NET applications and go over some best practices for validation and storage of data.

Transcript of Knockout js

Page 1: Knockout js

Hattan Shobokshi

JavaScript MVVM with

Knockout JS

Page 2: Knockout js

*Housekeeping

*Stuttering is a communication disorder involving disruptions, or “disfluencies,” in a person’s speech.

*Across all cultures, roughly 1% of people currently has a stuttering disorder.

*http://westutter.org/

Page 3: Knockout js

Who am I?

Hattan ShobokshiSenior Software Engineer

[email protected]

http://speakerrate.com/hattanhttp://www.slideshare.net/

shobokshi

Page 4: Knockout js

Goals for this talk

•What is MVVM & Knockout JS ?

•Why Knockout JS?

•Testing JavaScript

•Customization

•Best Practices

•ASP.NET

Page 5: Knockout js

What is MVVM?• Architectural pattern targeting

rich UI

• Separate Business Logic from UI logic

• Separation of Concerns

• Originally Introduced for WPF and Silverlight

Page 6: Knockout js
Page 7: Knockout js

What is Knockout?• 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

• Flexible and sophisticated templating - construct a complex dynamic UI easily using arbitrarily nested templates

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

Page 8: Knockout js

Why Knockout?• Isn’t JQuery enough?

• Isn’t JavaScript developer horrible? Tools?

• Community Project

• Easier to Unit Test

• Purely Client side

• Automatic Two way Binding

• Easy to set up via NuGet

Page 9: Knockout js

Demo

Page 10: Knockout js

Testing• Test Driven Development• Behavior Driven Development• JASMINE

Page 11: Knockout js

ASP.NET MVC Integration• Json Model Binding support in MVC3

• Data Bind attribute conversion in MVC3 Helper

• Works with standard MVC binding

• Validation

Page 12: Knockout js

What did we just talk about?•What is MVVM?

•Why Knockout?•What is Knockout?•ASP.NET MVC Integration•DEMO

Page 13: Knockout js

Thank You!

www.hattanshobokshi.com

[email protected]