john culviner github.com/johnculviner @johnculviner johnculviner.com demo code:
TRANSCRIPT
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: [email protected]
DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers