Presentation is loading. Please wait.

Presentation is loading. Please wait.

John Culviner johnculviner.com DEMO CODE:

Similar presentations


Presentation on theme: "John Culviner johnculviner.com DEMO CODE:"— Presentation transcript:

1 John Culviner johnculviner.com DEMO CODE:

2

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

4  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!

5

6

7  Web Sites vs  Web Applications A web site

8 Web applications Interactive application platforms

9 Oh crap Building a web In six months? No Problem!

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

11

12  AJAX, instead of DOM reload ◦ Possibly use an API w/ JSON ◦ Possible use of client templating  Hash change # {{ }}

13  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  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 + Covered Today

16 & ?

17  MVVM for JavaScript and HTML

18

19  Durango

20  A delicious snack (or dinner?)

21  New, couple months old. In Hot Towel SPA   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 ASP.NET WebAPI FluentKnockoutHelpers ko.mapping KoLite Knockout.validation

23 Global Namespace jQuery.js Knockout.js Etc. Car.js Engine.jsWheels.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

24  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 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” Durandal router finds VM, invokes activate Within activate function Save Person.cshtml (or HTML) Durandal locates the view by convention DONE! Bound View / View Model appear GET person/ After active promise returns 9 9 Cancel

26 DOM Manipulation All views are straight Razor (NO ASP.NET MVC!) Things to note: ALL JSON

27 John Culviner GitHub: github.com/johnculviner Blog:johnculviner.com DEMO CODE:


Download ppt "John Culviner johnculviner.com DEMO CODE:"

Similar presentations


Ads by Google