Upload
shobokshi
View
3.035
Download
4
Embed Size (px)
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.
Citation preview
Hattan Shobokshi
JavaScript MVVM with
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/
Who am I?
Hattan ShobokshiSenior Software Engineer
http://speakerrate.com/hattanhttp://www.slideshare.net/
shobokshi
Goals for this talk
•What is MVVM & Knockout JS ?
•Why Knockout JS?
•Testing JavaScript
•Customization
•Best Practices
•ASP.NET
What is MVVM?• Architectural pattern targeting
rich UI
• Separate Business Logic from UI logic
• Separation of Concerns
• Originally Introduced for WPF and Silverlight
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
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
Demo
Testing• Test Driven Development• Behavior Driven Development• JASMINE
ASP.NET MVC Integration• Json Model Binding support in MVC3
• Data Bind attribute conversion in MVC3 Helper
• Works with standard MVC binding
• Validation
What did we just talk about?•What is MVVM?
•Why Knockout?•What is Knockout?•ASP.NET MVC Integration•DEMO