davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
							<!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>React Is A Terrible Idea (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://www.pandastrike.com/posts/20150311-react-bad-idea">

<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>
  React Is A Terrible Idea (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://www.pandastrike.com/posts/20150311-react-bad-idea">Source originale du contenu</a></h3>
    <p>There&#39;s been a lot of excitement lately about React. React seems to have bumped Angular from the top of <a href="http://is.gd/wuZDbK">the hippest-framework mountain</a>. This is unfortunate, because both of these frameworks are <a href="https://news.ycombinator.com/item?id=9117028">bad for your application&#39;s health</a>. They&#39;re also bad for the entire software industry. For new applications, please, for the love of all things open, use <a href="http://webcomponents.org/">Web components</a> instead.</p>

<p>React&#39;s design is bad. I could give you a lot of specifics—separation of concerns, coupling views with models, the focus on needless optimizations, the importance of supporting open standards—but I&#39;m going to tell you a story, instead. The story is about a startup with a popular product and lots of venture capital. This startup decided that they wanted to make their Web app extra special. Like many who came before them, they decided that HTML and CSS just weren&#39;t <em>quite</em> good enough for them.</p>

<h2>The Wayward Startup</h2>

<p>They went to a great deal of trouble to build their own rendering engine, using Canvas. And it worked! Their Web app was now extra special. However, as it turned out, the browser vendors were working on solving the very problems that had motivated this startup to write their own rendering engine. In fact, just two weeks after the startup announced their extra special rendering engine, a major browser release included a solution to one of the biggest problems of all.</p>

<p>The startup is <a href="https://flipboard.com/">Flipboard</a>. The <a href="http://engineering.flipboard.com/2015/02/mobile-web/">major problem is smooth scrolling</a>, which <a href="https://www.mozilla.org/en-US/firefox/36.0/releasenotes/">just dropped in Firefox</a>. The framework they wrote is <a href="https://github.com/flipboard/react-canvas">React-Canvas</a>, which was largely motivated by the desire for smooth scrolling. Instead of contributing to various efforts to speed DOM rendering, Flipboard decided to write their own canvas-based rendering engine. Was it cool? Yes. Was it impressive? Yes. But was it wisely constructed? No. Instead of a solution everyone can benefit from, we have a solution you can only benefit from if you use React. Even if React was a good design (it&#39;s not), that&#39;s still severely limiting the potential audience.</p>

<p>Panda Strike is not a mindless cult, of course. Some of us think it&#39;s silly to support 60 FPS animations so your users can look at magazines, aka static content. Some of us buy <a href="http://daringfireball.net/2015/02/60_frames_per_second_and_the_web">John Gruber&#39;s argument that iOS-level responsiveness is not really optional any more</a>. But we all agree the engineers at Flipboard are obviously very talented, and React Canvas might be useful to someone. And that it would have been better as a simple Canvas library, without being tightly coupled to React.</p>

<h2>Every Innovation Does Not Need Its Own Framework</h2>

<p>Internally, React depends on virtual DOM. The advantage over browser DOM is that virtual DOM nodes are relatively lightweight. You can create thousands of virtual DOM nodes without any performance impact on your application. Not only that, but you can diff virtual DOM trees and get a patch that can be applied to the actual browser DOM. That seems like it might, indeed, be handy. But what has that got to do with reactive programming? Or embedding markup in JavaScript?</p>

<p>Nothing. As proof, I submit to you this <a href="https://github.com/Matt-Esch/virtual-dom">nice, stand-alone virtual DOM implementation</a>. Here&#39;s what the authors said about <a href="https://gist.github.com/Raynos/8414846">why they wrote a stand-alone version</a>:</p>

<blockquote>
<p>One important part of the virtual DOM approach is that it is a
  <strong>module</strong> and it <strong>should do one thing well</strong>. The virtual DOM
  is only concerned with representing the virtual DOM. The <code>diff</code>
  <code>batch</code> and <code>patch</code> functions are only concerned with the
  relevant algorithms for the virtual dom.</p>
<p>The virtual DOM has nothing to do with events or representing
  application state. The below example demonstrates the usage
  of state with <code>observ</code> and events with <code>dom-delegator</code>. It
  could just as well have used <code>knockout</code> or <code>backbone</code> for state
  and used <code>jQuery</code> or <code>component/events</code> for events.</p>
</blockquote>

<p>The same things could be said of a Canvas-based rendering engine.</p>

<h2>The Real Purpose of React</h2>

<p>Even if Flipboard spent <a href="https://www.crunchbase.com/organization/flipboard">all their venture capital</a> on improving the rendering engines in browsers, they couldn&#39;t spend nearly as much as Facebook is capable of. Whatever sins of misplaced enthusiasm Flipboard may have committed, Facebook has committed tenfold with React. What if, instead of promoting an open source framework that only benefits applications that adopt it, they instead put their efforts into making open source browsers better?</p>

<p>They won&#39;t do this, though, because it isn&#39;t in their interest to do so. You may recall <a href="http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/">Facebook&#39;s abrupt about-face on their mobile app</a> back in 2012, when Mark Zuckerberg said building on HTML5 was his company&#39;s &quot;biggest mistake.&quot; What you may not recall was <a href="http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/">Sencha took this claim as a challenge, and built a great HTML5 implementation of the same app</a>, effectively demonstrating that Facebook&#39;s criticisms of HTML5 were largely unfounded. Unlike Google, whose revenue largely depends on their search engine–which, in turn, depends on people using the Web for everything–Facebook has <a href="http://www.theverge.com/2015/1/4/7488495/facebook-is-the-new-aol">always benefited from being a walled garden</a>. Put another way, Facebook doesn&#39;t care if you use the Web, it only cares that you use Facebook.</p>

<p>So why release an open source Web framework at all? Because <a href="http://www.thewire.com/technology/2014/07/inside-the-ugly-recruitment-battle-between-facebook-and-google/374386/">Facebook is battling Google for engineers</a>. So you&#39;ve got a big fight between two companies over which company is the coolest place to work, and both of them are companies that your grandparents love. How are you going to win this fight? One way is to have the hippest Web framework.</p>

<p>Basically, both Google and Facebook are desperate to find a baseball cap
that they can put on backwards. Angular is Google&#39;s baseball cap. React is
Facebook&#39;s.</p>

<p><img src="https://www.pandastrike.com/assets/images/web-surfin-time.gif"></p>

<h2>The Open Web Is More Important Than You Think</h2>

<p>Meanwhile, Web components are now available in Chrome and Firefox, with polyfills for older browsers. Web components are the biggest leap forward for the Open Web in years…and, yet, we&#39;re talking about React, a completely unnecessary framework. (Seriously, why not just introduce JSX and virtual DOM as separate libraries? And, as far as the data flow stuff goes, that&#39;s not even a new thing. People have been doing that for years.) This is bad, because the Open Web is important, and ten years ago, we nearly lost it.</p>

<p>Today, Microsoft looks like a lost wildebeest, wandering the Saharan plains of failed products. But ten years ago, they were poised to own the Web. If you&#39;ve been in this business less than ten years, you might not realize how close we were to a world where the mobile Web would have required using Windows Phone. Don&#39;t believe me? <a href="http://en.wikipedia.org/wiki/United_States_v._Microsoft_Corp.">Microsoft was actually ruled to be a monopoly</a> in the United States, and <a href="http://money.cnn.com/2013/03/06/technology/microsoft-eu-fine/">is still dealing with the aftermath</a>. To this day, we still hear about the need to support Internet Explorer 8, which is the new Internet Explorer 6, a useless, bug-ridden weight that tied down the entire industry for nearly a decade. And the reason we&#39;re largely free of that weight today is the emergence of Firefox and WebKit.</p>

<p>That didn&#39;t happen by accident.</p>

<h2>How You Can Help</h2>

<p>We have the luxury of complaining about “slow” rendering times in the DOM because we can take for granted a browser platform that is <a href="http://www.chromium.org/developers/calendar">improving faster than</a> <a href="https://hg.mozilla.org/releases/mozilla-release">we can even make use of the new features</a>. This includes <a href="http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome">major rendering improvements</a>. We don&#39;t need more workarounds; what we need is more investment in making the platform we have, whose very existence is a near-miracle, better. And you don&#39;t have to know C or iOS internals to be a part of that. All you have to do is make use of the platform.</p>

<p>That&#39;s right. Just by using new innovations like Web components, instead of work-arounds like React, you&#39;re contributing to the success of the Open Web. You&#39;re voting with your code. With adoption comes community, and with community comes an ecosystem. In two years, we could have a Tower of Babel of recruiting-campaigns-posing-as-frameworks, or we could have an <a href="http://component.kitchen/components">ecosystem of reusable Web components</a>.</p>

<p>The best part is that you don&#39;t have to compromise to get the benefits of Web components. Because they&#39;re actually a much better abstraction for building human-computer interfaces than anything React or Angular have to offer. What a lot of people don&#39;t realize is that components were implicit in MVC <a href="http://heim.ifi.uio.no/~trygver/1979/mvc-2/1979-12-MVC.pdf">when it was first introduced</a>. They&#39;re also the basis of pretty much every other HCI platform ever, including iOS and Android. So it&#39;s not like we&#39;re talking about limiting ourselves by using Web components. Quite the contrary, Web components represent a far superior option.</p>

<h2>React, Bad; Web Components, Good</h2>

<p>A good framework supports separation of concerns. Web components do not impose a way of representing views or attaching event handlers or rendering to the DOM. A bad framework couples those things together so that you can&#39;t use one without the others. That&#39;s what React does.</p>

<p>Sure, you can use JSX if you want, but that&#39;s the worst part of React anyway. JSX wants you to couple your view with the model and controller. It&#39;s a bad idea. Don&#39;t do that. Virtual DOM is great, if you need it, but you probably don&#39;t. And it was <a href="https://github.com/Matt-Esch/virtual-dom">thankfully FTFYd anyway</a>. React is not a good framework. And Web components aren&#39;t even a framework really, so much as <strong><em>how browsers work now</em></strong>. More generally, components are how pretty everything but the Web has worked for decades.</p>

<p>The solution to the problems on the Web is never, ever going to be to tightly couple presentation, behavior, and data. Your Web apps will ultimately become unmaintainable hair balls of unreadable code. The solutions will come in the form of better Web browsers, and reusable components that <em>reduce</em> coupling instead of increasing it. In other words, they&#39;ll be based on best practices that have survived decades of evolution in the software industry. In the meantime, your best bet is typically going to be to use what works and focus on the problems you can do something about, without trying to reinvent the browser from inside the browser.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://www.pandastrike.com/posts/20150311-react-bad-idea">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>