Deconstructing Single Page Applications

1949e3c40f8eb31baacc9a2f6e9e5d2a?s=47 Jeanette
January 09, 2015

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.

1949e3c40f8eb31baacc9a2f6e9e5d2a?s=128

Jeanette

January 09, 2015
Tweet

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)

  13. None
  14. None
  15. None
  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)

  22. None
  23. None
  24. None
  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)

  31. None
  32. None
  33. None
  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

  41. None
  42. None
  43. None
  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>