adonisjs side project tailwindcss hotwired-turbo

/Side-project 2021 : starter kit adonisjs 5

7 février 2024

Dans le monde en constante évolution du développement web, il est essentiel de rester à jour avec les dernières technologies et les meilleures pratiques. En 2021, je me suis lancé dans un projet qui m'a permis d’enrichir mes compétences dans l'univers de TailwindCSS, Hotwired/Turbo et AdonisJS v5.

Compétences techniques

TailwindCSS

TailwindCSS est un framework CSS moderne et très flexible qui m'a permis d'adopter une approche plus modulaire et réutilisable dans la conception de l'interface utilisateur de l'application. Grâce à sa philosophie utility-first, j'ai pu rapidement styliser les composants et créer une esthétique cohérente tout en conservant un code léger et propre.

Hotwired/Turbo

Hotwired/Turbo, quant à lui, est une bibliothèque JavaScript qui facilite le développement d'applications web interactives en permettant des transitions fluides entre les pages sans rechargement complet. L'intégration de Turbo dans notre application a considérablement amélioré l'expérience utilisateur en réduisant les temps de chargement et en offrant une navigation plus fluide.

AdonisJS 5

AdonisJS 5 est un framework Node.js robuste et bien structuré qui facilite le développement d'applications web à grande échelle. Grâce à ses fonctionnalités avancées telles que l'authentification, la validation des données, la gestion des sessions et bien plus encore, j'ai pu construire des fonctionnalités complexes de manière efficace tout en maintenant un code organisé et maintenable.

Fonctionnement de l'application

Structure de base

Mon projet consistait à créer un code de base avec AdonisJS v5, comprenant une variété de fonctionnalités essentielles pour une application web moderne. Parmi les éléments inclus :

  • Une page de connexion sécurisée avec des fonctionnalités d'authentification robustes.
  • Les opérations CRUD (Create, Read, Update, Delete) pour la gestion des utilisateurs.
  • La gestion des e-mails pour les notifications et les processus de récupération de mot de passe.
  • La prise en charge de l'internationalisation (i18n) pour rendre l'application accessible à un public mondial.
  • Des composants de formulaire réutilisables pour simplifier la saisie des données par les utilisateurs.
  • La fonctionnalité d'impersonalisation, permettant aux administrateurs de se connecter en tant qu'utilisateur pour résoudre des problèmes ou fournir un support personnalisé.

Utilisation des composants Edge

Une partie essentielle de ce projet a été l'exploitation des composants Edge, le moteur de rendu de AdonisJS, qui offre une syntaxe simple et expressive pour la construction d'interfaces utilisateur dynamiques. Grâce à la puissance de Edge, j’ai pu créer des vues élégantes et interactives tout en maintenant une structure de code claire et organisée.

Conclusion

Ce projet a été une expérience enrichissante qui m'a permis de développer mes compétences sur une gamme de technologies modernes et de relever des défis passionnants dans le domaine du développement web. En travaillant avec TailwindCSS, Hotwired/Turbo et AdonisJS 5, j'ai pu découvrir de nouvelles façons de construire des applications web performantes et conviviales. Ce projet représente une base de travail et me permettra de gagner du temps par la suite. Etant open-source, j’espère qu’il pourra également être utile à d’autre.

Github : https://github.com/batosai/adonis-starter



Après une refonte majeure en 2023, j’ai décidé de retarder ça sortie en raison de l'arrivée d’Adonis 6. Cette mise à jour permettra de bénéficier des dernières fonctionnalités et améliorations apportées par le framework. Parmi les autres changements, j’ai également intégré DaisyUI, ainsi que Unpoly et AlpineJS pour améliorer encore davantage l'expérience utilisateur et simplifier le développement front-end.

Partage

©2024 Jeremy Chaufourier.