🇫🇷 Base d'une application RiotJS avec Vite

#riotjs #french #frontend #javascript

Introduction

RiotJS est connu dans l'ecosystème Javascript, mais le projet manque de visibilité par rapport à des projets mastodontes comme Vue, React et Angular.

Cependant, Riot est mon premier choix lorsque je crée un front-end, voici pourquoi :

Courbe d'apprentissage minimale, API réduite, proche des normes HTML/JS, pas de tours de magie, accessible à tous
Performant et prévisible
"Tout ce que vous souhaitiez que l'API native des composants web ressemble à cela" a été mentionné sur leur site web, et j'approuve !
Build final minuscule lorsqu'il est gzippé (par rapport aux autres front-ends)
Bonne documentation et communauté: vous pouvez discuter avec les mainteneurs sur Discord, et ils sont réactifs sur Github.

Les outils de développement sont assez larges, et l'un de mes préférés est Vite. Cependant, il n'y a pas de documentation ou tutoriel pour faire fonctionner Riot avec Vite ! Corrigeons cela ensemble :D

Ce tutoriel passera en revue toutes les étapes pour créer un compteur, voici le résultat final:

Le code final est disponible sur GitHub : https://github.com/steevepay/riotjs-vite-setup

Exécuter Riot avec Vite

Créez un nouveau dossier:

mkdir riot-vite-setup && cd riot-vite-setup

Initialisez le projet Node:

npm init

Maintenant, vous devez installer les paquets NPM suivants:

npm install --save-dev riot vite rollup-plugin-riot

Rollup-plugin-riot est un plugin qui compile les fichiers Riot via Rollup. ViteJS utilise Rollup en tant que bundleur par défaut pour les modules JavaScript. Sans ce plugin, Riot ne peut pas être compilé et utilisé par Vite.

Enfin, créez un fichier de configuration Vite, named vite.conf.mjs:

import { defineConfig } from 'vite'
import riot from 'rollup-plugin-riot'

export default defineConfig({
  root       : process.cwd() + '/client',
  plugins    : [riot()],
  build: { 
    minify       : 'esbuild', /** https://vitejs.dev/config/build-options.html#build-minify */
    target       : 'esnext' /** https://vitejs.dev/config/build-options.html#build-target */
  }
})

Détails des options :

root: définit le répertoire racine du projet (où se trouve index.html). Dans notre cas, il se trouve dans le dossier client.
target: Cible de compatibilité navigateur pour le bundle final.
minify: Minifie le bundle final. Esbuild est 20 à 40 fois plus rapide que Terser avec une compression seulement 1 à 2% moins efficace.
En savoir plus sur la configuration de Vite : https://vitejs.dev/config/"

Projet de base

Tout le code front-end sera situé dans le répertoire client. Créons trois fichiers :

client/index.html : point d'entrée de votre front-end, il montera l'application Riot
client/index.riot : application Riot
client/c-button.riot : composant de bouton personnalisé utilisé par l'application.

À ce stade, le dossier racine devrait ressembler à:

package.json
package-lock.json
vite.config.mjs
client/index.html
client/index.riot
client/c-button.riot

Le fichier client/index.html est assez basique. Il importe et monte l'application Riot :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>RiotJS + ViteJS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module">
      /** Load riot.js **/
      import * as riot from 'riot'
      import App from './index.riot'

      const mountApp = riot.component(App)
      mountApp(document.getElementById('root'))
    </script>
  </body>
</html>

Le fichier client/index.riot importe le bouton personnalisé c-button et définit trois instances :

une pour incrémenter le compteur
une pour décrémenter le compteur
une pour afficher le compteur

<app>
    <div>
        <h1> Riotjs + ViteJS </h1>
        <c-button> { state.total } </c-button>
        <c-button primary="true" onclick={ () => update({ total: state.total + 1 }) }> Add </c-button>
        <c-button danger="true" onclick={ () => update({ total: state.total - 1 }) }> Delete </c-button>
    </div>
    <script>
        /** Load the custom button **/
        import cButton from './c-button.riot';

        export default {
            /** Define the custom button **/
            components : {
                cButton
            },
            /** State of the counter **/
            state : {
                total: 0
            }
        }
    </script>
</app>

Le fichier client/c-button.riot contient un slot pour changer le texte et des props pour changer le style du bouton (par défaut/gris, primaire/violet, ou danger/orange) :

<c-button >
    <button class="btn{ props.primary ? ' btn-primary' : '' }{ props.danger ? ' btn-danger' : '' }">
        <slot></slot>
    </button>
</c-button>

Maintenant, nous avons tout ce qu'il faut pour démarrer un serveur de développement pour avoir un aperçu de l'application !

Lancer le server de Rendu Vite

Démarrez le serveur de développement, puis accédez à l'aperçu en direct sur http://localhost:5173/:

npm run dev

Et voilà, vous devriez pouvoir augmenter/diminuer le compteur 🎉 Vous pouvez apporter des modifications au code, et l'aperçu web sera automatiquement rafraîchi.

🛟 Si vous avez besoin d'aide, laissez un commentaire.

Build le front pour la Production

Pour préparer le front pour la production, lancez la commande:

npm run build

Les fichiers pour la production sont situés dans le répertoire dist.

Conclusion

Utiliser Vite rend le développement d'une application Riot super facile :

Configuration simple
Serveur de développement efficace avec HMR (Hot Module Replacement), vous permettant de voir les changements dans votre code instantanément sans rechargement complet de la page
Système de build efficace avec tree-shaking

Merci de m'avoir lu ! À votre santé 🍻