🇫🇷 Base d'une application RiotJS avec Vite
Tags: riotjs, french, frontend, javascript
Published: 2024-05-19 14:10:11

## 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](https://riot.js.org/) 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](https://vitejs.dev/). 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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brh5hi44rm1v4171i7bb.png)
> Le code final est disponible sur GitHub : https://github.com/steevepay/riotjs-vite-setup

## Exécuter Riot avec Vite

Créez un nouveau dossier:
```console
mkdir riot-vite-setup && cd riot-vite-setup
```
Initialisez le projet Node:
```console
npm init
```
Maintenant, vous devez installer les paquets NPM suivants:
```console
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**:
```js
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 à:
```console
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 :
```html
<!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

```html
<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) :
```html
<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/:

```bash
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:
```bash
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é 🍻

## Resources
- Lien vers le repository Github: [Riot + Vite Application] (https://github.com/steevepay/riotjs-vite-setup)
- [Comparaison entre RiotJS et VueJS](https://github.com/damusix/riot-vs-vue)
- [Pourquoi Vite?](https://vitejs.dev/guide/why.html)