Transcript slide deck - johnculviner.com

John Culviner
github.com/johnculviner
@johnculviner
johnculviner.com
DEMO CODE:
http://github.com/johnculviner/FluentKnockoutHelpers
 ASP.NET
MVC, Theory & Reality
 Single Page App?
 What is Durandal, Knockout.js?
 Other Terms and Frameworks
 CODE & DEMO!
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!

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.
◦ Vs MVC
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
&
?

MVVM for JavaScript and HTML

Durango

A delicious snack (or dinner?)

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.
FluentKnockoutHelpers
ko.mapping
KoLite
Knockout.validation
ASP.NET WebAPI
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

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
Durandal
router
finds VM,
invokes
2 activate
User requests URL
“…/#/person/1”
1
{ //person.js
person: null,
activate : function(){
save : function() {…
cancel : function() {…
}
Within activate function
API
{
3 GET person/1
{
}
FirstName: “John”,
LastName: “Culviner”
ko.mapping
4
After active promise returns
Durandal
locates the
view by
convention
7
Save
Cancel
Person.cshtml
(or HTML)
COMPOSITION
8
}
FirstName: ko.observable(),
LastName: ko.observable()
5
{//person.js
person:
,
activate : function(){
save: function(){…
cancel: function(){….
}
DONE!
Bound View /
View Model
appear
9
Things to note:
All views are
straight Razor
(NO ASP.NET
MVC!)
DOM
Manipulation
<form>
</form>
ALL
JSON
John Culviner
GitHub:
Blog:
Twitter:
Email:
github.com/johnculviner
johnculviner.com
@johnculviner
[email protected]
DEMO CODE:
http://github.com/johnculviner/FluentKnockoutHelpers