davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/b444545a4f1e8d14b077bb3ea4c.../index.html

index.html 35KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Combining React, Flux & Web Components (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://futurice.com/blog/combining-react-flux-and-web-components">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Combining React, Flux & Web Components (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://futurice.com/blog/combining-react-flux-and-web-components">Source originale du contenu</a></h3>

  463.     <p>I recently had an interesting conversation with some very smart colleagues on the topic of UI component reusability on modern web frontend applications. This led me to spend a few hours on a lazy Sunday afternoon clarifying my thoughts on the status quo - and the road ahead - of web frontend architectures. Specifically, I find it interesting how the short-term future seems to somewhat contradict the assumed long-term future.</p>

  464. 

  465. <h2 class="article__heading--h2">The Short-term Future</h2>

  466. 

  467. <p>React is currently the “new hotness” and seems like the immediate future of the web frontend, and along with it come a breadth of projects that either build on top of the framework itself, or on the ideas it has recently popularized. The most important of these ideas is the concept of a “Virtual DOM”, which reduces the need to directly operate on the massive, complex &amp; sluggish shared data structure that is the traditional DOM. React et al have been covered <a href="https://www.youtube.com/watch?v=nYkdrAPrdcw#t=1453">thoroughly</a> <a href="http://facebook.github.io/react/docs/why-react.html">elsewhere</a>, so let’s move on.</p>

  468. 

  469. <p>In the wake of React comes another important part of the immediate future of frontend development: the Flux architecture and its kin. At this point it’s important to note that neither React’s virtual DOM nor the Flux architecture are necessarily the pinnacles of their respective breeds (e.g. <a href="https://github.com/Matt-Esch/virtual-dom">virtual-dom</a> seems an excellent, simplified alternative to React, and there’s no <a href="http://fluxxor.com/">shortage</a> <a href="https://github.com/deloreanjs/delorean">of</a> <a href="https://github.com/spoike/refluxjs">Flux-like</a> <a href="https://github.com/swannodette/om">architectures</a> <a href="https://github.com/moreartyjs/moreartyjs">lately</a>), but for the purposes of this discussion, let’s treat them as umbrella terms for the ideas they represent.</p>

  470. 

  471. <p>The Flux architecture proposes to simplify complex Single-Page Applications through an unidirectional data flow. This is also explained <a href="http://facebook.github.io/flux/docs/overview.html">better</a> <a href="https://www.youtube.com/watch?v=nYkdrAPrdcw#t=622">elsewhere</a>; the point to take away from this is that things become simpler when you just re-render the entire application based on the current state of the world, a single, consistent source of truth, and do it every time that state changes. This reminds us of the good-old-days of server-side rendering, <a href="https://www.youtube.com/watch?v=nYkdrAPrdcw#t=1588">back in the 90’s</a>: you have a bunch of data (e.g. request parameters, stuff from a database), which you turn into HTML by passing it through a function (e.g. your templating implementation). What makes this simple - and crucially different from traditional DOM wrangling in the browser - is you don’t have to care about any existing state in the DOM, you just overwrite everything with a new one. Traditional <a href="http://underscorejs.org/#template">string-interpolation</a> <a href="http://mustache.github.io/">templating</a> has been possible in the browser for ages, but constantly dumping and re-creating the DOM has been prohibitively expensive for larger apps. A Virtual DOM changes this.</p>

  472. 

  473. <p>So this is what I take the short-term future of web frontends to be, and indeed, the ball is already rolling. But is there something even bigger brewing?</p>

  474. 

  475. <h2 class="article__heading--h2">The Long-term Future</h2>

  476. 

  477. <p>Flux et al are still fully present-generation frontend architectures - that is, they’re working off of the same technical platform which has existed in browsers for a long time. In the distant horizon, however, a tectonic shift to this platform awaits: Web Components. I’ll again leave the introductions to <a href="http://css-tricks.com/modular-future-web-components/">more</a> <a href="https://developers.google.com/events/io/sessions/318907648">capable</a> <a href="http://webcomponents.org/">hands</a>, but the gist of the spec is being able to create custom DOM elements. These custom elements are <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">isolated</a> from their neighbors (and parents and children), and they encapsulate some small part of the overall application. The canonical example is the <code>&lt;video&gt;</code> element: all you need to do to bring a self-contained video player “mini-application” - complete with a seek bar, playback control buttons, etc - into your main application is to create a <code>&lt;video&gt;</code> element on your page. The internal logic, DOM content, styling and (importantly!) state is neatly packaged away behind a standard DOM element. My go-to quote with this is from <a href="https://twitter.com/justinbmeyer">Justin Meyer</a>: <a href="http://addyosmani.com/largescalejavascript/">"The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application"</a>. Web Components allows you to do just this: break your large app into a bunch of independent mini-apps, making the complexity of the whole more manageable.</p>

  478. 

  479. <p>Another important implication of being able to abstract these mini-apps behind a standard DOM element is interoperability. With the current state of affairs in frontend development, being able to reuse UI elements within and across projects is quite painful. Taking one JavaScript module and making it work together with one from another framework is hard enough, let alone being able to neatly package other UI assets (such as CSS, icons, images) to go along with it. Web Components (through the related <a href="http://www.html5rocks.com/en/tutorials/webcomponents/imports/">HTML Imports</a> spec) proposes a solution: a standard browser mechanism for pulling in a component - with all its dependencies and assets - and using it as simply as adding a <code>&lt;div&gt;</code> into the DOM. One core part of this promise is the aforementioned isolation: importing a custom element would have minimal effects on any existing elements within the same DOM. Many large frameworks such as <a href="https://angularjs.org/">Angular</a>, <a href="http://emberjs.com/">Ember</a>, <a href="https://www.polymer-project.org/">Polymer</a> and <a href="http://www.x-tags.org/">X-Tags</a> are already preparing for this, <a href="http://www.2ality.com/2013/05/web-components-angular-ember.html">promising</a> (and even <a href="https://www.polymer-project.org/articles/demos/polymer-xtag-vanilla/example.html">demonstrating</a>) easier interoperability. The importance of this should not be understated: frameworks with very different ideas and implementations could be mixed at matched with relative ease. Given the incredible pace of innovation in the web frontend space, being able to swap out components for better ones without completely rewriting the surrounding application should be very desirable.</p>

  480. 

  481. <p>Sound good? I think so. I’m willing to go on record saying Web Components will be huge (thoroughly embarrassing my future self I’m sure, but oh well). Sadly, they’re <a href="http://caniuse.com/#search=web%20components">not there yet</a>: even though the most relevant frameworks in the space - <a href="https://www.polymer-project.org/">Polymer</a> (backed by Google) and <a href="http://www.x-tags.org/">X-Tags</a> (backed by Mozilla) - have polyfills for parts of the spec, it represents such a fundamental shift to how applications are constructed and how browsers work that it won’t be smooth sailing for quite a while.</p>

  482. 

  483. <h2 class="article__heading--h2">The philosophical mismatch</h2>

  484. 

  485. <p>So these are the directions frontend development seems headed, now and later. However, these short- and long-term futures seem incompatible at face value: aren’t the intricacies of maintaining stateful DOM components exactly what Flux et al attempt to rid us of? If we have a “mini-app” with encapsulated internal state, we can’t just re-render the whole DOM whenever we feel like it, as we’ll potentially lose that important state. Or, from another perspective, if we no longer have control over (or even access to!) the full state of the world, how can we ever be sure that that state remains consistent across our UI? This mismatch seems quite fundamental, and I don’t see a simple way to unify these concepts.</p>

  486. 

  487. <p>Yet, that is not to say there’s no potential for overlap. Indeed, the promised interop mechanisms of Web Components are too important for the frontend profession to overlook. It should also be noted Flux itself <a href="http://facebook.github.io/flux/docs/overview.html#views-and-controller-views">proposes</a> striking a balance between the simplicity of a single, unidirectional flow of data (with a singular state of the world) and breaking a large application into smaller, more manageable sub-applications (with their own internal states). The reasoning behind this is a familiar one: we human beings are pretty terrible at handling a lot of complexity at once, so it helps to break problems into manageable chunks. So, if these two futures aren’t mutually exclusive after all, how would we go about marrying them, and would we get anything out of it?</p>

  488. 

  489. <h2 class="article__heading--h2">A brief aside on loosely connected sub-domains</h2>

  490. 

  491. <p>Say you were building a web shop, ignoring the choice of frontend architecture for a bit. The domain of that application would probably include displaying product categories, the products that belong to those categories, a shopping cart implementation, that sort of thing. The information within that domain - the price of a product, for instance - has to remain consistent regardless of where the product appears (e.g. in a listing, a shopping cart or a wishlist). Giving this domain the “mini-app” treatment, and breaking it apart into smaller chunks might not reduce the overall complexity of the system at all. The opposite seems likely, in fact, as making sure the state of the world remains consistent across a distributed system is far from trivial.</p>

  492. 

  493. <p>Consider, however, having to add a chat-box next to your product details page. You know, the kind where you can talk to a human if you can’t figure out if the product is right for you. Implementing a real-time chat application in the browser is certainly easier than it used to be, but it isn’t trivial, either. Facebook had <a href="https://www.youtube.com/watch?v=nYkdrAPrdcw#t=882">problems</a> getting theirs right, and they employ pretty smart people. But even though the chat-box contains an interesting domain of engineering challenges, it’s only loosely connected to the domain of the main application. That is, while the sales representative at the other end might be interested in a bit of context - like the current product category - the chat-box can lead a relatively independent life.</p>

  494. 

  495. <p>But I digress; what does any of this have to do with marrying React, Flux &amp; Web Components?</p>

  496. 

  497. <h2 class="article__heading--h2">Packaging Flux into Web Components</h2>

  498. 

  499. <p>One way to leverage both paradigms is to implement the internals of a Web Component using a Flux-like architecture. If you’re able to identify a loosely connected sub-domain in your frontend application - the chat-box for example - you can use all the simplifying power of Flux within that domain. Packaging it up in a Web Component gives you a custom element - say <code>&lt;chat-box&gt;</code> - which is both agnostic to its surroundings, and reusable within and across projects. Pulling it in is as simple as adding a <code>&lt;link rel="import" href="chat-box.html"&gt;</code> to your application, and it’s ready to be used wherever you could drop any other tag, say, <code>&lt;video&gt;</code>.</p>

  500. 

  501. <p>The <code>&lt;chat-box&gt;</code> element presents itself as a regular DOM element, and exposes any custom functionality through standard DOM API’s, the ones all kinds of libraries already know how to manipulate:</p>

  502. 

  503. <ul>

  504.     <li>To parametrize it during instantiation, you can pass in attributes:<br/>

  505.     <code>&lt;chat-box product-category="bikes"&gt;</code>

  506. </li>

  507.     <li>To invoke its encapsulated functionality, you can call methods on the DOM element:<br/>

  508.     <code>document.querySelector("chat-box").connect()</code>

  509. </li>

  510.     <li>To react to interesting changes in state, you can listen for events:<br/>

  511.     <code>chatBox.addEventListener("customer-rep-available", highlightChatBox)</code>

  512. </li>

  513. </ul>

  514. 

  515. <p>The true (proposed) power of Web Components is realized when the packaging of such a component is so opaque that it doesn’t really matter which framework <a href="http://pixelscommander.com/polygon/reactive-elements/example/">reigns inside</a> (or outside!) the component. Let us assume <a href="http://www.reddit.com/r/programming/comments/2kl88s/angular_20_drastically_different/">Angular 2.0 comes out</a> and you find it solves the real-time chat domain problems with a lot more elegance than with Flux. As long as the new implementation exposes the same standard DOM interfaces, swapping in an Angular implementation would be as simple as changing the HTML Import for the <code>&lt;chat-box&gt;</code> element.</p>

  516. 

  517. <h2 class="article__heading--h2">Managing Web Components within Flux</h2>

  518. 

  519. <p>The pairing also works the other way around. Since a Virtual DOM implementation essentially allows you to create lightweight DOM elements (which are realized into their heavyweight counterparts only as necessary), there’s no reason why custom elements can’t receive the same treatment. That is, if our React component’s render method looks like this:</p>

  520. 

  521. <pre class="article__code CodeRay CodeRay--javascript">

  522. <code data-lang="javascript"><span class="function">render</span>: <span class="keyword">function</span>() {

  523.     <span class="keyword">return</span> <span class="tag">&lt;div&gt;</span>

  524.         Hello {this.props.name}!

  525.         <span class="tag">&lt;chat-box</span> <span class="tag">/&gt;</span>

  526.     <span class="tag">&lt;/div&gt;</span>;

  527. }</code></pre>

  528. 

  529. <p>...then there’s no reason to assume the <code>&lt;chat-box&gt;</code> element has to be implemented as a React component. Indeed, exactly as you’re able to create a virtualized <code>&lt;div&gt;</code> which will <a href="http://facebook.github.io/react/docs/reconciliation.html">later be turned</a> into an actual DOM <code>&lt;div&gt;</code>, we can let React manage the life and death of our custom <code>&lt;chat-box&gt;</code> element. Again, what makes this possible is the fact that custom elements are integrated through standard DOM API’s, which DOM libraries (like React or jQuery) already know well.</p>

  530. 

  531. <p>The problematic part of this approach is that in order to be fast, React will often <a href="http://facebook.github.io/react/docs/multiple-components.html#child-reconciliation">reuse existing DOM elements</a> to realize DOM updates as cheaply as possible. If our custom element contains internal state, it will likely end up either lost or corrupted as a result. While the problem can be somewhat worked around with <a href="http://facebook.github.io/react/docs/multiple-components.html#dynamic-children">keyed children</a>, we still need to be careful to not lose important internal state along with the comings and goings of custom elements.</p>

  532. 

  533. <h2 class="article__heading--h2">Managing stateless Web Components</h2>

  534. 

  535. <p>The two previous approaches to combining a Virtual DOM with Web Components have been very much concerned with state management, and rightly so: managing the consistency of state in a complex frontend application can be a daunting task. If we forget Flux, state management and our beloved “mini-apps” for a bit, however, we’re still left with an interesting case to consider: Web Components without any internal state.</p>

  536. 

  537. <p>Let’s say you’ve created a <a href="https://www.polymer-project.org/components/paper-elements/demo.html#paper-tabs">sweet tab implementation</a> as a Web Component, and decided its markup looks like this:</p>

  538. 

  539. <pre class="article__code CodeRay CodeRay--html">

  540. <code data-lang="html"><span class="tag">&lt;paper-tabs</span> <span class="attribute-name">selected</span>=<span class="string"><span class="delimiter">"</span><span class="content">0</span><span class="delimiter">"</span></span><span class="tag">&gt;</span>

  541.     <span class="tag">&lt;paper-tab&gt;</span>First tab<span class="tag">&lt;/paper-tab&gt;</span>

  542.     <span class="tag">&lt;paper-tab&gt;</span>Second tab<span class="tag">&lt;/paper-tab&gt;</span>

  543.     <span class="tag">&lt;paper-tab&gt;</span>Third tab<span class="tag">&lt;/paper-tab&gt;</span>

  544. <span class="tag">&lt;/paper-tabs&gt;</span></code></pre>

  545. 

  546. <p>The "<code>selected"</code> attribute controls which tab is currently visible. We can easily let React manage this tab implementation, without fears of clobbering delicate internal state, like so:</p>

  547. 

  548. <pre class="article__code CodeRay CodeRay--javascript">

  549. <code data-lang="javascript"><span class="function">render</span>: <span class="keyword">function</span>() {

  550.     <span class="keyword">return</span> &lt;paper-tabs selected={<span class="local-variable">this</span>.props.selectedTab}&gt;

  551.         {tabContent}

  552.     &lt;<span class="regexp"><span class="delimiter">/</span><span class="content">paper-tabs&gt;;

  553. }</span></span></code></pre>

  554. 

  555. <p>The important difference to the preceding <code>&lt;chat-box&gt;</code> example is that any and all state in the <code>&lt;paper-tabs&gt;</code> component is explicitly controlled through immutable props. <a href="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state">This is a good thing</a>. It allows us to simply not care how React manages the DOM, as long as the end result has the content and attributes we specify. It also allows us to fall back to the simple, unidirectional data flow of Flux, while still enjoying many delicious properties of Web Components, such as their isolation semantics, and delivery through simple HTML Imports.</p>

  556. 

  557. <h2 class="article__heading--h2">Closing thoughts</h2>

  558. 

  559. <p>I hope this helped clarify how the two futures of frontend architecture - Flux and Web Components - are fundamentally different, and yet still composable in interesting ways. The simplifying power of Flux can’t be dismissed, but even less so the powerful interoperability characteristics of Web Components. While an acceptable level of Web Components support is still years away, if we align our choices today with what’s coming tomorrow, we’ll be on more solid ground as the craft continues to evolve, often at breakneck speeds. As software craftsmen, we want to use these latest advances in technology to deliver kick-ass user experiences for the browser. Currently, the “new hotness” is React, with a Flux-like architecture backing it up. Still, it’s certainly not the end-all of frontend architectures, and big players are betting big on Web Components. Understanding the interplay between these short- and long-term futures is important to make sure our creations stand the test of time.</p>

  560.   </article>

  561. </section>

  562. 

  563. 

  564. <nav id="jumpto">

  565.   <p>

  566.     <a href="/david/blog/">Accueil du blog</a> |

  567.     <a href="http://futurice.com/blog/combining-react-flux-and-web-components">Source originale</a> |

  568.     <a href="/david/stream/2019/">Accueil du flux</a>

  569.   </p>

  570. </nav>

  571. 

  572. <footer>

  573.   <div>

  574.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  575.     <p>

  576.       Bonjour/Hi!

  577.       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>

  578.       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>).

  579.     </p>

  580.     <p>

  581.       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>.

  582.     </p>

  583.     

  584.     <p>

  585.       Voici quelques articles choisis :

  586.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  587.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  588.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  589.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  590.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  591.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  592.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  593.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  594.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  595.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  596.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  597.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  598.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  599.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  600.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  601.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  602.     </p>

  603.     <p>

  604.       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>.

  605.     </p>

  606.     <p>

  607.       Je ne traque pas ta navigation mais mon

  608.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  609.       conserve des logs d’accès.

  610.     </p>

  611.   </div>

  612. </footer>

  613. <script type="text/javascript">

  614.   ;(_ => {

  615.     const jumper = document.getElementById('jumper')

  616.     jumper.addEventListener('click', e => {

  617.       e.preventDefault()

  618.       const anchor = e.target.getAttribute('href')

  619.       const targetEl = document.getElementById(anchor.substring(1))

  620.       targetEl.scrollIntoView({behavior: 'smooth'})

  621.     })

  622.   })()

  623. </script>