John Culviner github.com/johnculviner @johnculviner johnculviner.com DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers ASP.NET MVC, Theory & Reality Single Page App? What is Durandal, Knockout.js? Other Terms and Frameworks CODE & DEMO! Understanding of some ASP.NET MVC shortfalls Some basic pros and cons of SPAs What problems Durandal/Knockout solves What problems FluentKnockoutHelpers solves How to build your own SPA on Durandal easily without much code OR confusion! Web Sites vs Web Applications A web site Web applications Interactive application platforms No Problem! Building a web Oh crap In six months? Building a web application on ASP.NET MVC with limited time and budget. Tomorrow’s is hell today AJAX, instead of DOM reload ◦Possibly use an API w/ JSON ◦Possible use of client templating Hash # change {{ }} State maintained on client User experience ◦ More interactive Less network activity and waiting Developer experience ◦ Better (if you use a framework!) ◦ No constant DOM refresh ◦ Rely on a ‘thick’ client for caching etc. ◦ Vs MVC Building an efficient SPA framework from scratch is very difficult/time consuming SEO can be problematic No more DOM refreshes to clean up your messes! Lots of JavaScript ◦ No compiler help ◦ Lots of “magic strings” + Covered Today & ? MVVM for JavaScript and HTML Durango A delicious snack (or dinner?) New, couple months old. In Hot Towel SPA http://nuget.org/packages/Durandal.StarterKit/ Built on top of jQuery, Knockout & RequireJS ◦ jQ Promises, MVVM, AMDs built in Also does Navigation, Routing, Screen State Management JS & HTML Modularity ◦ Provides a FRAMEWORK to ORGANIZE your Controllers, ViewModels, and Views Simple, Effective App Lifecycle Events Modals, Message Boxes, etc. FluentKnockoutHelpers ko.mapping KoLite Knockout.validation ASP.NET WebAPI AMDs Global Namespace •jQuery.js •Knockout.js •Etc. Car.js Engine.js Wheels.js Pistons.js Think: a combination of dependency injection & namespaces for JavaScript Shows clear dependencies for USER code w/o polluting the global namespace Premise: Doing what's simple in ASP.NET MVC should be simple in Durandal and Knockout ◦ Brings validation based on .NET data types AND [DataAnnotation]s to the client for free ◦ Provides C#, strongly typed, compiled, fluent lambda helpers instead magic strings to generate Knockout syntax. (Similar to MVC’s but fluent and ‘better’ ) Assumes and takes advantage of views being composed of C# models resulting from API calls Client side type factory for creating new instances of C# types in the client Durandal router finds VM, invokes 2 activate User requests URL “…/#/person/1” 1 { //person.js person: null, activate : function(){ save : function() {… cancel : function() {… } Within activate function API { 3 GET person/1 { } FirstName: “John”, LastName: “Culviner” ko.mapping 4 After active promise returns Durandal locates the view by convention 7 Save Cancel Person.cshtml (or HTML) COMPOSITION 8 } FirstName: ko.observable(), LastName: ko.observable() 5 {//person.js person: , activate : function(){ save: function(){… cancel: function(){…. } DONE! Bound View / View Model appear 9 Things to note: All views are straight Razor (NO ASP.NET MVC!) DOM Manipulation <form> </form> ALL JSON John Culviner GitHub: Blog: Twitter: Email: github.com/johnculviner johnculviner.com @johnculviner john@johnculviner.com DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers