Deconstructing Single Page Applications

Presented at CodeMash 2015

I updated my slides for Ann Arbor .NET Developers , and updated them here as well. That presentation was 10/15/15. (Crazy how fast things in a js framework presentation can go out of date!)

The modern web has introduced new demands for performance that cannot be met solely on the server side, and Single Page Applications (SPAs) have rushed in to meet those demands. The SPA universe is full of choices (Backbone, Angular, Ember and more). What sets them apart, and how do you choose one? They all address the same problem set: rendering, routing, data-binding, event handling, composability and others. By dissecting how different frameworks approach these problems, we can investigate the quirks that set frameworks apart and gain a more intimate understanding of the SPA architecture itself. For beginners, ninjas and anyone in between, this talk can guide you further in the search for SPA enlightenment.

Transcript

1. <Deconstructing Single Page Applications> Jeanette Head, Atomic Object @JeanetteHead17
2. Jeanette Head Software Development Consultant Atomic Object @JeanetteHead17 jeanette.head@atomicobject.com Harry Potter. Doctor Who. Skateboarding. Snowboarding. FIRST Robotics. Other things you can talk to me about:
3. How does this work? I’ll take you through the following flow of a Single Page Application framework. We’re going to be switching frameworks a lot - so hold on tight! • Router • Controller • Event Handling • Data Binding • Components
4. What are we deconstructing? Backbone Library Angular Framework Ember Framework React Library Meteor Framework
5. In Numbers (Jan 2015) Backbone Angular Ember Latest Version 1.2.3 (1.1.2) 1.4.7 (1.3.8) 2.0 (1.9.1) File Size 23k (20k) 147k (125k) 430k (360k) GitHub Stars 23,156 (20,196) 43,228 (33,654) 14,887 (12,248)
6. Let’s Get Started SkeletonApp = Backbone.View.extend(); TriangleApp = angular.module('AngularApp', []); FireApp = Ember.Application.create(); ReactApp = React.render(); MeteorItems = new Meteor.Collection('items');
7. Router
8. Routes are directly mapped to functions
9. Inject $routeProvider When defined route is hit r resolve connect a template & controller
10. A defined route is hit That route’s data is loaded That route’s controller is loaded Repeat for all child routes
11. Ember and Angular load data At this point,
12. Router (The Code)
16. Controller
17. Developer manages events and updates Controller points to a section of the page
18. $scope binds them together Strong Templates Strong Controllers
19. Controller follows naming convention - named after the route Controller can create computed properties that are bound to the template
20. Backbone loads data At this point,
21. Controller (The Code)
25. Page Loaded ACHIEVEMENT UNLOCKED! ACHIEVEMENT UNLOCKED!
26. A wild button click appears! Event Handling
27. in the view controller… events and selectors are matched to functions
28. In the template… …Built-in directives {ng-click, ng-change, ng-show, ng-mouseenter, …} Are hooked up to functions stored on $scope
29. • The template defines named actions to link to events • The controller or route handles the actions • Actions can be sent from both views & components
30. Event Handling (The Code)
34. Button click was defeated!
35. Data Binding
36. Just Kidding!
37. $scope is shared between Controller and Template
38. A model’s properties are strongly bound throughout the application
39. Components
40. hot medium cold
44. 2.0
45. Rendering
46. Virtual DOM
47. Full Stack Data Binding
48. Full stack data binding Code runs on both client and NodeJS server
49. Source: https://facebook.github.io/flux/docs/overview.html Ember-Data Ember App Angular Restangular $Resource
 $http $CacheFactory
50. Other Things Backbone.Marionette Angular UI Router React-Flux Ember-Cli
51. The End? Which to choose? How do I keep up? What’s going to last? Which one is the best? What are the best practices? What should my full stack be?
52. Jeanette Head Software Development Consultant Atomic Object @JeanetteHead17 jeanette.head@atomicobject.com </Deconstructing Single Page Applications>