John Culviner johnculviner.com DEMO CODE:

 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

Oh crap Building a web In six months? No Problem!

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   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.

ASP.NET WebAPI FluentKnockoutHelpers ko.mapping KoLite Knockout.validation

Global Namespace jQuery.js Knockout.js Etc. Car.js Engine.jsWheels.js  Think: a combination of dependency injection & namespaces for JavaScript  Shows clear dependencies for USER code w/o polluting the global namespace Pistons.js AMDs

 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

API COMPOSITION { FirstName: “John”, LastName: “Culviner” } ko.mapping { FirstName: ko.observable(), LastName: ko.observable() } {//person.js person:, activate : function(){ save: function(){… cancel: function(){…. } { //person.js person: null, activate : function(){ save : function() {… cancel : function() {… } User requests URL “…/#/person/1” Durandal router finds VM, invokes activate Within activate function Save Person.cshtml (or HTML) Durandal locates the view by convention DONE! Bound View / View Model appear GET person/ After active promise returns 9 9 Cancel

DOM Manipulation All views are straight Razor (NO ASP.NET MVC!) Things to note: ALL JSON

John Culviner GitHub: github.com/johnculviner Blog:johnculviner.com DEMO CODE: