davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>The Cost of Frameworks (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://aerotwist.com/blog/the-cost-of-frameworks/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  The Cost of Frameworks (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://aerotwist.com/blog/the-cost-of-frameworks/">Source originale du contenu</a></h3>
    <p><strong>Update: Nov 16th 2015 - Added an extra row in the table for React under production conditions. The good news: it’s 3x slower than vanilla, yes, but in actual terms I’d say it’s fast for TodoMVC! The Polymer TodoMVC sample was also updated to version 1.2.2 today, and that, too, is faster.</strong></p>

<p>If you prefer watching to reading, here’s the video of the talk (you can also <a href="https://speakerdeck.com/paullewis/framework-here-its-the-bestestest">get the slides</a>, too, if you like):</p>

<iframe width="100%" height="420" src="//www.youtube.com/embed/_yCz1TA0EL4?vq=hd720" frameborder="0" allowfullscreen="allowfullscreen" style="margin-bottom: 20px; box-shadow: 0 2px 2px rgba(0,0,0,0.3)">
</iframe>

<p>If you prefer reading to watching, well, keep reading…</p>

<h2 id="the-benefits-of-frameworks">The benefits of frameworks</h2>

<p>Earlier in the year I wrote about <a href="https://aerotwist.com/react-plus-performance-equals-what/">React’s performance characteristics</a> as the tree size it has to manage gets larger (TL;DR the bigger the tree, the more computation work it has to do). The responses I got to that post really varied, from appreciative and constructive to, well, the other end of the spectrum. The responses gave me some additional insight, though, which I think applies to all frameworks (to a greater or lesser extent), and which I’ll now try and summarize:</p>

<ul>
  <li><strong>Frameworks are fun to use</strong>. I don’t think I know any developer who actively seeks out a more challenging and less fun experience! And yes, absolutely, ergonomics <em>are</em> important.</li>
  <li><strong>Frameworks make it quicker to build an MVP</strong>. This one is important, particularly for smaller, fledgling organizations or companies. Having a fast bootstrap may be the difference between shipping and not shipping.</li>
  <li><strong>Frameworks work around lumps / bugs in the platform</strong>. I think this is less of an issue these days (though not irrelevant) as browsers have rallied around standards very well in the past few years. Certainly this is less painful compared to my early career, where we were dealing with IEs 5 and 6, and early versions of Firefox, Safari and, of course, Chrome.</li>
  <li><strong>Knowing [insert framework] means I get paid.</strong> If you’re looking to get hired, saying that you know the latest and greatest framework(s) may be the difference maker.</li>
</ul>

<blockquote>
  <p>The key message I heard over and over, sometimes explicitly, and often implicitly, is that ergonomics are the most important factor for many developers.</p>
</blockquote>

<p>The key message I heard over and over, sometimes explicitly, and often implicitly, is that ergonomics are <em>the most important factor</em> for many developers. If I can paraphrase, the sentiment was “if I have an easier time I’ll build something better for my users”. At face value that sounds appealing, but I think it misses a lot of important points.</p>

<h2 id="developer-ergonomics-vs-user-needs">Developer Ergonomics vs User Needs</h2>

<p>Users have needs, too, though. Here are a few of them that come to mind:</p>

<ul>
  <li><strong>Sites and apps should load quickly.</strong></li>
  <li><strong>They should have smooth interactions.</strong></li>
  <li><strong>They shouldn’t slow down my phone.</strong></li>
  <li><strong>They shouldn’t crash.</strong></li>
  <li><strong>They should have features I want.</strong></li>
</ul>

<p>So immediately we’re into a potential trade-off situation: on the one hand we have our convenience, our ergonomics, and on the other hand we have our users’ needs. And we have to trade, whether we like it or not, since frameworks aren’t free.</p>

<h2 id="a-quick-side-step">A quick side step</h2>

<p>At this point I’m going to park libraries, and leave them out of this discussion. The reason is that, in my view at least, libraries can be swapped out and replaced if they prove problematic. Don’t like the way a library does date formatting? No problem, just switch it for something else. Frameworks, on the other hand, tend to be a lot more difficult to swap, often requiring a rebuild of the app in question. And, by their nature, they’re a lot bigger and more involved.</p>

<h2 id="the-cost-of-code">The cost of code</h2>

<p>All code has costs, but I think there are particular costs that are unique to frameworks.</p>

<figure>
  <img src="https://aerotwist.com/static/blog/the-cost-of-frameworks/deprecated.jpg" alt="A deprecation warning." />
  <figcaption>That magical moment where an framework tells you something is deprecated. Apparently it was superseded by Java. Weird.</figcaption>
</figure>

<ul>
  <li><strong>Learning it.</strong> You have to take time out to learn any new framework: what it means to write “idiomatic” code for that framework; its patterns, practices, and ways of doing things. This is no different to the web platform itself. There’s no free ride, you’re just swapping one set of issues for another.</li>
  <li><strong>Re-learning it.</strong> One day you’re just bimbling along, developing your app, and in the console you see a warning telling you that there’s been a deprecation, and that you need to update your code. That often requires figuring out what the latest version of the framework needs you to do differently, and that may also mean updating projects that shipped with older versions of the framework.</li>
  <li><strong>Debugging it.</strong> Frameworks, like any software, have bugs. That’s to be expected, and it wouldn’t be any different if you went vanilla and wrote your own. Debugging a framework, however, often ranges from difficult to impossible. If you find the issue, you may have to keep your own frankensteined version around with a monkey patch applied until the real fix lands in the framework’s production build.</li>
</ul>

<p>Aside from the developer costs, there are costs to the user, too:</p>

<ul>
  <li><strong>Time.</strong> How long does it take to bootstrap the thing we sent down the wire?</li>
  <li><strong>Bandwidth.</strong> How much bandwidth does it use up?</li>
  <li><strong>CPU usage (battery).</strong> How CPU intensive is it? CPU utilization is going to correlate to battery usage: burn the CPU and the battery will get drained.</li>
  <li><strong>Frame rate.</strong> How well does the code update the screen? (We know that <a href="https://paul.kinlan.me/what-news-readers-want/">users like smooth interactions</a>.)</li>
  <li><strong>Memory usage.</strong> How much memory does it use? Will it cause other apps to be evicted from memory? Perhaps even crash a tab?</li>
</ul>

<h2 id="bringing-data-to-the-table">Bringing data to the table</h2>

<p>So with all that in mind, I wanted to start off a conversation about measuring some of those costs, and my hope is that together we can build up more of a picture about the trade-offs we choose to make.</p>

<p>I decided to take a look at the bootstrapping time for frameworks on mobile. The theory being that, given a like-for-like app, one should be able to see how long it takes each framework to boot. I opted to use <strong>TodoMVC</strong> for the test, because in my view it’s an MVP web app, and from a user’s point of view, each variant is functionally identical.</p>

<figure>
  <img src="https://aerotwist.com/static/blog/the-cost-of-frameworks/todomvc.jpg" alt="TodoMVC." />
  <figcaption>TodoMVC: source of my bootstrapping test.</figcaption>
</figure>

<h3 id="bootstrapping--time-to-interactive">Bootstrapping / Time-to-interactive</h3>

<p>Of the costs listed above, I decided to take a look at the <strong>Time</strong>, <strong>Bandwidth</strong>, and <strong>CPU usage</strong> for booting up some frameworks on a Nexus 5 and iPhone 5S.</p>

<figure>
  <img src="https://aerotwist.com/static/blog/the-cost-of-frameworks/time-to-interactive.jpg" alt="Measuring time to interactive." />
  <figcaption>Time to interactive: measuring how long it takes for an app to get to a state where someone can interact with it.</figcaption>
</figure>

<p>I decided to measure the time it takes to <strong>evaluate and execute each framework’s initial payload of JavaScript</strong>, and the processing and setup of the initial data set into a model. I decided to ignore the cost of styles, layout, paint and so on since they shouldn’t vary all that much between the different TodoMVC implementations. I was also not testing transfer time.</p>

<h3 id="methodology">Methodology</h3>

<p>I used <a href="https://webpagetest.org">WebPagetest</a> to load the pages on a Nexus 5, and I requested a timeline file for each run, which I then passed to <a href="https://aerotwist.com/bigrig/">Big Rig</a> for processing. The iPhone results I did myself, and had to tally up manually, because unfortunately Safari’s JavaScript profiling doesn’t seem to support any timeline / trace file export.</p>

<figure>
  <img src="https://aerotwist.com/static/blog/the-cost-of-frameworks/bigrig.jpg" alt="Using Big Rig to measure TodoMVC bootup time." />
  <figcaption>Using Big Rig to quickly assess the TodoMVC bootup time per framework.</figcaption>
</figure>

<p>This, incidentally, is why I built <a href="https://aerotwist.com/bigrig">Big Rig</a>. I wanted to make it easier for all of us to start processing this kind of data quickly.</p>

<h3 id="repeating-the-test">Repeating the test</h3>

<p>If you want to do your own test like this, at least for a device running Chrome, you should do the following:</p>

<ul>
  <li>Install the Big Rig CLI: <code>npm install -g bigrig</code>.</li>
  <li>Go to <a href="http://webpagetest.org">WebPagetest</a>.</li>
  <li>Set the location to Dulles.</li>
  <li>Set the browser to Nexus 5 - Chrome (or Beta/Dev).</li>
  <li>Under the Chrome settings, check “Capture Dev Tools Timeline”.</li>
  <li>Run the test.</li>
  <li>Download the Timeline file on the left hand side of the results.</li>
  <li>Run <code>bigrig --file /path/to/timeline.json --pretty-print</code>.</li>
</ul>

<p>If you prefer, you can watch me getting a Timeline file from WebPagetest:</p>

<iframe width="100%" height="420" src="//www.youtube.com/embed/LFOCkLqPklg?vq=hd720" frameborder="0" allowfullscreen="allowfullscreen" style="margin-bottom: 20px; box-shadow: 0 2px 2px rgba(0,0,0,0.3)">
</iframe>

<h2 id="the-results">The results</h2>

<p>Here’s how the various frameworks stacked up in my tests:</p>

<table class="left-highlight">
  <thead>
    <tr>
      <th>Framework</th>
      <th>Size</th>
      <th>Bootstrap time N5<sup>1,3</sup></th>
      <th>Bootstrap time iPhone 5S<sup>2,3</sup></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Polymer v1.1.4</td>
      <td>41KB<sup>5</sup></td>
      <td>409ms</td>
      <td>233ms</td>
    </tr>
    <tr>
      <td>Polymer v1.2.2</td>
      <td>47KB<sup>5</sup></td>
      <td>155ms</td>
      <td>232ms</td>
    </tr>
    <tr>
      <td>AngularJS v1.4.3</td>
      <td>324KB</td>
      <td>518ms</td>
      <td>307ms</td>
    </tr>
    <tr>
      <td>React v0.13.3 [JSX not transformed]</td>
      <td>311KB</td>
      <td>1,201ms</td>
      <td>1,463ms</td>
    </tr>
    <tr>
      <td>React v0.13.3 [JSX transformed via Babel]<sup>4</sup></td>
      <td>162KB</td>
      <td>509ms</td>
      <td>282ms</td>
    </tr>
    <tr>
      <td>React v0.13.3 [JSX transformed; prod build]<sup>4, 6</sup></td>
      <td>160KB</td>
      <td>174ms</td>
      <td>118ms</td>
    </tr>
    <tr>
      <td>Backbone v1.2.2 [inc. jQuery &amp; Underscore]</td>
      <td>139KB</td>
      <td>248ms</td>
      <td>168ms</td>
    </tr>
    <tr>
      <td>Ember v1.10.0-beta.3</td>
      <td>580KB</td>
      <td>1,992ms</td>
      <td>1,440ms</td>
    </tr>
    <tr>
      <td>Vanilla</td>
      <td>16KB</td>
      <td>50ms</td>
      <td>33ms</td>
    </tr>
  </tbody>
</table>

<ol>
  <li>Tests done on a Nexus 5 running Chrome 47.</li>
  <li>Tests done on an iPhone 5S running Safari 9.</li>
  <li>All bootstrapping time includes handling initial todo list data.</li>
  <li>JS Transformer stripped; JSX files transformed via Babel.</li>
  <li>Excludes Web Components Polyfill (38KB).</li>
  <li>React switched for minified production build.</li>
</ol>

<p>For me the results are pretty clear: <strong>there appears to be a pretty hefty tax to using Frameworks on mobile, especially compared to writing vanilla JavaScript</strong>. The fastest is React (under production conditions), which is awesome, but it’s still 3x slower than Vanilla (and I <a href="https://aerotwist.com/react-plus-performance-equals-what/">still have concerns over its scaling properties</a>.)</p>

<p>To make things super clear, here are a couple of notes:</p>

<ul>
  <li><strong>TodoMVC doesn’t JSX Transform React, so I did.</strong> The reason there are three entries for React is that the TodoMVC example doesn’t transform JSX, and instead includes the JSX Transformer library. To make things fairer (because the runtime JSX transformation is expensive!), I made a more ‘productionized’ version of the example, and tested that, too. The downside is that it’s not the minified version of React, which is different again. So I also switched out the build of React for the production version, and that’s the third build in the table.</li>
  <li><strong>These times do <em>not</em> include transfer time.</strong> The only thing I was measuring was the time in JavaScript to bootstrap the framework and get the initial view built. In fact, <em>some of the frameworks in TodoMVC aren’t minified</em>. For a more discussion on framework transfer sizes, <a href="https://www.filamentgroup.com/lab/mv-initial-load-times.html">check out the Filament Group’s post from last year</a>.</li>
</ul>

<h3 id="possible-objections">Possible Objections</h3>

<p>I figure there’s likely to be some objections to the test, which are definitely worth talking through:</p>

<blockquote>
  <p>I’d argue your use-case is probably more expensive than TodoMVC.</p>
</blockquote>

<ul>
  <li><strong>“TodoMVC isn’t idiomatic.”</strong> I checked this one out, and from what I understand every implementation <em>is</em> idiomatic, and framework experts file PRs against them when they aren’t.</li>
  <li><strong>“TodoMVC isn’t my use-case.”</strong> That’s probably true, but I’d argue your use-case is probably <em>more</em> expensive than TodoMVC. <a href="https://github.com/reddit/reddit-mobile/issues/247">Paul Irish recently did a performance audit on Reddit’s mobile site</a>, and he discovered, amongst other things, that 22 seconds were going into just booting up React’s components on mobile!</li>
  <li><strong>“A Nexus 5 / iPhone 5S isn’t what our users use.”</strong> That’s also probably true. I have the privilege of using good hardware, and I would imagine that many people don’t have access to top end phones, so I’d expect these numbers to be even worse in those cases.</li>
  <li><strong>“It’ll be better in the next version of &lt;insert framework here&gt;.”</strong> This may well be true, but it doesn’t do much for anything you’ve shipped with the current version.</li>
</ul>

<h2 id="the-64k-question">The $64k question</h2>

<p>So, inevitably, the question comes: <em>“Should you use a framework?”</em></p>

<p>I can’t answer that question, because I think it’s entirely your call. There are a million and one reasons why you may feel you need to use one. But, for what it’s worth, here are my thoughts:</p>

<ul>
  <li><strong>Frameworks contribute ideas and concepts</strong>. Frameworks are a crucial part of understanding what approaches work, and what don’t, and that ultimately drives improvements at the platform level. In that regard I think they serve as important testing grounds for the platform changes of tomorrow and let us figure things out before they become embedded in the web permanently.</li>
  <li><strong>Frameworks are an inversion of control</strong>. The reason I parked libraries earlier on is that you can swap them out. Frameworks, on the other hand, invert control. <em>They</em> control the lifecycle of the app, and give <em>you</em> entry points where your code runs. You’re still responsible for the final code, but you’re not in control.</li>
  <li><strong>Frameworks are expensive on mobile</strong>. Compared to vanilla, at least. For me, prohibitively so, but everyone has their own limits of what they’re willing to tolerate.</li>
</ul>

<blockquote>
  <p>Investing in knowledge of the web platform itself is the best long-term bet.</p>
</blockquote>

<p>As I look at frameworks, I see the ergonomic benefits (and those are important, I agree!), but I can’t help but feel that, for many developers, <strong>investing in knowledge of the web platform itself is the best long-term bet</strong>. Frameworks come and go, it just seems to be the ebb and flow of the web, and, as I said above, they <em>do</em> contribute ideas and patterns. But if you ever find that the one you use no longer works for you, or has a bug that remains unfixed, being able to understand the platform that underpins it will help enormously.</p>

<h2 id="the-bigger-conversation">The bigger conversation</h2>

<p>When I wrote the post earlier in the year about React, I said this:</p>

<blockquote class="quote">
  <p>It seems to me that developer ergonomics should be less important than our users’ needs.</p>
</blockquote>

<p>I still believe that. As much as I love the idea of having an easier life, I don’t want to ship something to people that doesn’t run well, and I don’t want them to pay the cost. Today I’m concerned by the costs of booting up frameworks on mobile.</p>

<blockquote>
  <p>I’m concerned by the costs of booting up frameworks on mobile.</p>
</blockquote>

<p>This is only a first step. There are other metrics besides bootstrapping I’ve barely had chance to look into: memory usage, long-term CPU usage, and impact on frame rate to name three. Overall, I think we have more to do to properly assess the impact of code that we ship to our users and the costs we pass on to them.</p>

<p>If we can achieve fast-booting, low-memory, smooth-executing frameworks with good ergonomics we’ll be onto a winner. Until then, for mobile at least, I’ll be sticking to the vanilla web platform.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://aerotwist.com/blog/the-cost-of-frameworks/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>