Framework, Front-end

Un framework JavaScript est apparu il y a quelques temps, faisant face directement à React et VueJs. Il s’agit du framework Svelte, qui concurrence ses aînés sur plusieurs points que nous allons vous détailler dans cet article.

Sachez que Svelte n’est pas tout nouveau, il a commencé à se faire connaître depuis sa dernière mise à jour, Svelte 3.0.

Ayant pour slogan “Cibernetically enhanced web apps”, Svelte se veut plus simple, plus réactif et moins chronophage dans son code.

Commençons par comprendre ce qu’est Svelte

Svelte, est défini comme un framework JavaScript, utilisé dans la création d’interfaces utilisateur réactives. Son objectif est de réduire considérablement le temps de chargement des applications.

 

Svelte, un framework ? Pas si sûr ! C’est aussi un compilateur JavaScript

Si on devait le classer plus précisément, Svelte serait un peu à part des frameworks JavaScript tels qu’on les connaît. En effet, son fonctionnement intègre un compilateur, l’élément important qui lui permet de se différencier de React, VueJs ou Angular par exemple.
Dans le cas de Svelte, il ne s’agit pas d’inclure une librairie dans son code pour permettre la compilation puisqu’elle est déjà présente.
Svelte est un framework dans un compilateur.

Pour être plus précis, des analyses comparatives ont nommés Svelte comme, le framework JavaScript le plus performant par rapport à React et VueJs.

 

Utilisation du “framework compilateur”

Pour programmer avec ce framework JavaScript, il faut utiliser l’extension de fichier crée pour lui : .svelte. Mais pas que ! En effet, Svelte a pour base de code le HTML, ce qui lui permet d’être tout aussi bien supporté dans un fichier de type .html.
Plus besoin de se prendre la tête, c’est comme bon vous semble !

 

Exemple d’un rendu avec Svelte

Framework JavaScript Svelte

 

Svelte va compiler ces lignes de code. Le fichier est envoyé au navigateur sous forme compilée dans une version de distribution afin d’obtenir le rendu.

 

Exemple d’une compilation JavaScript avec Svelte

Compilation Framework JavaScript Svelte

 

Les avantages de Svelte :

 

Son poids et sa vitesse de chargement

Un des gros avantages du framework Svelte est, comme son nom l’indique, son poids très léger. En effet, une fois le code compilé, l’application pèse 3 à 4 fois moins qu’avec une compilation sous React ou VueJs. Cela engendre sans surprise une amélioration de la vitesse de chargement de l’application pour l’utilisateur.

Au moment de l’écriture de cet article, un benchmark révèle que le framework est 35 fois plus rapide que React et 50 fois plus que VueJs. C’est déjà pas mal, mais qui sait, des changements peuvent encore venir pour, améliorer toujours plus ces résultats !

 

Un code différent pour répondre à certaines problématiques

En principe, moins on écrit de code, moins on a de chance de rencontrer de bugs n’est-ce pas ? Svelte est pensé sur cette idée. Le framework se veut simple et lisible.
L’écriture syntaxique diffère un peu de ce que l’on a l’habitude de voir, mais rien d’insurmontable, on s’y fait rapidement 😉
Par exemple, les { } dans le HTML servent à indiquer que l’on veut récupérer le contenu de la variable.
En fait, Svelte veut vous permettre de réduire vos lignes de code pour que vos programmes restent lisibles. Et c’est réussi ! En moyenne, pour une fonction, le framework JavaScript aura besoin de 40% de lignes en moins que React.

L’utilisation de l’impératif plutôt que le déclaratif est aussi un paramètre qui différencie le framework.
Lorsque nous développons en langage déclaratif (HTML), Svelte prend les composants pour les traduire en langage de style impératif afin de les injecter directement dans le DOM. Mais si le code de l’application est impératif, comment Svelte peut-il détecter qu’il y a eu un changement ? Autrement dit, en reprenant le même exemple, comment le framework peut-il détecter que le champ de remplissage est complété ? Tout se joue au moment de la compilation.

 

Rendu Svelte

 

La compilation du framework JavaScript

Pour répondre à la question, Svelte est bien entendu, capable de savoir qu’un changement a eu lieu grâce à une variable qui lui est propre : variable = variable.
À première vue on peut se demander quel sens ça a. En effet, en faisant cela on demande à une variable de s’assigner à elle-même mais, cela va indiquer au framework qu’il faut relancer les vérifications afin de détecter d’éventuels changements à prendre en compte.

La compilation du code est faite automatiquement par le framework JavaScript, permettant au navigateur de ne pas avoir à faire tout le travail. C’est ce qui permet à Svelte d’obtenir des vitesses de chargement imbattables. Le code est compilé dans des petits modules JavaScript autonomes injectés dans le DOM directement.

Cette compilation se fait en temps réel, pendant l’écriture du code. Svelte ne demande donc aucune dépendance au navigateur pour se lancer. Encore un bon moyen de réduire le poids de l’application et d’améliorer son temps de chargement !

 

Le DOM

Le créateur de Svelte, Rich HARRIS, explique qu’il n’a pas voulu inclure de DOM virtuel pour la simple raison que cela représentait une couche de plus à exécuter lors du chargement de l’application.

Le DOM n’est donc plus manipulé directement par l’auteur du programme, mais par le framework JavaScript directement.

 

Pour résumer, Svelte, c’est une communauté qui s’agrandit depuis la mise en ligne de la version 3. Un créateur à l’écoute qui, suite aux demandes de la communauté, a prévu d’intégrer dans une prochaine mise à jour du framework une compatibilité avec TypeScript

Ce qu’on peut donc espérer pour les prochaines améliorations du framework JavaScript :

  • Svelte Native, pour développer des applications Android et iOS
  • Sapper, pour créer des applications complexes
  • Svelte GL, pour permettre de créer des expériences 3D dans le navigateur

 

Les frameworks JavaScript vous intéressent ? Nous avons pleins d’autres articles : Localstack, Sylius Plus, Kendo UI ou encore Preact, rendez-vous sur notre blog, rubrique framework !

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

miniature de l'article Vue.js

Vue.JS : un framework Javascript facile à prendre en main

Vous êtes un aficionado du HTML, du CSS et du JavaScript ?
Dans ce cas Vue.JS vous sera simple à aborder ! En effet sa courbe d’apprentissage s’avère être progressive, et il n’est pas nécessaire d’avoir déjà travaillé avec Angular ou React, donc si ce n’est pas le cas : don’t worry !
Dans cet article nous verrons les raisons d’utiliser Vue.JS, les éléments qui en font sa singularité face à ses deux principaux concurrents React et Angular, ainsi que quelques fonctions/composants que l’outil propose !

Firefox Reality : un navigateur dédié à la AR/VR

Après avoir amélioré les performances de son navigateur phare, la société Mozilla a décidé
de s’imposer sur le marché de la réalité mixte en lançant son navigateur dédié : Firefox
Reality. Que propose-t- il ? Est-ce une révolution ? La réponse dans cet article !

vignette-flutter

Flutter : le nouveau framework de Google

Après plus de deux ans d’attente, il est enfin là. Annoncé en novembre 2015, Google a présenté la bêta du framework Flutter lors du Mobile World Congress du lundi 26 février au jeudi 1 mars 2018 à Barcelone.

Centre de préférences de confidentialité

Cookies Fonctionnels

gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

Advertising

Cookies Satistiques

_ga, _gat, _gid

Cookies externes

PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
CONSENT, 1P_JAR