1. John Culviner github.com/johnculviner @johnculviner johnculviner.com DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers http://github.com/johnculviner/FluentKnockoutHelpers

3.  ASP.NET MVC, Theory & Reality  Single Page App?  What is Durandal, Knockout.js?  Other Terms and Frameworks  CODE & DEMO!

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

7.  Web Sites vs  Web Applications A web site

8. Web applications Interactive application platforms

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

10. Building a web application on ASP.NET MVC with limited time and budget. Tomorrow’s is hell today

12.  AJAX, instead of DOM reload ◦ Possibly use an API w/ JSON ◦ Possible use of client templating  Hash change # {{ }}

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

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

15. + Covered Today

16. & ?

17.  MVVM for JavaScript and HTML

19.  Durango

20.  A delicious snack (or dinner?)

21.  New, couple months old. In Hot Towel SPA  http://nuget.org/packages/Durandal.StarterKit/ 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.

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

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

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

25. 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 1 1 2 2 3 3 GET person/1 4 4 5 5 8 8 7 7 After active promise returns 9 9 Cancel

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

27. John Culviner GitHub: github.com/johnculviner Blog:johnculviner.com Twitter:@johnculviner Email: john@johnculviner.com DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers http://github.com/johnculviner/FluentKnockoutHelpers