Svelte : le framework léger pour des ap­pli­ca­tions mobiles rapides sur le Web

Le Ja­vaS­cript a longtemps été in­dis­pen­sable pour créer des contenus Web at­trayants. Pour y parvenir, les dé­ve­lop­peurs Web devaient tout d’abord connaître le langage de pro­gram­ma­tion, une tâche que tous n’avaient pas le temps ou l’envie de maîtriser. Certains fra­me­works offrent toutefois aux dé­ve­lop­peurs un cadre dans lequel même les fonc­tion­na­li­tés complexes de Ja­vaS­cript peuvent être exécutées de façon au­to­ma­ti­sée. L’effort de pro­gram­ma­tion s’en trouve con­si­dé­ra­ble­ment atténué. Au contraire, la plupart des fra­me­works sur­char­gent le na­vi­ga­teur. Svelte constitue ici une approche fon­da­men­ta­le­ment nouvelle.

Svelte (ou SvelteJS) est aussi un framework pour le dé­ve­lop­pe­ment d’ap­pli­ca­tions Ja­vaS­cript. En tant que tel, il fournit un cadre de base pour les futures ap­pli­ca­tions, ainsi que des fonc­tion­na­li­tés es­sen­tielles et ré­cur­rentes sous la forme de bi­blio­thèques intégrées au­to­ma­ti­que­ment. Au sein d’un cadre donné, le framework fixe les pos­si­bi­li­tés de base et définit con­si­dé­ra­ble­ment le processus de dé­ve­lop­pe­ment. Après une courte fa­mi­lia­ri­sa­tion, les fra­me­works in­ter­ve­nant dans la pro­gram­ma­tion des ap­pli­ca­tions Web sont pratiques à utiliser.

Svelte est un outil idéal pour réaliser des ap­pli­ca­tions Web rapides et ressemble, dans son idée de base, à d’autres fra­me­works Ja­vas­cript tels que Angular, Vue, Ractive ou React. À l’instar de ces derniers, Svelte est basé sur le Ja­vaS­cript et permet la con­cep­tion d’in­ter­faces uti­li­sa­teur in­te­rac­tives. Le code généré est toutefois nettement plus léger qu’avec les fra­me­works tra­di­tion­nels.

L’in­no­va­tion es­sen­tielle de Svelte réside dans la pos­si­bi­lité de convertir un code de framework complexe en un Ja­vaS­cript simple et optimisé. Avec la plupart des anciens fra­me­works, l’in­ter­pré­ta­tion et la pré­sen­ta­tion de l’ap­pli­ca­tion en Ja­vaS­cript était laissée au na­vi­ga­teur. Cela se tra­dui­sait par un affichage ralenti. À l’inverse, Svelte compile l’ap­pli­ca­tion en un Ja­vaS­cript léger et optimisé dès le dé­ve­lop­pe­ment. Lors du dé­ve­lop­pe­ment de Svelte, l’un des objectifs a été de donner aux dé­ve­lop­peurs Web la pos­si­bi­lité d’écrire un code aussi léger et in­tel­li­gent que possible, sans provoquer de surcharge trop im­por­tante à cause du framework.

Le problème des fra­me­works tra­di­tion­nels est toujours le même : plutôt que de sim­pli­fier un code Ja­vaS­cript afin qu’il puisse être affiché de façon plus per­for­mante dans le na­vi­ga­teur, ils étendent le code et laissent in­ter­pré­ter par Ja­vaS­cript toutes les fonc­tion­na­li­tés du framework qui, bien souvent, ne sont pas utilisées. Par con­sé­quent, avec un framework tra­di­tion­nel, même les ap­pli­ca­tions re­la­ti­ve­ment 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 con­si­dé­rables. En résumé, les fra­me­works con­tri­buent à struc­tu­rer les idées, mais pas le code. Le problème est souvent que les dé­ve­lop­peurs de fra­me­works se fo­ca­li­sent sur l’exécution dans le na­vi­ga­teur et négligent l’uti­li­sa­tion d’un Ja­vaS­cript standard plus simple. En ce point, Svelte se démarque con­si­dé­ra­ble­ment. À l’exception de quelques commandes de base, qu’il est possible d’apprendre très ra­pi­de­ment, Svelte utilise un HTML, un CSS et un Ja­vaS­cript simples.

Lors du processus de création, les com­po­sants de l’ap­pli­ca­tion sont compilés en modules Ja­vaS­cript in­dé­pen­dants. Dans une fenêtre d’aperçu, le pro­gram­meur 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 ex­trê­me­ment léger et rapide. Con­trai­re­ment aux fra­me­works tra­di­tion­nels, Svelte ne provoque pas d’alour­dis­se­ment du script sur lequel il est difficile d’agir. Résultat : une per­for­mance jusqu’à 10 fois plus rapide, notamment par com­pa­rai­son avec le framework REACT qui était très apprécié jusqu’à présent.

Svelte pour JS (Ja­vaS­cript) se compose de plusieurs éléments. Son charme par­ti­cu­lier réside dans le fait que le dé­ve­lop­peur Web n’a pas à se soucier des com­po­santes CSS, la­bo­rieuses et sources d’erreur. Il lui suffit de définir des balises HTML ou XML simples et de les laisser in­ter­pré­ter par SvelteJS. À partir de ces balises, SvelteJS crée les com­po­santes de l’ap­pli­ca­tion. Le code HTML est écrit dans une fenêtre de saisie REPL (boucle d’im­pres­sion-eval-lecture) dans le na­vi­ga­teur. L’in­ter­pré­ta­tion Ja­vaS­cript est effectuée de façon immédiate et au­to­ma­tique. La stabilité du code peut ainsi être testée di­rec­te­ment.

Avec son approche simple et très réduite, Svelte permet d’im­por­tantes ex­ten­sions des ap­pli­ca­tions Web. Alors que REACT doit pra­ti­que­ment fixer l’ensemble du script dès le départ, avec Svelte, de futures ex­ten­sions sont tout à fait possibles sans mettre en péril la stabilité et la per­for­mance de l’ap­pli­ca­tion. Svelte est ainsi un outil idéal pour dé­ve­lop­per de nouvelles ap­pli­ca­tions et augmenter la per­for­mance des struc­tures exis­tantes. Les dé­ve­lop­peurs de SvelteJS s’adressent prin­ci­pa­le­ment aux débutants en pro­gram­ma­tion d’ap­pli­ca­tions. Ils proposent des starter kits per­met­tant d’atteindre des résultats très ra­pi­de­ment. Na­tu­rel­le­ment, SvelteJS pré­sup­pose quelques con­nais­sances préa­lables, en par­ti­cu­lier en CSS et Ja­vaS­cript. L’approche légère du framework Svelte permet toutefois aux débutants de s’y retrouver fa­ci­le­ment dans l’en­vi­ron­ne­ment de pro­gram­ma­tion.

Afin d’utiliser SvelteJS lo­ca­le­ment sur votre système, vous devez installer Node JS. SvelteJS pourra ensuite être installé depuis le re­po­si­tory GitHub.

L’en­vi­ron­ne­ment de dé­ve­lop­pe­ment SvelteJS fonc­tionne 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 com­po­santes es­sen­tielles, que vous pourrez modifier et tester de façon in­te­rac­tive avec l’outil REPL original. Vous pourrez ainsi ra­pi­de­ment savoir si et comment SvelteJS peut vous permettre de dé­ve­lop­per votre propre idée d’ap­pli­ca­tion.

Grâce à son volume de données ex­trê­me­ment réduit, SvelteJS permet des ap­pli­ca­tions plus per­for­mantes et rapides que les fra­me­works tra­di­tion­nels. Svelte en est toutefois à ses bal­bu­tie­ments et sa com­mu­nauté est encore res­treinte. 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 ef­fec­ti­ve­ment s’avérer beaucoup plus per­for­mant que VUE, Ractive ou REACT, il les sup­plan­tera peut-être bientôt pour devenir le nouveau standard universel pour le dé­ve­lop­pe­ment d’ap­pli­ca­tions Web mobiles.