Création de sites web et services internet

Internet et nouvelles technologies

Bienvenue au grand Gatsby !

Jeroen Tiggelman, développement front-end

La vitesse d'un site web est quelque chose que Google donne de plus en plus d'importance. Les dernières années, il y a eu une grande évolution dans le developpement du concept « site statique ». Une des plateformes que j'ai recherchée est Gatsby, un moteur pour des sites statiques, mais pas seulement...

Avec l'utilisation des CMS comme Wordpress on a pris l'habitude d'attendre jusque la page web charge quand l'internaute demande la voir. L'URL est saisi, le navigateur fait une requête au serveur, qui va chercher le contenu dans la base de données et construit la page concernante. Quand ce processus est fini, le serveur envoie la page en HTML, CSS et Javascript et le navigateur affiche la page.

Pour faire tout ça, il faut du temps. Qui ne se souvient pas l'époque où on faisait des pages statiques, qui ne devraient pas être construits par un serveur, mais étaient envoiés tout de suite à partir de leur site de stockage. C'était vite, non ? Maintenant, certainement parce que un site web est de plus en plus affiché sur des navigateurs mobiles, on redemande cette vitesse.

Entretemps, on a aussi pris l'habitude de pouvoir ajouter, adapter ou effacer le contenu d'un site web facilement. Une entreprise n'a pas forcement envie de devoir creuser dans le code d'un site afin d'adapter la date d'un événement, du contenu temporaire ou bien des mésures prises dans le contexte d'une pandémie.  

Exemple d'affichage dynamique d'un flux Instagram.

www.photographicdesign.be

Sérait-il une bonne idée de combiner la vitesse d'affichage avec la flexibilité d'adaptation par un client ? Ici les frameworks pour construire des sites statiques viennent dans l'image. En ayant expérimenté déjà en 2014-2015 avec des plateformes comme Jeckyll et Hugo, je n'étais pas trop accroché parce que oui, la vitesse liée aux pages web statiques était là, mais le leurs concepts étaient trop technique pour qu'une personne lambda pourrait adapter ou ajouter du contenu.

« Avec Gatsby, on a le meilleur des deux mondes. Cette plateforme combine la vitesse des pages web statiques et la flexibilité des sources de données. »

Gatsby est une plateforme pour le développement des sites web statiques. Plus d'info sur www.gatsbyjs.org

Gatsby est rapide dans tous les sens. C'est un framework « open source » basé sur React qui aide les développeurs à construire des sites web et des apps avec une vitesse incroyable.

Comment ça marche ?

Imaginez-vous que vous pouvez utiliser presque n'importe quelle source de données pour alimenter votre site :

• des CMS comme Contentful, Drupal, Wordpress, etc.
• des fichiers Markdown
• des données (des API, bases de données, YAML, JSON, CSV, etc.)

Schéma de fonctionnalité de Gatsby

La construction des pages se fait au moment du développement !

Le développeur connecte le site aux sources de données différents (on peut même faire appèl à plusieurs sources en même temps) et fait la mise en page du site. Au moment du « build » du site, Gatsby s'occupe — d'office — de plein de techniques : construction des pages statiques, optimalisation des images en utilisant la taille idéale pour chaque utilisation d'image (en plus, les images s'affichent avec une technique « lazy loading » qui permèt de pas devoir télécharger toutes les ressources d'une page en une fois, mais seulement à partir du moment qu'elles sont affichées). S'il y a des liens sur la page, Gatsby va même déjà chercher le contenu des pages où les liens pointent (pre-fetching) et les stocke dans la mémoire du navigateur. Comme ça, quand l'internaute clique sur ce lien, la page concernante s'affiche quasi tout de suite !

Énormément de possibilités !

Gatsby offre plein de possibilités d'application. Il y a pas mal de plug-ins qui offrent encore plus de flexibilité et puissance. On trouve par exemple un plug-in SEO qui permet d'optimaliser le site pour les résultats de récherche.

En injectant des modules pour des formulaires de contact ou bien pour l'achat en ligne en utilisant des plateformes de paiement comme Stripe, le développeur dispose de plein d'outils (en plus, chaque outil est l'un des meilleurs de sa catégorie) pour faire un site web assez puissant.

Vous voulez mettre à jour ou rajouter du contenu vous-même (vous avez un blog ou vous vendez des articles en ligne) ? La manière la plus simple est d'ajouter des fichers Markdown dans un dossier pre-défini et de déclencher une mise à jour automatique du site web via Github.

Plus habitué à l'utilisation d'un CMS ? Gatsby peut-être lié dynamiquement à des CMS comme Contentful, Strapi, Sanity ou même un « headless » Wordpress. Chaque adaptation du contenu résultera une mise à jour du site automatique en adaptant uniquement les fichiers qui sont changés.

Plusieurs de manières de publier et réduction des frais d'hébergement

Un avantage énorme de Gatsby est que les pages statiques n'ont pas besoin d'un serveur coûteux qui construit les pages du site web, ni de base de données en ligne, si on choisit pour cette solution. Les frais d'hébergement seront alors fort diminués, voir éliminés : on peut publier le site sur des CDN comme Netlify, Github Pages, etc., qui donnent un volume gratuit déjà très sympatique pour le stockage et construction automatique des mises à jour du contenu du site. On a juste besoin d'un nom de domaine et c'est parti !

Gatsby pour un site web puissant et moderne

Après avoir fait mes récherches et mes expériments avec Gatsby, je peux que concluire que en étant « open source », Gatsby offre une plateforme moderne et puissante avec des possibilités quasi illimités. La programmation d'un site avec Gatsby n'est pas vraiment pour des débutants. On part du principe qu'il y a quand même une petite connaissance de React. Il y a quand même déjà une fonctionnalité de base très étendu, des templates sont disponibles et la documentation est claire et assez élaborée (pour le moment seulement en anglais).

Devenir indépendant d'un serveur web, un site fait avec Gatsby n'utilise pas seulement les dernières techniques web, mais peut également réduire vos frais d'hébergement.

En concluant : Gatsby ou des plateformes pareilles, sont le futur !