Canopy view of single-page applications (SPAs)
-
Upload
benjamin-howarth -
Category
Technology
-
view
378 -
download
3
Transcript of Canopy view of single-page applications (SPAs)
Canopy walk throughSingle-Page Apps (SPAs)
Benjamin Howarth
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 pages
Routes 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 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
Dependency injection for functional programming
languages(no, you’re not seeing things)
KnockoutJS
• KnockoutJS is a Javascript model binder
• 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 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 controlle
r
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://www.benjaminhowarth.com
• http://www.codegecko.com
• http://github.com/codegecko
• @benjaminhowarth