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

E890a763587331f62cf2c39d38137b30?s=47 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.

E890a763587331f62cf2c39d38137b30?s=128

Paul Lewis

November 06, 2015
Tweet

Transcript

  1. “YOU SHOULD USE IT’S THE BESTESTEST!” <INSERT LIBRARY/FRAMEWORK HERE>, (worst

    talk name ever.)
  2. “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
  3. OK, LET’S GET data!

  4. POP QUIZ number one

  5. “…your last post…”

  6. None
  7. “…the bottleneck is almost always the DOM mutation and not

    JS execution. React docs
  8. None
  9. 2 timers started Time in Framework Timer 1 finished Timer

    2 finished “DOM Manipulation”
  10. None
  11. None
  12. LET’S PLAY GUESS THE element count!

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

    to anything. Ronald Coase… Probably.
  15. DATA POINT: react-ions. (thanks, I know. I know.)

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

    number one
  17. Every framework has best practices that I need to learn

    & follow. MY ANALYSIS:
  18. “An f1 car is fast but you can[’t] do your

    weekly shop in it Twitter responder number two
  19. I find writing vanilla HTML, JS & CSS is too

    difficult. MY ANALYSIS:
  20. Perf is a red herring. Twitter responder number three

  21. … MY ANALYSIS:

  22. “React isn't popular because it's fast. It's popular because it's

    fun. Twitter responder number four (my emphasis added)
  23. MY ANALYSIS: Having fun when writing code is more important

    to me than other factors.
  24. ERGONOMICS VERSUS user needs.

  25. 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.
  26. “ React + Performance = ?, aerotwist.com It seems to

    me that developer ergonomics should be less important than our users’ needs.
  27. POP QUIZ number two.

  28. 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.
  29. ALL CODE HAS a cost.

  30. DEV COSTS • Learning it.

  31. None
  32. DEV COSTS • Learning it. • Re-learning it.

  33. POP QUIZ number three.

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

    • Debugging it. • Time. • Bandwidth. • CPU usage (battery). • Frame rate. • Memory usage.
  35. LIBRARIES VS. frameworks.

  36. Jake Archibald, arguing on Twitter (probably).

  37. OK, LET’S GET more data!

  38. None
  39. • Time. • Bandwidth. • CPU usage (battery). DEV COSTS

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

    Page interactive Evaluation, load & execution BOOTSTRAPPING / “TIME-TO-INTERACTIVE” Load
  41. None
  42. HERE’S AN alternative.

  43. BIG RIG

  44. DEMO With TodoMVC!

  45. Responses

  46. Animations

  47. Page Load

  48. Page Load

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

  50. BACK TO THOSE frameworks.

  51. Model data requested Model data arrives JS requested JS arrives

    Page interactive Evaluation, load & execution Load BOOTSTRAPPING / “TIME-TO-INTERACTIVE”
  52. AND HERE ARE the results.

  53. 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)
  54. POSSIBLE OBJECTIONS • TodoMVC isn’t idiomatic. • TodoMVC isn’t my

    use-case.
  55. None
  56. 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].
  57. SO SHOULD YOU USE a framework?

  58. “ PPK, The true JavaScripter, FOWA Oct 2015 Uses libraries

    & frameworks when needed…
  59. FRAMEWORKS ARE AN inversion of control

  60. “ PPK, The true JavaScripter, FOWA Oct 2015 But studies

    them in detail before doing so…
  61. 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.
  62. USE THE DATA AS A decision informer.

  63. “ PPK, The true JavaScripter, FOWA Oct 2015 And prefers

    to use a single one per project…
  64. “ PPK, The true JavaScripter, FOWA Oct 2015 … which

    provides the technical background to change a library or framework if necessary.
  65. SO SHOULD YOU USE a framework?

  66. ERGONOMICS USER NEEDS IMPORTANCE

  67. ERGONOMICS USER NEEDS IMPORTANCE

  68. ALWAYS FOCUS ON the people bit.

  69. Thanks! say hi: @aerotwist