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

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

2. About Me

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

4. 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 FluentKnockoutHelpers solves • How to build your own SPA on Durandaleasily without much code OR confusion!

5. ASP.NET MVC Theory vs Reality

6. ASP.NET MVC – In Theory

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

8. The Problem Interactive application platforms Web applications

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

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

11. Single Page App

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

13. 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.

14. 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 JavaScript • No compiler help • Lots of “magic strings”

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

16. What is & ?

17. Knockout.js • MVVM for JavaScript and HTML

18. Welcome

19. What it’s NOT • Durango

20. Also what its NOT • A delicious snack (or dinner?)

21. Durandal.js • 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!

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

23. 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

24. Other Frameworks, Terms & Concepts • FluentKnockoutHelpers • Some KO Plugins: • ko.mapping • KoLite • Knockout.validation UI CSS toolkit Discussed in depth ASP.NET WebAPI “NoSQL” DocumentDatabase

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

26. Car.js Example in Require.js //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 } }; });

27. FluentKnockoutHelpers 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 • Githubproject with Durandal.js demo http://durandaldemo.apphb.com/

28. Happens more than it should:

29. FluentKnockoutHelpers - 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!)

30. FKH – In Razor • Rich type awareness and Intellisense

31. FKH – In Razor • Fluent = Super quick, easy

32. FKH – Easy to extend • Add Twitter Bootstrap LabelFor extension in a one line statement publicstaticStringReturningBuilder<TModel> BootstrapLabelFor<TModel, TProp>( thisBuilder<TModel>@this, Expression<Func<TModel, TProp>>propExpr ) { return@this.LabelFor(propExpr).Class("control-label"); }

33. FKH – Use your extension

34. FKH – Client side validation • Automatic client side validation for .NET based ViewModel properties based on • DataAnnotations • .NET data types [Range(0, 10000)] publicintMhz { get; set; } AND etc.

35. FKH – Client type factory • 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... varapiFood=typeMetadataHelper.getMappedValidatedInstance('models.food,');

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

37. John Culviner GitHub: github.com/johnculviner Blog: johnculviner.com Twitter: @johnculviner Email: john@johnculviner.com FEEDBACK (Please!): http://johnculviner.com/feedback/ CODE: http://github.com/johnculviner/FluentKnockoutHelpers LIVE DEMO: http://durandaldemo.apphb.com/