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. Page Applications>
   Jeanette Head, Atomic Object
   @JeanetteHead17
   

   View Slide

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:
   

   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
    jeanette.head@atomicobject.com
    Page Applications>
    

    View Slide