Mettez JavaScript au régime avec Svelte

Pour ce nouvel article, j’ai décidé de vous faire un cadeau de Noël en retard : je ne vous parlerai pas de Vue.js ! En effet, et pour compenser les inévitables kilos que la majorité d’entre nous avons pris en cette période de débauche généralisée, je vais aujourd’hui me focaliser sur un outil facilitant la perte de poids… de votre code JavaScript : le fort bien nommé Svelte !

Mais qu’est-ce que c’est quoi donc !?

Svelte est un framework assez jeune mais faisant beaucoup parler de lui, et pour cause : basé sur une philosophie similaire à celle de Vue.js ou encore React, à savoir une arborescence de composants écrits de manière déclarative dans laquelle la donnée circule en sens unique, il diffère toutefois fondamentalement de ses deux grands frères en un point crucial. Il se trouve que Svelte est aussi — voire surtout — un compilateur ; autrement dit, le code que vous servez à vos utilisateurs ne consiste pas en le code du framework plus votre code, transpilé si besoin est, mais plutôt en un code équivalent à celui que vous avez rédigé, mais transformé en opérations compréhensibles par le navigateur moyen. Nulle trace de la source de Svelte dans votre bundle, mais uniquement du code directement utile et efficace, qui d’ailleurs ne s’appuie pas sur un virtual DOM pour fonctionner.

Et ça joue beaucoup sur la taille du bundle en question ?

Tu l’as dit, bouffi ! Pour prendre l’exemple de React, le framework (react et react-dom) pèse environ 45 ko à lui seul. L’implémentation de TodoMVC en Svelte (donc une app qui fait effectivement quelque chose) pèse 3.6 ko. En termes de performance, Svelte est également plus rapide que React ou Vue.js au global. Je te laisse lire ce billet pour de plus amples informations sur tout ça.

En cette période où l’écologie est — enfin — un sujet récurrent, je trouve important qu’en tant qu’acteur·rices du numérique, nous nous interrogions sur le rôle que notre industrie joue dans le grand processus du réchauffement climatique : le terme de sobriété numérique n’a pas émergé sans raison. Si on peut utiliser un outil sympa pour concevoir nos apps tout en faisant transiter moins de code par les tuyaux et les rendre plus rapides par-dessus le marché, c’est toujours ça de pris !

Pour la petite histoire, Svelte est écrit par Rich Harris, qui est également l’auteur de Rollup, un concurrent de Webpack d’ailleurs utilisé par défaut dans les projets Svelte. Étonnant, non ? Non.

Trêve de billevesées

Histoire de voir rapidement à quoi ressemble l’outil, je te propose de coder une petite application qui va taper sur l’API de Speedrun.com et nous permettre de consulter le classement des meilleurs speedruns pour n’importe quel jeu vidéo ; comme ça, tu auras de quoi rager quand tu allumeras ta PS4 flambant neuve. Cette API a l’avantage de ne pas nécessiter de clé pour être utilisée (et c’est mon article, je fais ce que je veux, tralalère).

Allons-y donc gaiement :

$ npx degit sveltejs/template svelterun # on crée un nouveau projet Svelte
$ cd svelterun                          # on entre dans le dossier ainsi créé
$ npm i                                 # on installe les dépendances

Jusqu’ici, rien ne devrait te choquer outre mesure, sinon tu t’es probablement trompé de blog en cherchant une recette de confiture de châtaignes (mais reste, hein, on est bien). Note au passage que svelte est déclaré en tant que devDependency dans package.json, signe que je ne t’ai pas menti. On va également récupérer un ou deux paquets complémentaires dont on va avoir rapidement besoin :

$ npm i milligram                        # framework CSS minimaliste #sobriéténumérique
$ npm i rollup-plugin-postcss --save-dev # plugin Rollup pour le traitement du CSS

On peut enfin lancer notre app sans plus de cérémonie :

$ npm run dev

Comme avec tout framework digne de ce nom, cette dernière tourne avec un live reload pour que nos changements à venir soient immédiatement constatés :

  Your application is ready~! 🚀

  - Local:      http://localhost:5000

Il est grand temps de commencer à faire de la confiture écrire du code !

Les mains dans le cambouis 0%

Pour commencer, ce serait pas mal d’arriver à lister les différents jeux disponibles via l’API, non ? Créons donc un fichier src/client.js qui contiendra, tu l’auras deviné, notre client d’API :

const baseURL = "https://www.speedrun.com/api/v1";

async function get(endpoint) {
  return (await (await fetch(baseURL + endpoint)).json()).data;
}

export default {
  getGames() {
    return get(`/games`);
  }
};

Tu noteras que je ne me tracasse pas outre mesure concernant la gestion des erreurs, etc. : ce n’est pas le propos de cet article.

On va d’ores et déjà pouvoir remplacer le contenu de src/App.svelte, qui est le composant racine de notre application. Si tu as déjà joué avec Vue.js, tu devrais être en terrain connu ; on va pousser le bouchon encore plus loin en utilisant l’ordre template/script/style au lieu de script/template/style (enfin, tu fais comme tu veux, ça ne change absolument rien) :