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 !

WebPerf, sécurité et hébergement avec la JAMStack

By sebtiz13

WebPerf, sécurité et hébergement avec la JAMStack

On a pratiquement tous l'habitude d'utiliser un CMS comme Worpress, Drupal ou Joomla pour gérer du contenu qui est finalement plutôt statique. Ces solutions demandent souvent pas mal de ressources aux serveurs et ont une forte dépendance à la base de données, sans parler des failles de sécurité qu'il faut surveiller. Ce qui engendre souvent du stress et des gros coûts d'hébergement. Mais Sébastien Rodriguez (Développeur web à Laëtis) va vous présenter comment économiser et dormir tranquille tout en rendant votre site beaucoup plus rapide grâce aux générateurs de site statique sans trop d'effort. Un atelier de mise en pratique sera proposé après la présentation.

  • 1,536