Canopy walk throughSingle-Page Apps (SPAs)

Benjamin HowarthFreelancer, Code Gecko

Umbraco UK Festival, Fri 30th Oct 2015CODE GECKO

What is a single-page app?

• Single HTML file

• Responsive CSS

• Javascript “modules”

• Underlying API

• Tend to follow Model-View-ViewModel (MVVM) pattern

Examples of SPAs

Why SPA?

• Consistent user experience across desktop, mobile & tablet

• Partially-connected client functionality

• In short, data-rich apps across a modern, diverse web platform

Why not SPA?

• http://forums.asp.net/t/1891892.aspx/1?When+not+to+SPA+

“One example would be a web site. Lots of static data for presentation in regions or areas. This could be done with client side templating, but then you lose a lot of SEO too, and web sites are often where SEO is important. (In contrast, a SPA for a banking app is not a place you'd want SEO). So there are 2 examples: web sites and any place you need SEO badly. There are ways to do SEO in SPA, but its not a natural fit.”

• My response?

“Twitter”

How to SPA with SEO

MVCModel-view-controller

MVVMJavascript routes,

viewmodel & model

AMD format modules

HTML views

Mix it up!MVC views can be MVVM partials or complete pagesRoutes from MVC

exported to JS routing

JS views can have *optional* model

binding

What is AMD?

• Asynchronous Module Definition

• Standard format for dependency injection in Javascript

• Dependencies are loaded into a constructor function asynchronously

• The constructor is invoked only when all dependencies have loaded

• The constructor returns an object – your viewmodel

Dependency injection for functional programming

languages(no, you’re not seeing things)

AngularJS or KnockoutJS

• KnockoutJS is a Javascript model binder

• AngularJS is a Javascript MVVM (no, it’s *NOT* MVC) framework

• Turns JSON objects into “observables” e.g.var something = ko.observable(false);something(true); // changes value, and fires an event

• With AngularJS, simply change the property - $scope.prop = value;

• Binds Javascript objects to HTML templates, making code reusable, neater, and easier to maintain

• Makes event-driven Javascript data binding super-easy, instead of $(“input”).change(function() { }); everywhere

• N.B. Every time you do this, a kitten dies.

What is it, and why should I care?

BreezeJS • BreezeJS is LINQ for Web API with JSON

• Web API returns JSON or ATOM-compatible XML, BreezeJS makes it queryable in Javascript

• LINQ all the things!

What is it, and why should I care?

Bringing your JS together

Viewmodel

RequireJS

(makes it modular, gives

you dependency injection)

KnockoutJS

(gives you a “strongly-typed” event-driven JS

viewmodel)

BreezeJS

(used by your KO viewmodel to get

data from the server)

Node.js isn’t scary compared to this…

Bringing the serverand client together

ModelMVC

controller

View (HTML)

Web API

controller

View (OData

)

Viewmodel

(Javascript)

View (HTML)

One web, one ASP.NET

MVC and MVVM working together

• Views• MVC = MVVM

• Controller• MVC

• 1) Full page using MVC

• 2) Partial page using AJAX

• #1 and #2 are done with the same controller

• MVVM

• Requests views using #2

• Model• MVC

• O/RM of choice

• JSON using Web API

• MVVM

• Breeze calling Web API

• Routes• Exported to MVVM routing library from MVC via JSON

Thanks for listening!

• http://benjaminhowarth.com

• http://codegecko.com

• http://github.com/codegecko

• @benjaminhowarth