You should use <insert library / framework here>, it's the bestestest!

Slide 1

Slide 1 text

“YOU SHOULD USE IT’S THE BESTESTEST!” , (worst talk name ever.)

Slide 2

Slide 2 text

“I'm thinking based on your last post, there's a great talk in there, but rather than throw you to the mob with "Your framework sucks", I was thinking a talk entitled (something like) "Data Driven Decisions” would be awesome. Remy Sharp, email, Jul 2015

Slide 3

Slide 3 text

OK, LET’S GET data!

Slide 4

Slide 4 text

POP QUIZ number one

Slide 5

Slide 5 text

“…your last post…”

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

“…the bottleneck is almost always the DOM mutation and not JS execution. React docs

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

2 timers started Time in Framework Timer 1 finished Timer 2 finished “DOM Manipulation”

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

LET’S PLAY GUESS THE element count!

Slide 13

Slide 13 text

URL Element count 2015.ffconf.org 388 twitter.com/rem 4,501 play.google.com/music/listen#/now 3,231 github.com/torvalds/linux/graphs/contributors 5,050 facebook.com 2,936 html.spec.whatwg.org 143,998

Slide 14

Slide 14 text

“If you torture your data long enough, they will confess to anything. Ronald Coase… Probably.

Slide 15

Slide 15 text

DATA POINT: react-ions. (thanks, I know. I know.)

Slide 16

Slide 16 text

“I don't see you mentioning shouldComponentUpdate at all. Twitter responder number one

Slide 17

Slide 17 text

Every framework has best practices that I need to learn & follow. MY ANALYSIS:

Slide 18

Slide 18 text

“An f1 car is fast but you can[’t] do your weekly shop in it Twitter responder number two

Slide 19

Slide 19 text

I find writing vanilla HTML, JS & CSS is too difficult. MY ANALYSIS:

Slide 20

Slide 20 text

Perf is a red herring. Twitter responder number three

Slide 21

Slide 21 text

… MY ANALYSIS:

Slide 22

Slide 22 text

“React isn't popular because it's fast. It's popular because it's fun. Twitter responder number four (my emphasis added)

Slide 23

Slide 23 text

MY ANALYSIS: Having fun when writing code is more important to me than other factors.

Slide 24

Slide 24 text

ERGONOMICS VERSUS user needs.

Slide 25

Slide 25 text

ERGONOMICS USER NEEDS • Fun to use. • Quick to build. • Works around bugs. • Gets me paid, yo. • Loads quickly. • Has smooth interactions. • Doesn’t slow down my phone. • Doesn’t crash. • Has features I want.

Slide 26

Slide 26 text

“ React + Performance = ?, aerotwist.com It seems to me that developer ergonomics should be less important than our users’ needs.

Slide 27

Slide 27 text

POP QUIZ number two.

Slide 28

Slide 28 text

Slide 29

Slide 29 text

ALL CODE HAS a cost.

Slide 30

Slide 30 text

DEV COSTS • Learning it.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

DEV COSTS • Learning it. • Re-learning it.

Slide 33

Slide 33 text

POP QUIZ number three.

Slide 34

Slide 34 text

DEV COSTS USER COSTS • Learning it. • Re-learning it. • Debugging it. • Time. • Bandwidth. • CPU usage (battery). • Frame rate. • Memory usage.

Slide 35

Slide 35 text

LIBRARIES VS. frameworks.

Slide 36

Slide 36 text

Jake Archibald, arguing on Twitter (probably).

Slide 37

Slide 37 text

OK, LET’S GET more data!

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

• Time. • Bandwidth. • CPU usage (battery). DEV COSTS USER COSTS • Learning it. • Re-learning it. • Debugging it. • Frame rate. • Memory usage.

Slide 40

Slide 40 text

Model data requested Model data arrives JS requested JS arrives Page interactive Evaluation, load & execution BOOTSTRAPPING / “TIME-TO-INTERACTIVE” Load

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

HERE’S AN alternative.

Slide 43

Slide 43 text

BIG RIG

Slide 44

Slide 44 text

DEMO With TodoMVC!

Slide 45

Slide 45 text

Responses

Slide 46

Slide 46 text

Animations

Slide 47

Slide 47 text

Page Load

Slide 48

Slide 48 text

Page Load

Slide 49

Slide 49 text

npm install -g bigrig github.com/GoogleChrome/big-rig github.com/GoogleChrome/node-big-rig

Slide 50

Slide 50 text

BACK TO THOSE frameworks.

Slide 51

Slide 51 text

Model data requested Model data arrives JS requested JS arrives Page interactive Evaluation, load & execution Load BOOTSTRAPPING / “TIME-TO-INTERACTIVE”

Slide 52

Slide 52 text

AND HERE ARE the results.

Slide 53

Slide 53 text

Framework Size Bootstrap time N51,3 Bootstrap time iPhone 5S2,3 Polymer v1.1.4 41KB5 409ms 233ms AngularJS v1.4.3 324KB 518ms 307ms React v0.13.3 311KB 1,201ms 1,463ms React v0.13.3 [JSX transformed via Babel]4 162KB 509ms 282ms Backbone v1.2.2 [inc. jQuery & Underscore] 139KB 248ms 168ms Ember v1.10.0-beta.3 580KB 1,992ms 1,440ms Vanilla 16KB 50ms 33ms 1. Tests done on a Nexus 5 running Chrome 47. 2. Tests done on an iPhone 5S running Safari 9. 3. All bootstrapping time includes handling initial todo list data. 4. JS Transformer stripped; JSX files transformed via Babel. 5. Excludes Web Components Polyfill (38KB)

Slide 54

Slide 54 text

POSSIBLE OBJECTIONS • TodoMVC isn’t idiomatic. • TodoMVC isn’t my use-case.

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

POSSIBLE OBJECTIONS • TodoMVC isn’t idiomatic. • TodoMVC isn’t my use-case. • A Nexus 5 / iPhone 5S isn’t what our users use. • It’ll be better in the next version of [insert framework here].

Slide 57

Slide 57 text

SO SHOULD YOU USE a framework?

Slide 58

Slide 58 text

“ PPK, The true JavaScripter, FOWA Oct 2015 Uses libraries & frameworks when needed…

Slide 59

Slide 59 text

FRAMEWORKS ARE AN inversion of control

Slide 60

Slide 60 text

“ PPK, The true JavaScripter, FOWA Oct 2015 But studies them in detail before doing so…

Slide 61

Slide 61 text

COSTS • Time. • Bandwidth. • CPU usage. • Frame rate. ERGONOMICS • Fun to use. • Quick to build. • Works around bugs. • Gets me paid, yo. • Memory usage. • Learning it. • Re-learning it. • Debugging it.

Slide 62

Slide 62 text

USE THE DATA AS A decision informer.

Slide 63

Slide 63 text

“ PPK, The true JavaScripter, FOWA Oct 2015 And prefers to use a single one per project…

Slide 64

Slide 64 text

“ PPK, The true JavaScripter, FOWA Oct 2015 … which provides the technical background to change a library or framework if necessary.