Transcript Building a Single Page App the Easy Way With

John Culviner
@johnculviner
johnculviner.com
FEEDBACK (Please!):
http://johnculviner.com/feedback/
CODE:
http://github.com/johnculviner/FluentKnockoutHelpers
LIVE DEMO:
http://durandaldemo.apphb.com/
 ASP.NET
MVC, Theory & Reality
 Single Page App?
 What is Durandal, Knockout.js?
 Other Terms and Frameworks
 What is
FluentKnockoutHelpers
 DEMO & CODE!
Understanding of ASP.NET MVC
shortfalls for “Web Applications”
 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.
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
Most similar
to:
Others:
&
?

MVVM for JavaScript and HTML

Durango

A delicious snack (or dinner?)


New, few months old. In Hot Towel SPA.
Apply this on top of an empty MVC proj:
http://nuget.org/packages/Durandal.StarterKit/

Lots of John Papa, PluralSight videos on it

Built on top of Knockout, jQuery & RequireJS
◦ MVVM, jQuery Promises, AMDs built in

Has opinions on how you should organize
your application (like ASP.NET MVC)
◦ Hello consistency between developers!

Handles navigation, routing #/, screen state
management
◦ Modals, message boxes, etc.

Simple, effective app lifecycle events
◦ Activate, CanDeactivate etc.

Release mode minification
◦ Your entire app. HTML & JavaScript in minified,
gzipped file
◦ Only HTTP traffic you have is to RESTful endpoints


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
FluentKnockoutHelpers
UI CSS toolkit
Discussed in depth
ASP.NET WebAPI
Some KO Plugins:
• ko.mapping
• KoLite
• Knockout.validation
“NoSQL” Document
Database
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
//File: Car.js
define(['engine', 'wheels'],
function (engine, wheels) {
return {
turnOn: function() {
engine.start();
},
move: function(direction) {
//do something with 'engine' and
//'wheels' to make the car move
}
};
});
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/
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!)

Rich type awareness and Intellisense

Fluent = Super quick, easy

Add Twitter Bootstrap LabelFor extension in a
one line statement
public static StringReturningBuilder<TModel>
BootstrapLabelFor<TModel, TProp>(
this Builder<TModel> @this,
Expression<Func<TModel, TProp>> propExpr
)
{
return @this.LabelFor(propExpr).Class("control-label");
}

Automatic client side validation for .NET
based ViewModel properties based on
◦ DataAnnotations
◦ .NET data types
[Range(0, 10000)]
public int Mhz { get; set; }
AND etc.

C# type definitions exist in the client. Get one
easily from the factory in JavaScript (NO AJAX!)
self.addFood = function () {
//get an instance of a C# (API) Food from the metaDatahelper
//that is observable, validation enabled and ready to go...
var apiFood = typeMetadataHelper.getMappedValidatedInstance('models.food,');
Things to note:
All views are
straight Razor
(NO ASP.NET
MVC!)
ALL
JSON
DOM
Manipulation
<form>
</form>
John Culviner
GitHub:
Blog:
Twitter:
Email:
github.com/johnculviner
johnculviner.com
@johnculviner
[email protected]
FEEDBACK (Please!):
http://johnculviner.com/feedback/
CODE:
http://github.com/johnculviner/FluentKnockoutHelpers
LIVE DEMO:
http://durandaldemo.apphb.com/