john culviner github.com/johnculviner @johnculviner johnculviner.com demo code:

Building a Single Page App the Easy Way With Durandal, Knockout and FluentKnockoutHelpers 

John Culvinergithub.com/johnculviner

@johnculvinerjohnculviner.comDEMO CODE:

http://github.com/johnculviner/FluentKnockoutHelpers

About Me

ASP.NET MVC, Theory & Reality

Single Page App?What is Durandal, Knockout.js?

Other Terms and FrameworksCODE & DEMO!

Overview

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!

What should I get from this?

ASP.NET MVC Theory vs Reality

ASP.NET MVC – In Theory

What MVC is good at Web Sites vs Web Applications

A web site

The Problem

Web applications

Interactive application platforms

Clients: The Other Problem

Oh crap

Building a web In six months?

No Problem!

ASP.NET MVC RealityBuilding a web application on ASP.NET MVC with limited time and budget.

Tomorrow’s

is hell today

Single Page App

AJAX, instead of DOM reload◦Possibly use an API w/ JSON◦Possible use of client templating

Hash change

What is a Single Page App?

#{{ }}

State maintained on clientUser experience

◦More interactiveLess network activity and waitingDeveloper experience

◦Better (if you use a framework!)◦No constant DOM refresh◦Rely on a ‘thick’ client for caching etc.◦Vs MVC

Benefits of a Single Page App

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”

Disadvantages of a Single Page App

Solution: Use a Framework

+Covered Today

What is

&

?

MVVM for JavaScript and HTML

Knockout.js

Welcome

What it’s NOT Durango

A delicious snack (or dinner?)

Also what its NOT

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.

Durandal.js

Other Frameworks, Terms & Concepts

ASP.NET WebAPI

FluentKnockoutHelpers

ko.mapping

KoLite

Knockout.validation

Require.js (an AMD loader)Global Namespace•jQuery.js•Knockout.js•Etc.

Car.js

Engine.js Wheels.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

FluentKnockoutHelpers

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”

Durandalrouterfinds VM, invokes activate

Within activate function

Save

Person.cshtml(or HTML)

Durandal locates the view by convention

DONE! Bound View / View Model appear

1 2

3 GET person/1

4 5

8

7

After active promise returns

9

Cancel

DEMO +CODE TIME!

<form></form>

DOMManipulation

All views are straight Razor (NO ASP.NET MVC!)

Things to note:ALLJSON

John CulvinerGitHub: github.com/johnculvinerBlog: johnculviner.comTwitter: @johnculvinerEmail: john@johnculviner.com

DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers