Svelte - Comment créer des composants unitaires réutilisables ?
Dans cet article, nous allons voir comment créer des composants unitaires réutilisables à l’aide de Svelte, avec pour objectif d’avoir un widget permettant d’afficher les derniers articles de Korben.info, que nous pourrons ensuite intégrer sur n’importe quel site.
À propos de ESENS
ESENS accompagne ses clients dans leurs projets d’innovation technologique, et ses équipes tout au long de leur parcours professionnel à Paris, Bordeaux, Lyon, Toulouse, Rennes, Nantes, Caen et Lille. Intégrer ESENS, c’est s’offrir la possibilité d’évoluer dans les domaines que vous souhaitez, puisque la société répond aux besoins web, mobile, IoT, design et big data de ses clients, qu’ils soient des startups ou des leaders historiques de leur marché.
Mais la passion première d’ESENS, c’est l’innovation, et ils mettent tout en œuvre pour l’assouvir via les travaux de recherche de leur Lab et les développements de Produits internes de l’Agence.
Donc que vous soyez développeur.se front, back ou full stack, ingénieur.e en BI ou en Big Data, Tech Lead confirmé.e ou jeune diplômé.e, ESENS priorise avant tout l’esprit d’équipe et la motivation pour recruter ses collaborateurs.
Pour en savoir plus sur ESENS et nous rejoindre, rendez-vous sur esensconsulting.com ou sur bit.ly/ESENSrecrute !
Commençons maintenant par poser les bases de ce tuto Svelte :
Qu’est-ce qu’un Web Component ?
Les Web Components sont un ensemble de plusieurs technologies du Web qui permettent de créer des éléments personnalisés, réutilisables et unitaires. Cela signifie que leur code et leurs styles sont isolés pour chaque composant, et qu’ils peuvent donc être utilisés au sein de n’importe quelle page ou application Web.
Regardons un peu comment se compose un Web Component :
- Les Web Components utilisent l’API Custom Element pour créer des balises avec un nom personnalisé.
- Ils utilisent le Shadow DOM pour isoler les fonctionnalités et styles dans un arbre DOM masqué au reste de la page.
- Ils peuvent être constitués de Gabarits HTML tels <slot> et <template> non affichés sur la page…
- … mais qui permettent entre autres de rajouter du contenu à votre composant au moment de son utilisation.
Ces fonctionnalités sont disponibles sur l’ensemble des navigateurs ou presque, et vous pourriez même les utiliser nativement pour créer vos Web Components.
Cela peut s’avérer ardu cela dit, car il vous faudra également prendre en compte et gérer les différentes étapes du cycle de vie du composant ainsi créé.
Heureusement, il existe un grand nombre de solutions permettant la création de ces Web Components, dédiées à leur développement ou non, comme présenté dans cette comparaison des différents outils.
Dans le cadre de cet article, nous étudierons comment développer des Web Components à l’aide de Svelte, un framework minimaliste, performant, et de plus en plus populaire.
Qu’est-ce que Svelte ?
Svelte est un framework lancé en 2016, servant à créer des applications web basées sur des composants.
Ce framework a comme particularité de ne pas utiliser le Virtual DOM, modifiant ainsi directement le DOM, ainsi que de passer plutôt par une compilation vers du pur JavaScript, permettant d’avoir une application plus légère et plus rapide puisque la page n’est plus obligée d’embarquer le code du framework.
Svelte offre aussi des éléments qui permettent d’utiliser beaucoup moins de code que d’autres frameworks comme React ou Vue, ce qui profite également à la légèreté des livrables.
Développer un composant Svelte
Comme nous vous le disions plus tôt, l’objectif de ce tutoriel est de créer un composant listant les derniers articles de Korben.info. Pour ce faire, nous allons utiliser le flux RSS gracieusement mis à disposition : https://korben.info/feed.
Nous commencerons par créer un composant Svelte standard, et nous verrons ensuite comment faire en sorte que ce composant puisse être utilisé comme Web Component.
Il existe plusieurs méthodes pour créer un projet Svelte utilisant différents outils de compilation. Aujourd’hui, nous utiliserons le template par défaut recommandé par Svelte sveltejs/template, qui va initialiser notre projet avec une configuration rollup.js et un exemple de composant.
Commençons donc par récupérer et installer ce template, à l’aide de l’utilitaire degit :
npx degit sveltejs/template web-component-korben
cd web-component-korben
npm install
Ce qui nous génère un projet avec la structure suivante :
Vous pouvez ensuite exécuter la commande npm run dev pour lancer et exposer votre application :
Créons maintenant un nouveau fichier Korben.svelte à côté du fichier main.js, composé d’une balise <script> contenant la logique du composant permettant de récupérer les articles, d’une balise <style> dans laquelle on définit la feuille de style propre à ce composant et enfin de la structure HTML du composant.
<script>
const CORS_PROXY_URL = 'https://corsanywhere.herokuapp.com/';
const KORBEN_FEED_URL= 'https://korben.info/feed';
const RSS_URL = CORS_PROXY_URL + KORBEN_FEED_URL;
/**
* Fonction de récupération des articles
*/
async function fetchKorbenArticles(){
...
}
</script>
<div>
...
{#await getKorbenArticlesFromFeed()}
<div class="spin" />
{:then items}
{#if items && items.length > 0}
{#each items as item}
<div class="article">
<img
class="image"
src={articleImageUrl(item)}
height={articleImageHeight(item)}
width={articleImageWidth(item)}
alt={articleTitle(item)}
/>
<div class="details">
<div class="title">
{articleTitle(item)}
</div>
<div class="description">
{@html articleDescription(item)}
</div>
</div>
</div>
{/each}
{/if}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
...
</div>
<style>
/* Styles du composant */
</style>
Dans la section HTML de notre composant, vous pourrez observer quelques-unes des nombreuses directives propres à Svelte :
- {#await} pour traiter les promesses et observables, ici, le retour asynchrone de fetchKorbenArticles(). Vous pouvez également observer l’utilisation de {:catch}, qui nous permet de traiter les erreurs remontées par notre méthode de récupération d’articles.
- {#if} pour gérer les conditions.
- {#each} pour parcourir des tableaux.
- {@html } pour insérer du contenu HTML.
Notre composant prêt, il est maintenant temps de l’importer et de l’afficher dans notre composant racine : App.svelte
<script>
import Korben from "./Korben.svelte";
</script>
<Korben />
Cela fait, vous devriez pouvoir voir dans votre navigateur la liste des derniers articles de Korben.info
Transformer notre composant en Web Component
Pour pouvoir être utilisé en tant que Web Component, nous allons devoir configurer notre composant pour qu’il soit utilisé en tant que Custom Element, et non pas en tant qu’élément Svelte.
Commençons par définir le nom de notre balise HTML, en définissant le tag au début de notre fichier Korben.svelte :
<svelte:options tag="korben-rss-feed" />
<script>
...
Nous devons également préciser à notre compilateur que nous avons besoin de compiler des éléments faisant partie de l’API Custom Element, en modifiant le fichier de configuration rollup.config.js et en y ajoutant la propriété customElement dans les options de compilation :
plugins: [
svelte({
compilerOptions: {
dev: !production,
customElement: true,
...
En exécutant la commande npm run build, nous pouvons désormais construire un bundle de notre application en vanilla JavaScript, c’est-à-dire sans librairie additionnelle. Cela va produire un fichier public/build/bundle.js que nous pouvons ensuite insérer dans n’importe quelle page HTML.
<html>
<head>
<title>Test Korben korben-rss-feed</title>
<script src="../public/build/bundle.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<korben-rss-feed></korben-rss-feed>
</div>
</div>
</div>
</body>
</html>
Cela dit, notre composant a ici été compilé avec l’ensemble des autres composants de notre projet, et nous souhaiterions plutôt que notre livrable ne contienne pas de code non utilisé par notre Web Component, afin qu’il soit le plus léger possible.
Pour ce faire, nous avons juste besoin de modifier notre fichier rollup.config.js, pour passer le fichier de notre composant en entrée et non pas le point d’entrée de l’application :
export default {
/* input: 'src/main.js', */
input: 'src/Korben.svelte',
...
À la construction, un nouveau fichier public/build/bundle.js est alors créé, qui ne contient cette fois que le code strictement nécessaire à notre Web Component, qu’on peut alors intégrer au sein de n’importe quel site.
C’est bon, vous savez désormais créer un Web Component avec Svelte !
Intégrer le Web Component dans un site existant
Votre composant compilé, il est maintenant aisé de l’intégrer à n’importe quel site web, comme nous avons pu le faire sur le bas de page de notre site esensconsulting.com :
<section class="news-last_header">
<h3>Les derniers articles Korben</h3>
[VOIR TOUS SES ARTICLES <i class="icon-right"></i>](https://korben.info)
</section>
<section class="news-last_list" style="height: 170px;">
<script src="./scripts/bundle.js"></script>
<korben-rss-feed direction="row" style="position:absolute; left:0"></korben-rss-feed>
</section>
Avec pour rendu :
Voilà, comme vous avez pu le voir, il est très simple de créer nos propres Web Components à l’aide de Svelte, et il ne tient plus qu’à vous de créer et partager vos idées de composants.
Vous pouvez retrouver le code de notre composant sur Github et l’ensemble de nos articles sur le blog d’ESENS.
Vous êtes développeur.se front, back ou full stack, confirmé.e ou jeune diplômé.e ? ESENS recherche avant tout un bel esprit d’équipe pour vous accompagner tout au long de votre projet de carrière.
Pour en savoir plus sur ESENS et nous rejoindre, rendez-vous sur esensconsulting.com ou sur bit.ly/ESENSrecrute !