1. Knockoutjs and JQuery The One-Two Punch for Richer MVC 4 Applications Connecticut.NET Developers Group November 13, 2012

2. Bob Ohlheiser R. J. Ohlheiser, Inc – West Hartford, CT R. J. Ohlheiser, Inc – West Hartford, CT – Software Engineering & Consulting – rjo@rjosoft.com Connecticut.NET Developers Group (CTDOTNET) Connecticut.NET Developers Group (CTDOTNET) – Co-Leader & community event organizer

3. Objectives Introduction to knockoutjs library and concepts Introduction to knockoutjs library and concepts Simple demo showing common knockout features applied to traditional MVC app Simple demo showing common knockout features applied to traditional MVC app

4. Agenda What is knockoutjs? What is knockoutjs? Design & Observable Pattern Design & Observable Pattern Knockoutjs concepts Knockoutjs concepts Demo extending basic MVC 4 App Demo extending basic MVC 4 App

5. What is Knockoutjs? JavaScript Library implementing MVVM on the browser client. JavaScript Library implementing MVVM on the browser client. Steve Sanderson – Microsoft ASP.Net Team Steve Sanderson – Microsoft ASP.Net Team Pure JavaScript – no dependencies Pure JavaScript – no dependencies Complements rather than replaces jQuery Complements rather than replaces jQuery Wide Browser Support - IE6+, FF2+, CHR, SF, OPR Wide Browser Support - IE6+, FF2+, CHR, SF, OPR Included by default in MVC 4 project template Included by default in MVC 4 project template

6. Design Patterns MVC – ASP.Net MVC – ASP.Net MVVM – Binding based on observables MVVM – Binding based on observables – Silverlight & WPF – Knockoutjs – MVVM for browser client

7. MVC View Controller Model Client (browser) Request Response (HTML) @Html.TextBox(“Name”, ViewBag(“name”)) ViewBag.Name = “Jack”;

8. MVC w/View Model View Controller Model Client (browser) Request Response (HTML & VM) View ModelView Model @model viewModel @Html.TextBoxFor(model => model.Name) class viewModel { … public string Name { get; set; } … }

9. MVC w/View Model & Knockoutjs View Controller Model Request Response (HTML & VM) View ModelView Model var viewModel = function() { … this.name = ko.observable(…) … } Client (browser) MVVM (KO js) class viewModel { … public string Name { get; set; } … }

10. Richer Client Experience Beyond basic MVC experience Beyond basic MVC experience More interactive More interactive Applies design patterns & binding Applies design patterns & binding MVVM on the client MVVM on the client

11. Knockoutjs Dependency Tracking Dependency Tracking – observable (like INotifyPropertyChanged) – observableArray (like ObservableCollection ) – computed observables Bindings Bindings – Text and appearance – Control flow – Events Templates Templates – Repetitive & nested blocks of markup

12. The Basics …. var viewModel = { personName: ko.observable('Bob'), personName: ko.observable('Bob'), people: ko.observableArray([]) people: ko.observableArray([])};ko.applyBindings(viewModel); (knockoutjs.com) (demo)

13. Benefits Simplified implementation of complex applications Simplified implementation of complex applications Less code Less code Separation of Concerns Separation of Concerns Maintainability Maintainability Alternative to jQuery solutions Alternative to jQuery solutions Knockout is extensible Knockout is extensible

14. Demo Creating a Richer UX for a simple MVC app Creating a Richer UX for a simple MVC app Upgrade existing MVC 4 Basic Project app Upgrade existing MVC 4 Basic Project app Add Knockoutjs & jQuery elements Add Knockoutjs & jQuery elements Model: Manufacturer -> Model -> Details Model: Manufacturer -> Model -> Details

15. Resources www.knockoutjs.com - Main project site www.knockoutjs.com - Main project site – Complete documentation and samples – Beginners tutorial : learn.knockoutjs.com blog.stevensanderson.com – Blog by Steve Sanderson blog.stevensanderson.com – Blog by Steve Sanderson www.knockmeout.net - Blog by Ryan Niemeyer www.knockmeout.net - Blog by Ryan Niemeyer MSDN Mag – John Papa - February & March 2012 MSDN Mag – John Papa - February & March 2012 Channel 9 – Several videos Channel 9 – Several videos KOGrid - github.com/ericmbarnard/KoGrid/wiki KOGrid - github.com/ericmbarnard/KoGrid/wiki