Svelte : le framework léger pour des applications mobiles rapides sur le Web

Le JavaScript a longtemps été indispensable pour créer des contenus Web attrayants. Pour y parvenir, les développeurs Web devaient tout d’abord connaître le langage de programmation, une tâche que tous n’avaient pas le temps ou l’envie de maîtriser. Certains frameworks offrent toutefois aux développeurs un cadre dans lequel même les fonctionnalités complexes de JavaScript peuvent être exécutées de façon automatisée. L’effort de programmation s’en trouve considérablement atténué. Au contraire, la plupart des frameworks surchargent le navigateur. Svelte constitue ici une approche fondamentalement nouvelle.

Qu’est-ce que Svelte ?

Svelte (ou SvelteJS) est aussi un framework pour le développement d’applications JavaScript. En tant que tel, il fournit un cadre de base pour les futures applications, ainsi que des fonctionnalités essentielles et récurrentes sous la forme de bibliothèques intégrées automatiquement. Au sein d’un cadre donné, le framework fixe les possibilités de base et définit considérablement le processus de développement. Après une courte familiarisation, les frameworks intervenant dans la programmation des applications Web sont pratiques à utiliser.
Note
JavaScript, abrégé en JS, est un langage de programmation de scripts étendant les possibilités du HTML standard et du CSS et pouvant être interprété par tous les navigateurs Web modernes. Il permet de créer des pages interactives ainsi que des applications Web. En dehors de son nom, le JavaScript n’a que peu en commun avec le langage de programmation Java très répandu.
Svelte est un outil idéal pour réaliser des applications Web rapides et ressemble, dans son idée de base, à d’autres frameworks Javascript tels que Angular, Vue, Ractive ou React. À l’instar de ces derniers, Svelte est basé sur le JavaScript et permet la conception d’interfaces utilisateur interactives. Le code généré est toutefois nettement plus léger qu’avec les frameworks traditionnels.

Quels sont les avantages de Svelte ?

L’innovation essentielle de Svelte réside dans la possibilité de convertir un code de framework complexe en un JavaScript simple et optimisé. Avec la plupart des anciens frameworks, l’interprétation et la présentation de l’application en JavaScript était laissée au navigateur. Cela se traduisait par un affichage ralenti. À l’inverse, Svelte compile l’application en un JavaScript léger et optimisé dès le développement. Lors du développement de Svelte, l’un des objectifs a été de donner aux développeurs Web la possibilité d’écrire un code aussi léger et intelligent que possible, sans provoquer de surcharge trop importante à cause du framework.

En quoi Svelte diffère-t-il des autres Frameworks ?

Le problème des frameworks traditionnels est toujours le même : plutôt que de simplifier un code JavaScript afin qu’il puisse être affiché de façon plus performante dans le navigateur, ils étendent le code et laissent interpréter par JavaScript toutes les fonctionnalités du framework qui, bien souvent, ne sont pas utilisées. Par conséquent, avec un framework traditionnel, même les applications relativement petites prennent de l’ampleur, pour devenir de vastes scripts dont l’exécution nécessite un temps de calcul et une quantité de données considérables. En résumé, les frameworks contribuent à structurer les idées, mais pas le code. Le problème est souvent que les développeurs de frameworks se focalisent sur l’exécution dans le navigateur et négligent l’utilisation d’un JavaScript standard plus simple. En ce point, Svelte se démarque considérablement. À l’exception de quelques commandes de base, qu’il est possible d’apprendre très rapidement, Svelte utilise un HTML, un CSS et un JavaScript simples.
Remarque
Le CSS (Cascading Style Sheets) est un langage simple décrivant la conception visuelle d’une page HTML. Alors que le code HTML comporte uniquement le contenu à proprement parler, grâce un échange de CSS, la page peut être affichée différemment sur différentes plates-formes.
Lors du processus de création, les composants de l’application sont compilés en modules JavaScript indépendants. Dans une fenêtre d’aperçu, le programmeur peut à tout moment vérifier la stabilité et l’exécution d’un programme compilé. L’avantage de ce processus est que le script final est extrêmement léger et rapide. Contrairement aux frameworks traditionnels, Svelte ne provoque pas d’alourdissement du script sur lequel il est difficile d’agir. Résultat : une performance jusqu’à 10 fois plus rapide, notamment par comparaison avec le framework REACT qui était très apprécié jusqu’à présent.

L’architecture de SvelteJS

Svelte pour JS (JavaScript) se compose de plusieurs éléments. Son charme particulier réside dans le fait que le développeur Web n’a pas à se soucier des composantes CSS, laborieuses et sources d’erreur. Il lui suffit de définir des balises HTML ou XML simples et de les laisser interpréter par SvelteJS. À partir de ces balises, SvelteJS crée les composantes de l’application. Le code HTML est écrit dans une fenêtre de saisie REPL (boucle d’impression-eval-lecture) dans le navigateur. L’interprétation JavaScript est effectuée de façon immédiate et automatique. La stabilité du code peut ainsi être testée directement.

Dans quel contexte Svelte est-il utilisé de façon optimale ?

Avec son approche simple et très réduite, Svelte permet d’importantes extensions des applications Web. Alors que REACT doit pratiquement fixer l’ensemble du script dès le départ, avec Svelte, de futures extensions sont tout à fait possibles sans mettre en péril la stabilité et la performance de l’application. Svelte est ainsi un outil idéal pour développer de nouvelles applications et augmenter la performance des structures existantes. Les développeurs de SvelteJS s’adressent principalement aux débutants en programmation d’applications. Ils proposent des starter kits permettant d’atteindre des résultats très rapidement. Naturellement, SvelteJS présuppose quelques connaissances préalables, en particulier en CSS et JavaScript. L’approche légère du framework Svelte permet toutefois aux débutants de s’y retrouver facilement dans l’environnement de programmation.

Installer SvelteJS ou l’essayer en ligne ?

Afin d’utiliser SvelteJS localement sur votre système, vous devez installer Node JS. SvelteJS pourra ensuite être installé depuis le repository GitHub.
git clone https://github.com/sveltejs/svelte.git
cd svelte
npm install
L’environnement de développement SvelteJS fonctionne sur un serveur Web local à l’adresse « http://localhost:5000 ». La page de démo en ligne de Svelte permet de bien débuter dans SvelteJS sans avoir à installer le progiciel. Vous y trouverez des exemples de scripts pour toutes les composantes essentielles, que vous pourrez modifier et tester de façon interactive avec l’outil REPL original. Vous pourrez ainsi rapidement savoir si et comment SvelteJS peut vous permettre de développer votre propre idée d’application.

Perspective d’avenir : Svelte, un standard universel pour les applications ?

Grâce à son volume de données extrêmement réduit, SvelteJS permet des applications plus performantes et rapides que les frameworks traditionnels. Svelte en est toutefois à ses balbutiements et sa communauté est encore restreinte. SvelteJS promet un meilleur accès, une prise en main plus simple et des résultats plus rapides. Jusqu’à présent, ces promesses semblent être tenues. Si SvelteJS devait effectivement s’avérer beaucoup plus performant que VUE, Ractive ou REACT, il les supplantera peut-être bientôt pour devenir le nouveau standard universel pour le développement d’applications Web mobiles.
Cet article vous a-t-il été utile ?
Page top