Building a Single Page App the Easy Way

Building a Single Page App the Easy Way With Durandal, Knockout and Fluent. Knockout. Helpers John Culviner @johnculviner. com FEEDBACK (Please!): http: //johnculviner. com/feedback/ CODE: http: //github. com/johnculviner/Fluent. Knockout. Helpers LIVE DEMO: http: //durandaldemo. apphb. com/

About Me

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

What should I get from this? �Understanding of ASP. NET MVC shortfalls for “Web Applications” �Some basic pros and cons of SPAs �What problems Durandal/Knockout solves �What problems Fluent. Knockout. Helpers solves �How to build your own SPA on Durandal easily without much code OR confusion!

ASP. NET MVC Theory vs Reality

ASP. NET MVC – In Theory

What ASP. NET MVC is good at �Web Sites vs �Web Applications A web site

The Problem Web applications Interactive application platforms

Clients: The Other Problem No Problem! Building a web Oh crap In six months?

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

Single Page App

What is a Single Page App? �AJAX, instead of DOM reload ◦ Possibly use an API w/ JSON ◦ Possible use of client templating �Hash # change {{ }}

Benefits of a Single Page App �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.

Disadvantages 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 Java. Script ◦ No compiler help ◦ Lots of “magic strings”

Solution: Use a Framework + Covered Today Most similar to: Others:

What is & ?

Knockout. js � MVVM for Java. Script and HTML

Welcome

What it’s NOT � Durango

Also what its NOT �A delicious snack (or dinner? )

Durandal. js � New, few months old. In Hot Towel SPA. � Apply this on top of an empty MVC proj: http: //nuget. org/packages/Durandal. Starter. Kit/ � Lots of John Papa, Plural. Sight videos on it � Built on top of Knockout, j. Query & Require. JS ◦ MVVM, j. Query Promises, AMDs built in � Has opinions on how you should organize your application (like ASP. NET MVC) ◦ Hello consistency between developers!

Durandal. js � Handles navigation, routing #/, screen state management ◦ Modals, message boxes, etc. � Simple, effective app lifecycle events � Release mode minification ◦ Activate, Can. Deactivate etc. ◦ Your entire app. HTML & Java. Script in minified, gzipped file ◦ Only HTTP traffic you have is to RESTful endpoints

Durandal. js – #IRL � Been using professionally for almost 3 months � Custom CMS from scratch project ◦ Amazing results (what is produced and time) � Easy ◦ ◦ To learn & understand To teach Opinionated about organization out of the box To build awesome interactive web applications

Other Frameworks, Terms & Concepts Fluent. Knockout. Helpers Discussed in depth UI CSS toolkit ASP. NET Web. API Some KO Plugins: • ko. mapping • Ko. Lite • Knockout. validation “No. SQL” Document Database

Require. js (an AMD loader) AMDs Global Namespace • j. Query. js • Knockout. js • Etc. Car. js Engine. js Wheels. js Pistons. js � Think: a combination of dependency injection & namespaces for Java. Script � Shows clear dependencies for USER code w/o polluting the global namespace

Car. js Example in Require. js //File: Car. js define(['engine', 'wheels'], function (engine, wheels) { return { turn. On: function() { engine. start(); }, move: function(direction) { //do something with 'engine' and //'wheels' to make the car move } }; });

Fluent. Knockout. Helpers Who? � Guy with monkey from earlier Why? � Doing what's easy in ASP. NET MVC should be just as easy in Knockout (Durandal OPTIONAL) What? � C# library that generates HTML via Razor (no ASP. MVC required!) � Many other features to make things easy � Github project with Durandal. js demo http: //durandaldemo. apphb. com/

Happens more than it should:

Fluent. Knockout. Helpers - FKH Use C#’s strong typing (where it makes sense) � A compiler is always your cheapest tester � Leverage C# API types used in client views Generate Knockout. js syntax with helpers � Minimize magic strings and stupid problems � Strongly typed Knockout markup! � Fluent with lambda expressions (MVC like) � Intellisense ◦ For C# Types ◦ Knockout functionality (no googling required!)

FKH – In Razor � Rich type awareness and Intellisense

FKH – In Razor � Fluent = Super quick, easy

FKH – Easy to extend � Add Twitter Bootstrap Label. For extension in a one line statement public static String. Returning. Builder<TModel> Bootstrap. Label. For<TModel, TProp>( this Builder<TModel> @this, Expression<Func<TModel, TProp>> prop. Expr ) { return @this. Label. For(prop. Expr). Class("control-label"); }

FKH – Use your extension

FKH – Client side validation � Automatic client side validation for. NET based View. Model properties based on ◦ Data. Annotations ◦. NET data types [Range(0, 10000)] public int Mhz { get; set; } AND etc.

FKH – Client type factory � C# type definitions exist in the client. Get one easily from the factory in Java. Script (NO AJAX!) self. add. Food = function () { //get an instance of a C# (API) Food from the meta. Datahelper //that is observable, validation enabled and ready to go. . . var api. Food = type. Metadata. Helper. get. Mapped. Validated. Instance('models. food, ');

DEMO + CODE TIME! Things to note: All views are straight Razor (NO ASP. NET MVC!) ALL JSON DOM Manipulation <form> </form>

John Culviner Git. Hub: Blog: Twitter: Email: github. com/johnculviner. com @johnculviner john@johnculviner. com FEEDBACK (Please!): http: //johnculviner. com/feedback/ CODE: http: //github. com/johnculviner/Fluent. Knockout. Helpers LIVE DEMO: http: //durandaldemo. apphb. com/