WebPerf, sécurité et

hébergement avec la JAMStack

Par Sébastien Rodriguez

@sebtiz13

Who I am

 
  • Développeur chez Laëtis
  • Développeur front/backend PHP et JS
  • Éternel perfectionniste et optimiseur

Petit état des lieux

Serveur

  • Apache / Nginx
  • Mysql
  • PHP

Outils

Pléthore de CMS
(Wordpress, Drupal, Joomla)

La stack classique

Workflow de création

Comment les CMS gère une visite ?

Une visite classique

Visite avec du cache

Si on simplifiait tout ça ?

Serveur

Apache / Nginx ou Serverless

Outils

  • Gestion du contenu
    CMS classique ou CMS headless
  • Générateur de site
    (Gatsby, Nuxt, Jekyl, Hugo)

La JAMStack

Workflow de création

Comment est géré une visite statique ?

Visite avec la JAMStack

Comment on fait pour le contenu dynamique ?

les sites Web devraient survivre à leurs CMS

<?php $MyCMS->get_post(12); ?>

<h1>
  <?php echo post_title(); ?>
</h1>

<?php echo post_contents(); ?>

Comparaisons

[
  {
    id: 12,
    title: "Exemple title",
    authorName: "Sebtiz13",
    dateCreated: "2019-02-13 20:30:00",
    postContent: "<p>Exemple content</p>"
  }
]

Les avantages

  • Hébergement CDN rapide
  • Scalabilité plus simple et moins coûteuse
  • Gestion du versionnement simplifié
  • Pas de problème de réplication
  • Moins de faille de sécurité exposé
  • Moins dépendance à des technologies propriétaires

Bonnes pratiques

  • Hébergement sur un CDN
  • TOUT est versionné avec git
  • Outils de construction modernes
  • Builds automatiques
  • Déployement atomiques
  • Invalidation du cache instantannée

Les compagnons

Mise en pratique

Javascript

Vue.js

Api

Markup

Template

<template>
  <section>
    <h1>Les derniers articles</h1>
    <l-article
      v-for="post in posts"
      :key="post.id"
      :post="post"
    />
  </section>
</template>
<script>
export default {
  async asyncData () {
    // Récupère les articles
    const posts = await this.$axios.get('/posts').then(({ data }) => data.map(post => {
      // Fait quelque chose
      return post
    }))
    // Retourne les posts
    return { posts }
  }
}
</script>

Résultat

<div data-server-rendered="true" id="__nuxt">
  <!---->
  <div id="__layout">
    <section>
      <h1>Les derniers articles</h1>
      <article>
        <img src="http://cdn.sebtiz13.fr/example.jpg" alt="example">
        <main>content</main>
        <a href="/articles/example">Lire la suite</a>
      </article>
    </section>
  </div>
</div>
<script>
  window.__NUXT__ = (function (a, b, c) {
    return {
      layout: "default",
      data: [{ posts: [{ ... }] }],
      error: null,
      serverRendered: true
    }
  }("...", "...", "..."));
</script>

C'est prêt quand ?

  • Début de la tendance : 2015
  • Monté en popularité 2017 (Smashing Magazine)
  • 2018 les outils et services arrivent à maturité

Tendance de recherche :

Lien utiles

Merci !