canopy view of single-page applications (spas)
TRANSCRIPT
![Page 1: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/1.jpg)
Canopy walk throughSingle-Page Apps (SPAs)
Benjamin Howarth
![Page 2: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/2.jpg)
What is a single-page app?
• Single HTML file
• Responsive CSS
• Javascript “modules”
• Underlying API
• Tend to follow Model-View-ViewModel (MVVM) pattern
![Page 3: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/3.jpg)
Examples of SPAs
![Page 4: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/4.jpg)
Why SPA?
• Consistent user experience across desktop, mobile & tablet
• Partially-connected client functionality
• In short, data-rich apps across a modern, diverse web platform
![Page 5: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/5.jpg)
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”
![Page 6: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/6.jpg)
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
![Page 7: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/7.jpg)
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)
![Page 8: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/8.jpg)
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?
![Page 9: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/9.jpg)
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?
![Page 10: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/10.jpg)
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…
![Page 11: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/11.jpg)
Bringing the serverand client together
ModelMVC
controller
View (HTML)
Web API controlle
r
View (OData)
Viewmodel
(Javascript)
View (HTML)
One web, one ASP.NET
![Page 12: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/12.jpg)
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
![Page 13: Canopy view of single-page applications (SPAs)](https://reader036.vdocument.in/reader036/viewer/2022070315/554f934bb4c905d25b8b5311/html5/thumbnails/13.jpg)
Thanks for listening!
• http://www.benjaminhowarth.com
• http://www.codegecko.com
• http://github.com/codegecko
• @benjaminhowarth