Réécriture du frontend (ancien)

[florimondmanca]

• Closes Simplification de l'architecture #405

Que se passe-t-il ici ?

• Le front SvelteKit est remplacé par un front servi par le serveur NestJS via des templates Nunjucks
• TL;DR:
  • Côté Nest, les Action deviennent des Controller avec des @Render()
  • Les templates sont faits avec Nunjucks (proche de Jinja2)
    • Inspiration prise de feature(common) add @WithAlias route decorator nestjs/nest#5117 pour l'implémentation de {{ path('name', params) }} (NestJS ne fournit pas de tel utilitaire, contrairement à Symfony)
  • Le CSS est "fait main" avec juste ce qu'il nous faut, en s'inspirant des design patterns de Every Layout (pas de Tailwind)
  • Les interactions JS sont implémentées avec des WebComponents (affichage calendrier, menu mobile, dropdown, theme toggler, etc) (93% de support navigateur)
  • Le bundling est fait avec esbuild, un bundler simplissime et très rapide
  • Fluent est utilisé pour les traductions : c'est un système indépendant de tout framework (contrairement à svelte-i18n), comme XLIFF ou gettext, mais plus agréable à utiliser
  • FullCalendar est remplacé par EventCalendar (rendu similaire, 3 à 4x moins lourd)

Autres notes

• Retire File/ (plus utilisé depuis le retrait des devis, factures, etc)
• Le front de "Epargne salariale" n'a pas été réimplementé, car il semble que cette partie n'était pas utilisée (on pourra ensuite supprimer les actions associées)

Taille du build

> make assets

  dist/public/faircalendar.js   87.0kb
  dist/public/main.css          11.3kb
  dist/public/faircalendar.css   7.0kb
  dist/public/main.js            2.9kb

⚡ Done in 54ms

Sans le composant EventCalendar, le build JS pèse seulement 3 ko (!). J'ai splitté le JS de sorte à ne charger EventCalendar que sur la page FairCalendar. On ne charge alors que 43 ko de données sur la majorité des pages. ❤️ 🍀

TODO

• Affichage des erreurs formulaires
• Synthèse FairCalendar
• Filtres FairCalendar
• Ajout d'un CRA : afficher les bons champs en fonction du type de CRA sélectionné
• Faire un ADR
• Déployer sur Jelastic en se branchant à la DB hostée chez Scaleway, pour "prévisualiser" le nouveau site avec nos vraies données. (Ansible c'est bien, déployer sur un PaaS et ne pas avoir à gérer de serveur, c'est mieux.)

[florimondmanca]

Je dois renommer la branche de feat/hotwire à feat-hotwire, car Jelastic n'aime pas les / dans les noms de branche (curieux)