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 :

Paris web banniere

Au programme de Paris Web 2019

Pour la 14ième édition consécutive, l’événement Paris web revient cette année avec au programme plus d’une quarantaine de conférences. Cette édition 2019 aura lieu du 10 au 12 octobre à l’école SUP’Internet de Paris.

image de mise en avant pour notre article portant sur Sylius, le framework php e-commerce

Sylius : un framework php e-commerce basé sur Symfony

Issu de Symfony, Sylius est un framework php orienté e-commerce embarquant des bundles destinés à la vente en ligne.

Pourquoi choisir Sylius ? Quelles sont ses atouts face à Magento et Prestashop ? On vous dit tout 😉

 

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