Canopy view of single-page applications (SPAs)
Download as PPTX, PDF1 like702 views
This document discusses single-page applications (SPAs) and related technologies. It defines an SPA as having a single HTML file, responsive CSS, JavaScript modules, and an underlying API that typically follows the MVVM pattern. Examples are given of why SPAs provide a consistent user experience across devices and partially-connected functionality for data-rich apps. Potential downsides discussed are that SPAs are not well-suited for sites needing good search engine optimization. The document also summarizes several JavaScript technologies used in SPAs, including RequireJS for module loading, KnockoutJS for model binding, and BreezeJS for querying data via LINQ. It describes how these can work together with MVC on the server
Canopy view of single-page applications (SPAs)
- 1. Canopy walk through Single-Page Apps (SPAs) Benjamin Howarth
- 2. What is a single-page app? • • • • • Single HTML file Responsive CSS Javascript “modules” Underlying API Tend to follow Model-View-ViewModel (MVVM) pattern
- 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/1891892.aspx/1?W 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”
- 7. • 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
- 8. • 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.
- 9. 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!
- 10. 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)
- 11. 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)
- 12. • 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
Editor's Notes
- #8: After this, pull up code sample #1