Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deconstructing Single Page Applications

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.

Jeanette

January 09, 2015
Tweet

More Decks by Jeanette

Other Decks in Technology

Transcript

  1. Page Applications>
    Jeanette Head, Atomic Object
    @JeanetteHead17

    View Slide

  2. Jeanette Head
    Software Development Consultant
    Atomic Object
    @JeanetteHead17
    [email protected]
    Harry Potter. Doctor Who. Skateboarding. Snowboarding. FIRST Robotics.
    Other things you can talk to me about:

    View Slide

  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

    View Slide

  4. What are we
    deconstructing?
    Backbone Library
    Angular Framework
    Ember Framework
    React Library
    Meteor Framework

    View Slide

  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)

    View Slide

  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');

    View Slide

  7. Router

    View Slide

  8. Routes are directly mapped
    to functions

    View Slide

  9. Inject $routeProvider
    When defined route is hit
    r
    resolve
    connect a template
    & controller

    View Slide

  10. A defined route is hit
    That route’s data is loaded
    That route’s controller is
    loaded
    Repeat for all child routes

    View Slide

  11. Ember and
    Angular load data
    At this point,

    View Slide

  12. Router (The Code)

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. Controller

    View Slide

  17. Developer manages
    events and updates
    Controller points to a
    section of the page

    View Slide

  18. $scope binds them together
    Strong Templates
    Strong Controllers

    View Slide

  19. Controller follows naming
    convention - named after the
    route
    Controller can create
    computed properties that are
    bound to the template

    View Slide

  20. Backbone loads
    data
    At this point,

    View Slide

  21. Controller (The Code)

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. Page Loaded
    ACHIEVEMENT UNLOCKED!
    ACHIEVEMENT UNLOCKED!

    View Slide

  26. A wild button click
    appears!
    Event Handling

    View Slide

  27. in the view controller…
    events and selectors are
    matched to functions

    View Slide

  28. In the template…
    …Built-in directives
    {ng-click, ng-change, ng-show,
    ng-mouseenter, …}
    Are hooked up to
    functions stored on
    $scope

    View Slide

  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

    View Slide

  30. Event Handling
    (The Code)

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. Button click was
    defeated!

    View Slide

  35. Data Binding

    View Slide

  36. Just Kidding!

    View Slide

  37. $scope is shared between Controller and Template

    View Slide

  38. A model’s properties
    are strongly bound
    throughout the
    application

    View Slide

  39. Components

    View Slide

  40. hot medium cold

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. 2.0

    View Slide

  45. Rendering

    View Slide

  46. Virtual DOM

    View Slide

  47. Full Stack Data Binding

    View Slide

  48. Full stack data binding
    Code runs on both client and NodeJS server

    View Slide

  49. Source: https://facebook.github.io/flux/docs/overview.html
    Ember-Data Ember App
    Angular
    Restangular
    $Resource

    $http
    $CacheFactory

    View Slide

  50. Other Things
    Backbone.Marionette
    Angular UI Router
    React-Flux
    Ember-Cli

    View Slide

  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?

    View Slide

  52. Jeanette Head
    Software Development Consultant
    Atomic Object
    @JeanetteHead17
    [email protected]
    Page Applications>

    View Slide