1 / 27

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

Building a Single Page App the Easy Way With Durandal , Knockout and FluentKnockoutHelpers. John Culviner github.com/ johnculviner @ johnculviner johnculviner.com. DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers. About Me. Overview. ASP.NET MVC, Theory & Reality

emberlynn-aerts
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building a Single Page App the Easy Way With Durandal, Knockout and FluentKnockoutHelpers John Culviner github.com/johnculviner @johnculviner johnculviner.com DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers

  2. About Me

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

  4. What should I get from this? • 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 Durandaleasily without much code OR confusion!

  5. ASP.NET MVC Theory vs Reality

  6. ASP.NET MVC – In Theory

  7. What 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. • Vs MVC

  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

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

  22. Other Frameworks, Terms & Concepts FluentKnockoutHelpers ko.mapping KoLite Knockout.validation ASP.NET WebAPI

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

  24. FluentKnockoutHelpers • 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

  25. Durandal router finds VM, invokes activate { //person.js person: null, activate : function(){ save : function() {… cancel : function() {… } User requests URL“…/#/person/1” 2 1 Within activate function { FirstName: ko.observable(), LastName: ko.observable() } 3 GET person/1 API ko.mapping { FirstName: “John”, LastName: “Culviner” } 5 4 {//person.js person: , activate : function(){ save: function(){… cancel: function(){…. } After active promise returns Durandal locates the view by convention DONE! Bound View / View Model appear Save Cancel 7 COMPOSITION Person.cshtml (or HTML) 9 8

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

  27. John Culviner GitHub: github.com/johnculviner Blog: johnculviner.com Twitter: @johnculviner Email: john@johnculviner.com DEMO CODE: http://github.com/johnculviner/FluentKnockoutHelpers

More Related