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

You should use <insert library / framework here...

Paul Lewis
November 06, 2015

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

A talk I gave at FFConf 2015 in Brighton, talking about the benefits and costs (to developers and users) of frameworks.

Paul Lewis

November 06, 2015
Tweet

More Decks by Paul Lewis

Other Decks in Technology

Transcript

  1. “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
  2. “If you torture your data long enough, they will confess

    to anything. Ronald Coase… Probably.
  3. “An f1 car is fast but you can[’t] do your

    weekly shop in it Twitter responder number two
  4. “React isn't popular because it's fast. It's popular because it's

    fun. Twitter responder number four (my emphasis added)
  5. 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.
  6. “ React + Performance = ?, aerotwist.com It seems to

    me that developer ergonomics should be less important than our users’ needs.
  7. 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.
  8. DEV COSTS USER COSTS • Learning it. • Re-learning it.

    • Debugging it. • Time. • Bandwidth. • CPU usage (battery). • Frame rate. • Memory usage.
  9. • Time. • Bandwidth. • CPU usage (battery). DEV COSTS

    USER COSTS • Learning it. • Re-learning it. • Debugging it. • Frame rate. • Memory usage.
  10. Model data requested Model data arrives JS requested JS arrives

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

    Page interactive Evaluation, load & execution Load BOOTSTRAPPING / “TIME-TO-INTERACTIVE”
  12. 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)
  13. 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].
  14. 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.
  15. “ PPK, The true JavaScripter, FOWA Oct 2015 … which

    provides the technical background to change a library or framework if necessary.