davidbgk
/
larlet-fr-david-cache
ウォッチ 1
スター 0
フォーク 0
コード リリース 0 アクティビティ
A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
123 コミット
1 ブランチ
ツリー: 66734fb386
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'66734fb386' から
${ noResults }
larlet-fr-david-cache/cache/c42e26d79ef2a72748850ca7d7f.../index.html

index.html 25KB
Raw Blame 履歴

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604 
  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>The State Of Meteor Part 2: What Happens Next (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="https://www.discovermeteor.com/blog/the-state-of-meteor-part-2-what-happens-next/">

  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.   The State Of Meteor Part 2: What Happens Next (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="https://www.discovermeteor.com/blog/the-state-of-meteor-part-2-what-happens-next/">Source originale du contenu</a></h3>

  463.     <p>In my <a href="https://www.discovermeteor.com/blog/the-state-of-meteor-part-1-what-went-wrong/">last article</a>, I talked about the current state of Meteor and some of the things that have been holding it back. </p>

  464. 

  465. <p>There’s reason to be hopeful, though. Indeed, I believe that while all this effort might’ve fell short of changing the world of web development, it did lay the groundwork for the <em>true</em> Meteor revolution. </p>

  466. 

  467. <div class="note"><p><em>Please note that the views presented here are purely my own, and are not endorsed in any way by either Tom Coleman or the Meteor Development Group. I don’t work for or with MDG, and do not take part in the development of Meteor in any way.</em></p>

  468. </div>

  469. 

  470. <h3>The Rise Of React</h3>

  471. 

  472. <p>In the JavaScript world, the big story of the past few years has been the rise of the React ecosystem. </p>

  473. 

  474. <p>In many ways, React’s trajectory reminds me of jQuery’s. After years of debating the merits of Dojo, Mootools, ExtJS, and countless other libraries, the web development world finally settled on jQuery. It wasn’t necessarily the most powerful, comprehensive, or performant library, but it was focused on doing its job well and everybody was glad to finally agree on a common standard.</p>

  475. 

  476. <p>Similarly, while <a href="http://emberjs.com/">Ember</a> and <a href="https://angularjs.org/">Angular</a> might do more, and <a href="http://vuejs.org/">Vue</a> or <a href="http://mithril.js.org/">Mithril</a> might be more lightweight, React is a well-regarded, good-enough solution that works for almost everybody, and has a serious shot at establishing itself as the new standard in front-end frameworks. </p>

  477. 

  478. <p>This is important because development standards are a winner-takes-all game: once jQuery became the default, it enabled an explosion of plugins and components built on top of it, and every JavaScript widget became a <em>jQuery</em> widget. </p>

  479. 

  480. <p>The exact same thing might very well happen with React. And that’s a very exciting thing for Meteor.</p>

  481. 

  482. <h3>The Reactification of Meteor</h3>

  483. 

  484. <p>Officially, Meteor supports three front-end frameworks: Blaze, React, and Angular. But Blaze (no matter how much we like it) is probably not going to stick around forever. And Angular is… well, it’s not React. </p>

  485. 

  486. <p>This might be a bit controversial, but I think the path that makes the most sense for Meteor is to drop any pretense of neutrality, and whole-heartedly embrace the React ecosystem.</p>

  487. 

  488. <p>This is already happening. A sizable part of the Meteor community (<a href="https://www.discovermeteor.com/category/blaze-to-react/">myself included</a>) is currently migrating towards React. Not because we don’t like Blaze, but because using React means being part of something bigger.</p>

  489. 

  490. <p>And there’s even talk of one day replacing core parts of Meteor like Tracker or Minimongo with their React alternatives. Who knows, maybe <a href="https://learngraphql.com/">GraphQL</a> will be the way we finally get support for other databases baked into Meteor?</p>

  491. 

  492. <h3>The Cure To JavaScript Fatigue</h3>

  493. 

  494. <p>Of course, the question that everybody then asks is: “but wait, if we end up using React, Relay, and GraphQL, what do we even need Meteor for anymore?”.</p>

  495. 

  496. <p>The answer in a nutshell: as the cure to <a href="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.b1eebexts">JavaScript fatigue</a>.</p>

  497. 

  498. <p>Right now, using React requires cobbling together multiple bricks: React itself, its plugins, Webpack, some kind of data management system, to say nothing of a whole back-end stack. But Meteor is in a unique position to solve that challenge for you, and in essence become the best possible platform to build React apps. </p>

  499. 

  500. <p>This all boils down to one key fact: Meteor is the only framework that controls the <em>whole stack</em>. </p>

  501. 

  502. <h3>Server-Aware Components</h3>

  503. 

  504. <p>Whenever I introduce Meteor to someone new, I have to explain that unlike React or Angular, it’s a <em>full-stack</em> framework. </p>

  505. 

  506. <p>As I said in <a href="https://www.discovermeteor.com/blog/the-state-of-meteor-part-1-what-went-wrong/">part 1</a>, this turned out to be somewhat of a double-edged sword, as it also made switching to Meteor much harder compared to simply swapping out your front-end. </p>

  507. 

  508. <p>But this liability turns into a huge asset when using Meteor <em>with</em> React. This is because Meteor is the best platform out there to build <strong>server-aware React components</strong>. </p>

  509. 

  510. <p>The Meteor community has been spoiled with full-stack components like <a href="https://github.com/aldeed/meteor-autoform">Autoform</a>, <a href="https://github.com/meteor-useraccounts/core">UserAccounts</a>, or <a href="https://github.com/aldeed/meteor-tabular">Tabular</a> for years. Just add the package, and you not only get both the server and client components, but also the key <strong>server-client data management layer</strong>. </p>

  511. 

  512. <h3>Meteor To The Rescue</h3>

  513. 

  514. <p>This is in stark contrast with the rest of the JavaScript world, who can’t even <em>dream</em> of such components. A great example of this is Facebook’s own <a href="https://facebook.github.io/fixed-data-table/example-filter.html">FixedDataTable</a> component. </p>

  515. 

  516. <p>Notice how the demo talks about “<strong>Client-side</strong> filter and “<strong>Client-side</strong> sort”? The documentation just assumes you’ll load <em>all</em> your data in memory and filter directly on the client. While server-side filtering and sorting may be possible, they’re treated like edge cases. And the same goes for similar components like <a href="https://github.com/glittershark/reactable">Reactable</a>.</p>

  517. 

  518. <p>Contrast this with Tabular or <a href="https://github.com/aslagle/reactive-table">Reactive Table</a>: in the equivalent Meteor components, it’s a given that some of your data will remain on the server, and that the component will help you manage it. </p>

  519. 

  520. <p>This is possible because Meteor being full-stack means developers don’t have to aim for a moving target. We know what APIs are available both on the client and server, and how to connect the two. </p>

  521. 

  522. <p>The best part: React developers can keep writing back-end-agnostic components. As long as they expose the necessary APIs, we can just write Meteor wrappers to magically transform them into full-stack components!</p>

  523. 

  524. <p>In fact, I’m putting my code where my mouth is, and lately I’ve been working on such a wrapper for <a href="https://github.com/meteor-utilities/Meteor-Griddle">Griddle</a>.</p>

  525. 

  526. <h3>Welcome To The Future</h3>

  527. 

  528. <p>So this is my vision of the future of web development for 2016. React as a common front-end standard, and Meteor starting out as one of many possible back-end choices, but slowly becoming the one that just <em>makes sense</em>. </p>

  529. 

  530. <p>For my vision to come true, a few things will need to happen: </p>

  531. 

  532. <p><strong>First</strong>, the Meteor Development Group will need to provide a clear story about the best way to build Meteor apps. It might seem like supporting more front-end frameworks will attract more developers, but I believe splitting up the community in three will hurt it in the long run. That’s why initiatives like <a href="https://kadirahq.github.io/mantra/">Mantra</a> and the <a href="http://guide.meteor.com">Meteor Guide</a> are so important. Independently of their technical merits, they give the community a common target to organize around.</p>

  533. 

  534. <p><strong>Second</strong>, MDG will need to get Meteor itself up to snuff. Thanks to Webpack, React developers are used to niceties like modules, hot reload, and code splitting, and they won’t adopt Meteor if it means giving that up. The upcoming Meteor 1.3 release is already a big step in the right direction, and I’m impatient to see what the future brings. </p>

  535. 

  536. <p><strong>Third</strong>, we’ll need to fill the package void created by moving away from Blaze. Packages like Autoform and UserAccounts will either need to be migrated to React, or new solutions will need to be created. This will achieve the double goal of both encouraging existing Meteor developers to port their apps to React, and attracting React developers to the Meteor ecosystem. </p>

  537. 

  538. <p>If we can manage all three, I believe Meteor will be in a great spot. And when I write my next “State Of Meteor” post one year from now, it’ll hopefully be much, much shorter!</p>

  539. 

  540. <p><em>You may be wondering what all this means for Discover Meteor, and to be fair we’ve been wondering the same thing! We hope to have an answer for you very soon, so stay tuned.</em></p>

  541.   </article>

  542. </section>

  543. 

  544. 

  545. <nav id="jumpto">

  546.   <p>

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

  548.     <a href="https://www.discovermeteor.com/blog/the-state-of-meteor-part-2-what-happens-next/">Source originale</a> |

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

  550.   </p>

  551. </nav>

  552. 

  553. <footer>

  554.   <div>

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

  556.     <p>

  557.       Bonjour/Hi!

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

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

  560.     </p>

  561.     <p>

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

  563.     </p>

  564.     

  565.     <p>

  566.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  583.     </p>

  584.     <p>

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

  586.     </p>

  587.     <p>

  588.       Je ne traque pas ta navigation mais mon

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

  590.       conserve des logs d’accès.

  591.     </p>

  592.   </div>

  593. </footer>

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

  595.   ;(_ => {

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

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

  598.       e.preventDefault()

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

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

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

  602.     })

  603.   })()

  604. </script>