davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Server-First Apps are a Good 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="http://ponyfoo.com/articles/server-first-apps">

<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>
  Server-First Apps are a Good Idea (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://ponyfoo.com/articles/server-first-apps">Source originale du contenu</a></h3>
    <p>Earlier today, <a href="http://tomdale.net/2015/02/youre-missing-the-point-of-server-side-rendered-javascript-apps/" aria-label="You&#x2019;re Missing the Point of Server-Side Rendered JavaScript Apps">Tom Dale published an article</a> sharing his views on the whole &quot;server-side vs client-side rendered apps&quot; debacle. I was tempted to call this article <strong>No. You&#x2019;re Missing the Point of Server-Side Rendered JavaScript Apps!</strong>, but that would&apos;ve been way too long, <em>and kind of childish</em>. I agree with the first sentence in his article, where he states that there&apos;s a lot of confusion about <em>&quot;the push to rendering JavaScript apps on the server-side&quot;</em>. There were many other parts of the article I agreed with, and a few I didn&apos;t agree so much with. There&apos;s also some points which weren&apos;t discussed but I&apos;d like to raise myself.</p>

<p>In the article, Tom goes on to explain how applications rendered on the server-side are clumsy when it comes to responsiveness. This is a fair point, server-side rendered applications typically rely on the <a href="http://stackoverflow.com/questions/tagged/post-redirect-get" aria-label="Questions tagged POST-Redirect-Get on StackOverflow">PRG <em>(POST-Redirect-GET)</em> pattern</a>. They have HTML <code class="hljs">&lt;form&gt;</code>s, users <code class="hljs">POST</code> some data, the server processes the request, responds with a redirect to another page, and the client <code class="hljs">GET</code>s that other page. These are pretty much the basics of the web. What&apos;s worse, as Tom notes, is that as you start adding AJAX calls to this server-side rendered content, you are now a slave to both state <em>(what you initially pulled from the server)</em> and behavior <em>(users clicking on things)</em> when it comes to updating the UI. <strong>That is the ultimate nightmare of a web developer.</strong></p>

<p>Client-side rendered apps, in contrast, can be <em>way faster than that</em>. Once the initial payload is downloaded, interpreted, and executed, client-side JavaScript can set up its own <strong>smart caching on the client-side</strong>, avoiding roundtrips to the server for data it already has, and it can also set up routing on the client-side to emulate incredibly-fast roundtrips. It can even have the server spewing information downstream as soon as it has any fresh data to offer, <a href="http://socket.io/" aria-label="Socket.IO is one way to use WebSockets">using WebSockets</a>. The issue of updating the UI as a slave to many masters is long gone, since you just update the UI as the client-side JavaScript engine demands of you.</p>

<p><em>And so the story goes...</em></p>

<p>The answer to a productive and maintainable web development orientation, <em>that also favors customers</em>, doesn&apos;t lie in one or the other, but rather in <em>the combination of both approaches</em>. In this article, I&apos;ll explore what all of this means.</p>

<p></section><section class="md-markdown at-body"><h1>Angular, Ember, and React</h1><p>I&apos;ve <a href="/articles/stop-breaking-the-web" aria-label="Stop Breaking the Web">already summed up my thoughts on Angular</a>. The more I think of it, the more convinced I am that Angular is <em>the <strong>Bootstrap</strong> of JavaScript</em>. It&apos;s a great way of prototyping an application or building a backend service, but there&apos;s <em>plenty of reasons</em> why you shouldn&apos;t be building a customer-facing application with it.</p><blockquote><p>I hope 2015 is the year where we take out <em>&quot;dedicated client-side rendering&quot;</em> like Angular&apos;s from our <strong>metaphorical best practices grab-bags</strong>. React and Ember are doing a good job of bringing people to their senses when it comes to one-sided rendering.</p></blockquote><p>I&apos;m not sure how the initiative to move Ember to shared-rendering, <strong>FastBoot</strong> will work, but if it hijacks <code class="hljs">&lt;form&gt;</code> submissions and generally does the right thing with those <em>(both before and after JavaScript gets executed on the client)</em>, then I&apos;ll be quite sold on the idea. I&apos;m glad to see that Tom Dale seems to have come around from clamouring that <a href="http://tomdale.net/2013/09/progressive-enhancement-is-dead/" aria-label="Progressive Enhancement is Dead">&quot;Progressive Enhancement is Dead&quot;</a>, but I still think developing client-first applications and then rebuilding what should have been the original HTML is <strong>just backwards</strong>.</p><p>React is more of a &quot;shared-rendering&quot; native citizen, which makes it friendlier when it comes to progressive enhancement. It&apos;s shared-rendering capabilities used to be mostly an option for Node.js developers, but <a href="https://www.youtube.com/watch?v=KVZ-P-ZI6W4" aria-label="&apos;Introducing React Native&apos; talk at ReactConf">Facebook recently revealed <code class="hljs">react-native</code></a> as a way to write native Android and iOS applications on React, making it even more appealing as it now enables cross-platform development, a lot like how <a href="http://arstechnica.com/information-technology/2014/11/how-google-inbox-shares-70-of-its-code-across-android-ios-and-the-web/" aria-label="How Google Inbox shares 70% of its code across Android, iOS, and the Web">Google shares code</a> across platforms using <a href="https://github.com/google/j2objc" aria-label="google/j2objc on GitHub">j2objc</a>.</p><h1>Progressive Enhancement</h1><p><strong>The web is not native</strong>, though. React and Ember don&apos;t hinder our ability to develop a progressively enhanced application, but they don&apos;t exactly encourage it either. I&apos;d call them &#x2014; along with Angular &#x2014; <strong>client-first frameworks</strong>. Client-first doesn&apos;t encourage progressive enhancement. Quite the contrary, client-first actively discourages progressive. That&apos;s a real problem.</p><p>These frameworks are nice and definitely boost our productivity, but we should never stop thinking about building applications in such a way that they&apos;ll actually work well <em>(not just <strong>render</strong> well)</em> for people <a href="http://ponyfoo.com/articles/critical-path-performance-optimization" aria-label="Critical Path Performance Optimization at Pony Foo">on slow or intermittent networks</a>.</p><p>I think these last few months we did a good job of thinking critically about whether the Angular way is the right way. I&apos;m convinced that the web would be a far better place if we developed most applications in a <strong>content-first</strong> manner.</p><p>Principles of a progressively enhanced user experience should be commonplace by now. You build an application on pure HTML and CSS, in such a way that it&apos;s able to deliver most of your core experience<em> right off the bat. This is important because sometimes JavaScript may take a few seconds to download. That&apos;s why I made the point about using <code class="hljs">&lt;form&gt;</code> elements to allow users to interact with the site, it enables more parts of the core experience.</p><blockquote><p>It&apos;s insane, what we are doing. <strong>We are deferring JavaScript and loading it asynchronously and then depending on it to deliver our core experience?</strong></p></blockquote><p><em></em> Unless you&apos;re a <strong>realtime video-conferencing service</strong> (or anything canvas-based), but even then you could take a progressive approach, where you inline the absolutely necessary JavaScript to enable the video-calling functionality, and defer the rest. Much like you&apos;d do <a href="http://ponyfoo.com/articles/critical-path-performance-optimization" aria-label="Critical Path Performance Optimization at Pony Foo">when deferring non-critical CSS</a>.</em></p><p>Suppose you have a TODO list. Checking items off would just be a matter of clicking on them in a client-first application, then the changes would be persisted in the background. In contrast, a server-first approach probably would&apos;ve had a <code class="hljs">&lt;form&gt;</code> with the TODO list and some sort of <kbd>Submit</kbd> button. Right? But what if each TODO item was a <code class="hljs">&lt;form&gt;</code>? What if each of them was a <code class="hljs">&lt;button&gt;</code> within its own <code class="hljs">&lt;form&gt;</code>? Then you could have almost the same functionality as people have come to expect from client-first applications, but in an entirely progressive way!</p><p>The HTML would look like this, except with proper form <code class="hljs">action</code>s, <code class="hljs">href</code>s, and CSS classes for styling.</p><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">form</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">button</span>&gt;</span>This is an option<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">form</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">form</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">button</span>&gt;</span>This is another option<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">form</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">form</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">button</span>&gt;</span>This is yet another option<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">form</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
</code></pre><p>It could look like the screenshot shown below, which comes from <a href="http://blog.stompflow.com/articles/iterative-prototyping-for-the-web" aria-label="Iterative Prototyping for the Web">a product I&apos;m building</a>, and doesn&apos;t involve any client-side JavaScript just yet.</p><p><a href="http://blog.stompflow.com/articles/iterative-prototyping-for-the-web" aria-label="Iterative Prototyping for the Web"><img alt="stompflow.png" class="js-only" src="http://i.imgur.com/NqHl1zm.png" /><noscript><img src="http://i.imgur.com/NqHl1zm.png" alt="stompflow.png"></noscript></a></p><p>Not any client-side JavaScript yet? <strong><em>That</em> can&apos;t be good!</strong> You must be thinking. Turns out <em>developing applications like its the year 2002</em> is super productive &#x2014; you don&apos;t have to spend any time carefully picking a delightful animated loader gif, or debating with your staff about <strong>what&apos;s the best way to do data-binding</strong>.</p><p>That&apos;s the main argument against not using your fancy frameworks, right? But they&apos;re <em>so productive!</em> Well, using HTML and <strong>PRG</strong> is fast, too! You just forgot they even existed.</p><p>Sure, the <strong>PRG</strong> pattern is &quot;slow&quot;, and client-first is perceptively faster &#x2014; <em>but guess what?</em> Upgrading an <strong>HTML-PRG</strong> experience into an AJAX experience is a matter of writing a few lines of code, if it&apos;s done right. From there, turning the experience into a real-time experience is the only challenge left. And, honestly? That&apos;s just a matter of listening for the appropriate events and responding to them!</p><h1>A Server-First Web</h1><p><a href="http://taunus.bevacqua.io/" aria-label="Taunus: Micro Isomorphic MVC Engine for Node.js">Taunus</a> is a server-first shared-rendering MVC engine that prioritizes content and encourages progressive enhancement. It&apos;s what <a href="https://github.com/ponyfoo/ponyfoo" aria-label="ponyfoo.com source code on GitHub">this blog</a> runs on top of, it&apos;s what the <a href="https://github.com/taunus/taunus.bevacqua.io" aria-label="taunus.bevacqua.io source code on GitHub">documentation mini-site</a> runs on top of, and it&apos;s what I&apos;m using in Stompflow &#x2014; pictured in the screenshot above, <a href="http://www.stompflow.com" aria-label="Stompflow: Hassle-free Project Management">but yet to be released</a>.</p><p>Being server-first has its perks as well, just like client-first does. For instance, I <a href="https://github.com/ponyfoo/ponyfoo/blob/master/views/server/emails/article-published.jade" aria-label="This template will be running hot when the article gets published!">maintain email templates</a> using the <strong>same templating engine</strong> that I use on web views. Being server-first also means that I don&apos;t have to worry about <strong>state vs behavior</strong> as much, because I have the same views on both sides and I can re-render them at any time in the client-side.</p><p>Being server-first means above all that the application will work well no matter what. It&apos;ll work well if client-side JavaScript takes a few seconds to execute, because it was designed to do so. It&apos;ll continue to do well after client-side JavaScript lands. You can take advantage of the conventionality of HTML forms and hijack form submissions just as conventionally, making the form submission via AJAX and then handling the response by redirecting or rendering some data.</p><blockquote><p>You no longer fight against the disgrace IE8 unleashed onto you, but <em>embrace it</em>. You now <strong>fight against the idea that you should cram every single new feature onto users on old browsers</strong>.</p></blockquote><p>Server-first is <em>non-commitment</em> to client-side technologies. With <a href="https://github.com/taunus/taunus" aria-label="taunus on GitHub">Taunus</a> you don&apos;t <em>have</em> to pick a client-side data-binding library, but you can choose to do so. We already agree that it&apos;s easier to deal with vanilla components than jQuery plugins, or Angular directives, or React components, or even Web Components.</p><p>So, why not use a framework that empowers you to work this way? Using modular components that aren&apos;t tied to the framework itself, which is more of a glorified &quot;stay-out-of-the-way router&quot; that dictates you how to do shared rendering by convention.</p><p>Fine, <a href="https://github.com/taunus/taunus" aria-label="taunus on GitHub">Taunus</a> is tied to a server-side technology: Node.js <em>(or io.js!)</em></p><p>That&apos;s not an issue for React, or Ember. Not even for Angular.js.</p><p>But you know what? <em>That&apos;s a good thing.</em></p><p>Because you are forced to <strong>commit to a server-side technology <em>first</em></strong>.</p></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://ponyfoo.com/articles/server-first-apps">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>