1. Canopy walk through Single-Page Apps (SPAs) Benjamin Howarth Freelancer, Code Gecko Umbraco UK Festival, Fri 30 th Oct 2015 CODE GECKO

2. What is a single-page app? Single HTML file Responsive CSS Javascript “modules” Underlying API Tend to follow Model-View-ViewModel (MVVM) pattern

3. Examples of SPAs

4. Why SPA? Consistent user experience across desktop, mobile & tablet Partially-connected client functionality In short, data-rich apps across a modern, diverse web platform

5. Why not SPA? http://forums.asp.net/t/189 1892.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.” http://forums.asp.net/t/189 1892.aspx/1?When+not+to+SPA + My response? “Twitter ”

6. How to SPA with SEO MVC Model-view- controller MVVM Javascript routes, viewmodel & model AMD format modulesHTML views Mix it up! MVC views can be MVVM partials or complete pages Routes from MVC exported to JS routing JS views can have *optional* model binding

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

8. 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?

9. 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?

10. Bringing your JS together Viewmodel Require JS (makes it modular, gives you dependency injection) Knockout JS (gives you a “strongly- typed” event- driven JS viewmodel) BreezeJ S (used by your KO viewmodel to get data from the server) Node.js isn’t scary compared to this…

11. Bringing the server and client together Model MVC controller View (HTML) Web API controller View (OData) Viewmodel (Javascript) View (HTML) One web, one ASP.NET

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

13. Thanks for listening! http://benjaminhowarth.com http://codegecko.com http://github.com/codegecko @benjaminhowarth