Blog
Quelles technologies pour mon site internet ?
Quelles technologies pour mon site internet ?
19 juin 2023
•
Guillaume DucuingDans cette article je vous explique les technologies que j'ai utilisé pour coder meetguillaume.dev !
Guillaume DucuingDans cette article je vous explique les technologies que j'ai utilisé pour coder meetguillaume.dev !
Je suis développeur web front-end, c'est donc sans surprise que je travaille avec..... Javascript & Typescript ! C'est un langage souple assez permissif que j'aime beaucoup. J'ai choisi la librairie React pour avoir un contenu super réactif et le tout avec le framework Next.js afin de structurer l'application et de me faire gagner du temps. Mon choix s'est porté également sur ce framework puisque l'intégralité du site est linké avec Prismic, un CMS headless qui utilise Slicemachine, qui favorise l'utilisation de frameworks JS.
Source: Next.jsLorsque j'ai commencé à concevoir mon site web, je voulais une solution qui me permettrait de développer rapidement des applications web dynamiques et performantes. C'est là que Next.js est entré en jeu.
Next.js est un framework JavaScript basé sur React qui offre des fonctionnalités avancées telles que le rendu côté serveur (SSR) et le rendu côté client (CSR). Cela signifie que mon site web peut être rendu du côté du serveur pour améliorer les performances et l'expérience utilisateur, tout en conservant la possibilité d'effectuer des mises à jour en temps réel grâce au rendu côté client. Avec Next.js + Prismic, j'ai pu créer des pages et des composants réutilisables facilement, ce qui a considérablement accéléré le processus de développement.
Source : prismic.ioJ'avais utilisé Wordpress par le passé et c'est une véritable usine à gaz. Coder avec constitue à ajouter du code par dessus du code et l'interface utilisateur n'est pas très intuitive et particulièrement chargé. Prismic, c'est complètement l'inverse puisqu' on part d'une page blanche et on construit les templates pour le client avec le design prévu avec lui. Vous créez des "slices" avec le contenu souhaité et le client n'a plus qu'à ajouter ces slices où il veut sur la page. L'interface est intuitive, très épurée et les mises à jour sont très régulières. C'est un CMS qui nécessite de tout coder en amont, ce qui est en tant que développeur, beaucoup plus appréciable qu'une solution clé en main et surchargée comme WP. Chaque projet rendu au client est unique et performant !
Prismic propose aussi un système de prévisualisation pour permettre de voir le contenu avant de le publier en ligne. Il est également possible de localiser le site très facilement : vous remarquerez dans le header que j'ai mis en place 2 boutons pour intervertir la version FR ou EN au choix. Avec Prismic et l'ajout de routes supplémentaires sur Next.js, c'est un jeu d'enfant d'ajouter des langues supplémentaires. (Il faut quand même traduire chaque page manuellement).
Source : Firebase - GooglePour la gestion des données en temps réel, l'authentification des utilisateurs, j'ai choisi Firebase. C' est une plateforme de développement d'applications web proposée par Google. J'ai utilisé Firebase Realtime Database pour stocker et synchroniser mes données en temps réel. Cela signifie que le site web peut afficher instantanément les mises à jour des données sans nécessiter de rafraîchissement de la page. Pour l'authentification des utilisateurs, Firebase m'a permis de mettre en place facilement un système de connexion avec Google (Je voulais que la connexion soit simple et rapide pour les utilisateurs). En complément et pour sécuriser l'envoi sur la base de donnée, j'ai mis en place reCaptcha.
Firebase est actif sur tous les articles dans la zone commentaire !
Voilà pour les grandes lignes ! J'ai également utilisé GSAP pour quelques animations mineurs sur le site. C'est une librairie d'animation Javascript super performantes et qui permet de faire des choses très cool ! Next.js et Nuxt.js on vraiment changé ma façon de coder et certaines choses qui me semblaient très fastidieuses à réaliser sont devenu super simples avec ces 2 frameworks que je vous recommande vivement !
