Slide 1

Slide 1 text

CHOOSING A JAVASCRIPT FRAMEWORK with Pam Selle  @pamasaur // thewebivore.com

Slide 2

Slide 2 text

SO… WE WROTE THIS THING me, Tim Rufﬂes, Christopher Hiller, and Jamie White

Slide 3

Slide 3 text

I will not tell you what to do. SPOILERS!

Slide 4

Slide 4 text

What I will do, however

Slide 5

Slide 5 text

is walk you through each of the major frameworks

Slide 6

Slide 6 text

in the hope that you can make an informed choice for   a project, for additional learning, or general knowledge

Slide 7

Slide 7 text

AGENDA • What is a JavaScript framework? • Major frameworks: • Backbone • Ember • Angular

Slide 8

Slide 8 text

AGENDA • Rising stars: • React • Polymer • Framework evaluation techniques

Slide 9

Slide 9 text

WHAT IS A FRAMEWORK?

Slide 10

Slide 10 text

LONG AGO …

Slide 11

Slide 11 text

PEOPLE MADE WEB APPS

Slide 12

Slide 12 text

Okay, not that different from now

Slide 13

Slide 13 text

BUT

Slide 14

Slide 14 text

(that hasn’t changed much either) There wasn’t “one way”

Slide 15

Slide 15 text

Most of the major JavaScript frameworks started in 2009/2010 As a result, frameworks emerged

Slide 16

Slide 16 text

–Johnny Appleseed “Type a quote here.” http://xkcd.com/927/

Slide 17

Slide 17 text

Still, JS frameworks are a very GOOD thing

Slide 18

Slide 18 text

Because you shouldn’t have to write a router.

Slide 19

Slide 19 text

Ask yourself: What’s your 15%?

Slide 20

Slide 20 text

MAJOR FRAMEWORKS

Slide 21

Slide 21 text

MAJOR FRAMEWORKS • Backbone • Angular • Ember Overview, strengths/weaknesses + a little code

Slide 22

Slide 22 text

BACKBONE

Slide 23

Slide 23 text

BASICS • Origin story: DocumentCloud, Rails • “Core” of an application • “Unopinionated”

Slide 24

Slide 24 text

OPINIONATED?

Slide 25

Slide 25 text

Opinionated: there’s an obvious (or best practices- driven) way to solve the problem.

Slide 26

Slide 26 text

Unopinionated: “Choose your own adventure,” generally more ﬂexible, ex. if incorporating other libraries into the project.

Slide 27

Slide 27 text

WHAT YOU GET • Core MVC components • Nudge in an event-driven application design

Slide 28

Slide 28 text

DEPENDENCIES • Underscore • jQuery or jQuery alternative (ex. Zepto)

Slide 29

Slide 29 text

STRENGTHS • Unopinionated • Integrates well with many libraries and backends • Events system

Slide 30

Slide 30 text

WEAKNESSES • Unopinionated • “… that’d be your problem”

Slide 31

Slide 31 text

BACKBONE COMPONENTS • Models • Views • Collections • Routing

Slide 32

Slide 32 text

WALK-THROUGH • Basic Model + View setup

Slide 33

Slide 33 text

BACKBONE MODELS Make a model subclass using .extend( ) var Property = Backbone.Model.extend({ star: function() { this.set("starred", !this.get("starred")); this.save(); } }); (code in this presentation is from the book, & ﬁnal versions of sample apps are @ github.com/pselle/choosing-javascript-framework)

Slide 34

Slide 34 text

BACKBONE VIEWS .extend(), deﬁne DOM properties, render var PropertyShowView = Backbone.View.extend({ tagName: 'div', className: 'property', template: loadTemplate("property-‐show"), render: function() { this.el.innerHTML = this.template(this.model.attributes); return this; } });

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

BACKBONE VIEWS Using a view with a model  var myHouse = new Property({ location: "middle of our street", noiseLevel: "usually quite loud" }); ! var propertyView = new PropertyView({ model: myHouse }); ! propertyView.render() document.body.appendChild(propertyView.el); !

Slide 39

Slide 39 text

BACKBONE VIEWS

1123 Sunny Road

37890

This is a fantastic house!

Asking price: 230000

Save as favorite

Slide 40

Slide 40 text

OTHER COMPONENTS • Collections • Groups of models • Router • Read/write the URL without reloading the page • Events • Views trigger updates to model, vice versa • Core component of Backbone

Slide 41

Slide 41 text

RESOURCES • http://backbonetutorials.com/ • http://addyosmani.github.io/backbone- fundamentals/ • Annotated source:   http://backbonejs.org/docs/backbone.html

Slide 42

Slide 42 text

ANGULAR

Slide 43

Slide 43 text

BASICS • Fastest growing JavaScript framework • Write behavior in your markup (directives) • Google, Google, Google

Slide 44

Slide 44 text

WHAT YOU GET • Strongly deﬁned building components (directives, controllers, services) • Two-way data binding • Dependency injection • Auxiliary tools available: Karma, Protractor

Slide 45

Slide 45 text

DEPENDENCIES • None • Loads its own smaller jQuery  (will use your copy if provided on page, supports 2.1+)

Slide 46

Slide 46 text

STRENGTHS • Short/low-context setup • Long feature list • Module-friendly • Major industry backing

Slide 47

Slide 47 text

WEAKNESSES • Recent rise to prominence = less time in prod • High lock-in with writing behavior in markup • Skeptics for future roadmap/Google backing • 1.3 drops IE8 support, some teams stuck in older version now (abandonware fears)

Slide 48

Slide 48 text

ANGULAR KEY COMPONENTS • Modules • Directives • Services • Controllers

Slide 49

Slide 49 text

MODULES Every Angular app has 1+ module deﬁnition var realtorsapp = angular.module('realtorsapp', []);

Slide 50

Slide 50 text

DIRECTIVES Modify the behavior of the DOM (custom) angular.module('myapp', []) .directive('unicorn', function() { return { restrict: 'E', link: function(scope, element, attrs) { element.html('Unicorn') } }; }); !

Slide 51

Slide 51 text

DIRECTIVES Modify the behavior of the DOM (built in) {{ property }}20001$1M

Slide 52

Slide 52 text

SERVICES • Singleton to inject into any Angular component • Lazily instantiated angular.module('realtorsApp') .factory('Properties', function ($http) { var getProperties = function getProperties() { return $http.get('data.json') .then(function (res) { return res.data.properties; }); }; return { getProperties: getProperties }; });

Slide 53

Slide 53 text

CONTROLLERS • Controllers augment scope ($scope) • Bind business logic to the view angular.module('realtorsApp').controller('PropertiesController', function ($scope, Properties, $window) { Properties.getProperties() // chain w/ the promise returned by getProperties() .then(function success(properties) { $scope.properties = properties; }, function failure(err) { $window.alert(err); }); }); });

Slide 54

Slide 54 text

CONTROLLERS • Controllers augment scope ($scope) • Bind business logic to the view

Asking Price: {{ property.price | currency }}

Slide 55

Slide 55 text

OTHER COMPONENTS • Filters • Animations • i18n l10n • Accessibility with ngAria • Testing (Karma, Protractor)

Slide 56

Slide 56 text

RESOURCES • https://docs.angularjs.org/guide/ • https://docs.angularjs.org/api/ • https://docs.angularjs.org/tutorial/ • https://egghead.io (great short videos, ~$15/mo.)

Slide 57

Slide 57 text

EMBER

Slide 58

Slide 58 text

BASICS • Most complete JS framework • Built completely on modular OSS components • Community super-powered

Slide 59

Slide 59 text

WHAT YOU GET • Very strongly deﬁned MVC components • Two-way data binding • Ember Components (like directives) • Great routing support • Dependency injection

Slide 60

Slide 60 text

DEPENDENCIES • jQuery • Handlebars • (optional) Ember Data

Slide 61

Slide 61 text

STRENGTHS • Community, community, community • Convention-driven • Commonalities with every other Ember app

Slide 62

Slide 62 text

WEAKNESSES • Sometimes TOO much information • “Right” way to do things = difﬁcult to get up to speed quickly • Lots of rules • Not as pervasive as other two major frameworks

Slide 63

Slide 63 text

KEY COMPONENTS • Templating via Handlebars • Models • Routes • Controllers • Components

Slide 64

Slide 64 text

WALK-THROUGH • App setup • Routes • Models • Controllers

Slide 65

Slide 65 text

APP SETUP … <div id="page-‐wrap" class="pure-‐skin-‐ember"> <div id="header-‐wrap"> <h1 class="page-‐header">Realtors & Co Properties</h1> </div> <div id="content"></div> </div>

Slide 66

Slide 66 text

APP SETUP … </ script> <script src="js/app.js"> …

Slide 67

Slide 67 text

APP SETUP … </ script> <script src="vendor/handlebars/handlebars.js"></ script> <script src="vendor/ember/ember.js"> … ! var App = Ember.Application.create();

Slide 68

Slide 68 text

APP SETUP … <div id="page-‐wrap" class="pure-‐skin-‐ember"> <div id="header-‐wrap"> <h1 class="page-‐header">Realtors & Co Properties</h1> </div> <div id="content"></div> </div> …

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

ROUTES App.ApplicationRoute = Ember.Route.extend({ model: function() { return $.getJSON('/shared/data.json'); } });

Slide 71

Slide 71 text

MODELS App.ApplicationRoute = Ember.Route.extend({ model: function() { return $.getJSON('/shared/data.json'); } });

Slide 72

Slide 72 text

MODELS App.Person = Ember.Object.extend({ say: function(thing) { alert(thing); } });

Slide 73

Slide 73 text

CONTROLLERS Decorate a model with display logic App.IndexController = Ember.ArrayController.extend({ queryParams: ['sortAscending'], sortProperties: ['price'] });

Slide 74

Slide 74 text

OTHER COMPONENTS • Ember Components! • Ember Data • Testing

Slide 75

Slide 75 text

RISING STARS

Slide 76

Slide 76 text

REACT

Slide 77

Slide 77 text

REACT • Only view layer • Shadow DOM • React is like git diffs for the browser rendering • Super performant

Slide 78

Slide 78 text

POLYMER

Slide 79

Slide 79 text

POLYMER • Web components, web components, web components • Anything I say will be wrong in 3 hours • Also see: x-tags.org, from Mozilla

Slide 80

Slide 80 text

EVALUATING FRAMEWORKS

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

EVALUATION TOOLS • Spreadsheet for ranking: http://bit.ly/1g6kDSS • Rank frameworks according to business, technical, and team criteria • Wharton DevTap:   http://technology.wharton.upenn.edu/devtap/