Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Canopy view of single-page applications (SPAs)

  • Be the first to comment

  • Be the first to like this

Canopy view of single-page applications (SPAs)

  1. 1. Canopy walk through Single-Page Apps (SPAs) Benjamin Howarth
  2. 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. 3. Examples of SPAs
  4. 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. 5. Why not SPA? • hen+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”
  6. 6. • Asynchronous Module Definition • Standard format for dependency injection What is AMD? Dependency injection for functional programming languages (no, you’re not seeing things) in Javasript • 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
  7. 7. • KnockoutJS is a Javascript model binder KnockoutJS What is it, and why should I care? • Turns JSON objects into “observables” e.g. var something = ko.observable(false); something(true); // changes value, and fires an event • Binds Javascript objects to HTML templates, making code reusable, neater, and easier to maintain • Makes event-driven Javascript data binding supereasy, instead of $(“input”).change(function() { }); everywhere • N.B. Every time you do this, a kitten dies.
  8. 8. BreezeJS What is it, and why should I care? • BreezeJS is LINQ for Web API with JSON • Web API returns JSON or ATOMcompatible XML, BreezeJS makes it queryable in Javascript • LINQ all the things!
  9. 9. Viewmodel Bringing your JS together Node.js isn’t scary compared to this… RequireJS (makes it modular, gives you dependency injection) KnockoutJS (gives you a “stronglytyped” event-driven JS viewmodel) BreezeJS (used by your KO viewmodel to get data from the server)
  10. 10. Model Bringing the server and client together One web, one ASP.NET MVC controller Web API controller Viewmodel (Javascript) View (HTML) View (OData) View (HTML)
  11. 11. • Views • MVC = MVVM • Controller MVC and MVVM working together • MVC • • 2) Partial page using AJAX • • 1) Full page using MVC #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
  12. 12. Thanks for listening! • • • • @benjaminhowarth