Deconstructing Single Page Applications

Slide 1

Slide 1 text

Jeanette Head, Atomic Object @JeanetteHead17

Slide 2

Slide 2 text

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:

Slide 3

Slide 3 text

How does this work? I’ll take you through the following ﬂow 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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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)

Slide 6

Slide 6 text

Let’s Get Started SkeletonApp = Backbone.View.extend(); TriangleApp = angular.module('AngularApp', []); FireApp = Ember.Application.create(); ReactApp = React.render(); MeteorItems = new Meteor.Collection('items');

Slide 7

Slide 7 text

Router

Slide 8

Slide 8 text

Routes are directly mapped to functions

Slide 9

Slide 9 text

Inject $routeProvider When deﬁned route is hit r resolve connect a template & controller

Slide 10

Slide 10 text

A deﬁned route is hit That route’s data is loaded That route’s controller is loaded Repeat for all child routes

Slide 11

Slide 11 text

Ember and Angular load data At this point,

Slide 12

Slide 12 text

Router (The Code)

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Controller

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

$scope binds them together Strong Templates Strong Controllers

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Backbone loads data At this point,

Slide 21

Slide 21 text

Controller (The Code)

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Page Loaded ACHIEVEMENT UNLOCKED! ACHIEVEMENT UNLOCKED!

Slide 26

Slide 26 text

A wild button click appears! Event Handling

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

• The template deﬁnes named actions to link to events • The controller or route handles the actions • Actions can be sent from both views & components

Slide 30

Slide 30 text

Event Handling (The Code)

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Button click was defeated!

Slide 35

Slide 35 text

Data Binding

Slide 36

Slide 36 text

Just Kidding!

Slide 37

Slide 37 text

$scope is shared between Controller and Template

Slide 38

Slide 38 text

A model’s properties are strongly bound throughout the application

Slide 39

Slide 39 text

Components

Slide 40

Slide 40 text

hot medium cold

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

2.0

Slide 45

Slide 45 text

Rendering

Slide 46

Slide 46 text

Virtual DOM

Slide 47

Slide 47 text

Full Stack Data Binding

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Source: https://facebook.github.io/ﬂux/docs/overview.html Ember-Data Ember App Angular Restangular $Resource  $http $CacheFactory

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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?

Slide 52

Slide 52 text

Jeanette Head Software Development Consultant Atomic Object @JeanetteHead17 [email protected]