Les coulisses du développement d'un site Web

Chez 53JS nous nous sommes engagés à rendre notre travail compréhensible par tous et nous nous sommes dit qu’il serait intéressant de vous donner des détails sur la manière dont notre site Web a été conçu.

...
Maëla Pietri
Partager:
  • ...
  • ...

Chez 53JS nous nous sommes engagés à rendre notre travail compréhensible par tous et nous nous sommes dit qu’il serait intéressant de vous donner des détails sur la manière dont notre site Web a été conçu. N’étant pas moi-même un développeur avéré, j’ai cherché à comprendre au mieux la manière dont mes collègues s’y sont pris afin de pouvoir vous l’expliquer avec des termes compréhensibles par un non-initié. Dans cet article, je vais donc répondre à cette question : comment avons-nous développé le site Web de 53JS ?

Les technologies utilisées

text

Le développement de notre site s’est fait principalement à l’aide de ces technologies :

Git

Le gestionnaire de partage de Code source Git est un programme utilisé par les développeurs pour collaborer sur le même Code Source tout en conservant un historique complet des modifications.

React

React est une librairie, c’est à dire un ensemble de lignes de code écrites par un groupe de développeurs qui sont réutilisables sur différents projets. Chaque librairie a sa particularité, React par exemple, est spécialisée dans la programmation d’interfaces Web.

Gatsby

Gatsby est un framework, c’est à dire un ensemble d’outils (librairies, programmes) qui structure le code-source d’un programme. Gatsby permet de générer des pages Web très rapidement en utilisant la librairie React, ce qui possède plusieurs avantages : Code simple : React simplifie le développement d’interfaces Mise en ligne simple : les pages peuvent être envoyées sur de simples serveurs de fichiers (comme Amazon S3) Rapide : les pages se chargent vite et la navigation est fluide grâce au pré-chargement des liens. Sécurisé : la base de donnée n’est pas directement reliée au site public il est donc plus difficile d’y accéder lors d’une éventuelle attaque.

Strapi

Strapi est un CMS : Content Management System ou Système de Gestion de contenu en français. C’est un outil d’édition visuel du contenu d’un site Web. Strapi est connecté à une base de données sur laquelle sont enregistrées les informations qui apparaissent ensuite sur le site Web, par exemple le texte des articles de blog. Il a l’avantage d’être Open Source. Ce qui signifie que son utilisation est gratuite, qu’il est possible de l'héberger sur notre propre serveur et qu’il est entièrement personnalisable.

CircleCI

CircleCI est un serveur d’intégration continue : il détecte les modifications dans le code source et lance les programmes de re-génération des pages Web lorsqu’une mise à jour est détectée.

Figma

Figma est un outil de design d’interfaces collaboratif destiné principalement au maquettage et au prototypage d’applications mobiles et sites Web.

Comment ça marche ?

Le designer utilise Figma pour créer des visuels du futur site internet qu’il transmet ensuite au développeur en charge du projet.

L’administrateur modifie le contenu du site Web via Strapi qui va lui-même transmettre ces données à la base de données. Le développeur quant à lui peut modifier le Code Source du site Web via Git.
CircleCI est prévenu des modifications apportées par le développeur ou l’administrateur.

CircleCI exécute alors les tests écrits par le développeur. Si une erreur est detectée, l’opération s’interrompt et le développeur est notifié d’une anomalie. Si les tests sont valides, CircleCI exécute alors un programme qui est chargé de mettre à jour le site.

Le programme fourni par le Framework Gatsby re-génère les pages à partir du nouveau Code Source et de la dernière version du contenu enregistré dans la base de données.

Puis, toujours depuis CircleCI, les nouvelles pages sont automatiquement déployées en ligne. Le site est mis à jour en quelques minutes sans intervention humaine !

text

Finalement, nous avons un site Web serverless hébergé par la technologie AWS S3, facile à modifier, rapide d’utilisation, sécurisé et dont le coût est maîtrisé grâce à des technologies Web évolutives et innovantes.

Vous souhaitez faire développer votre site Web de la même manière ? Faites appel à 53JS !

Sources : François Michaudon Hugo Mallet

...
Maëla Pietri
Partager:
  • ...
  • ...

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies