🕰️ 🕊️ 😚 Pourquoi utiliser Svelte pour vos projets Web ⛩️ 🌺 🏕️

Si vous êtes un développeur Web, vous avez probablement entendu parler de Svelte Js. Néanmoins, je pense que vous vous demanderez pourquoi il gagne en popularité et quels avantages intéressants il présente pour les développeurs Web.

Nous ferons un bref examen de ce cadre, de ses avantages et inconvénients, afin qu'après la lecture, vous puissiez décider s'il convient ou non à votre projet.

Le framework Svelte est apparu en 2018 et c'était une sensation. Les développeurs débutants et expérimentés aimaient l'utiliser pour toutes sortes de projets. À cet égard, prenons un peu de temps pour clarifier ce qui rend Svelte si accessible.

Qu'est-ce que Svelte et quels sont ses avantages?

Pour certains développeurs, Svelte JS est connu comme le framework front-end le plus populaire qui n'était pas inclus dans les six premiers de l'état de JavaScript en 2018. Il y a un article Wikipedia sur Svelte , mais il est apparu il y a seulement six mois, donc il n'y a pas beaucoup d'informations là-bas.

Svelte a été conçu comme un framework, mais, en fait, c'est un framework de composants conçu pour compiler des composants au stade de la construction. Grâce à cette approche, vous pouvez télécharger un seul bundle.js par page pour afficher l'intégralité de l'application.

Autrement dit, avec Svelte, vous écrivez des composants en utilisant HTML, CSS et JavaScript. Pendant le développement, le framework les compile en petits modules JavaScript autonomes. Cela garantit qu'un minimum de travail est effectué de la part du navigateur, ce qui rend l'application Web plus rapide et l'écriture de code est plus facile.

Voici une courte description de Svelte par les auteurs:

Source: Svelte.dev

Grâce à tout cela, Svelte Mobile est l'un des leaders en termes de «performances de démarrage». D'autres types d'optimisation ne le font pas. Svelte obtient de tels résultats exceptionnels grâce à l'utilisation d'un compilateur JavaScript accessible par navigateur, et non à un tiers. Ainsi, nous obtenons une excellente solution pour le développement web parmi d' autres frameworks et langages de programmation populaires .

Svelte atteint ainsi une réactivité précise du code et une productivité accrue, ce qui est une excellente publicité de cadre pour les développeurs et les propriétaires d'entreprise. De plus, un autre avantage de Svelte pour les développeurs est la commodité pour les débutants et une structure de syntaxe claire.

Présentation de Svelte Architecture

Svelte est populaire pour sa vitesse par rapport à toutes les autres bibliothèques. Cela est dû au fait de se débarrasser de la phase de chargement du framework pour construire un DOM virtuel . Au lieu d'utiliser l'outil lors de l'exécution, le code Svelte est compilé dans JS au stade de la construction. Cela signifie que l'application n'a pas besoin de dépendances pour s'exécuter.

Comment fonctionne Svelte

Je vais essayer d'expliquer le principe de Svelte dans les mots les plus simples:

Vous ouvrez le site.
Rendez la page en JS pur.
Vous passez la page à vos collègues [si vous en travaillez plusieurs].
Les collègues s'attendent à une réelle réactivité de la page.
S'ils le trouvent, l'application / le site devrait fonctionner correctement, non seulement en mode test, mais aussi au combat.

Svelte JS vs. Réagir contre Vue: comparaison

De nombreux ingénieurs comparent Svetle.Js avec d'autres frameworks. Les alternatives les plus célèbres sont React et Vue.

Les frameworks web les plus populaires tels que Angular, React et Vue.js sont basés sur le principe de l'attente du chargement du code pour construire un DOM virtuel. Ce n'est qu'alors qu'ils peuvent rendre la page à l'aide de la bibliothèque.

Par exemple, React, développé par Facebook en 2011, a rendu la programmation réactive assez populaire. Ce framework a commencé à utiliser le DOM virtuel. Il sépare le traitement des événements, la manipulation des attributs et la mise à jour manuelle du DOM qui seraient autrement nécessaires pour construire l'application. C'est le facteur clé qui a rendu React si attrayant.

Svelte, quant à lui, est un compilateur. Il compile vos composants en JavaScript au lieu de s'appuyer sur des concepts comme Virtual DOM pour mettre à jour le navigateur DOM. Grâce à la typographie Svelte, il est devenu possible de construire l'application beaucoup plus efficacement. Vous pouvez écrire vos composants en utilisant CSS, HTML et JavaScript, et pendant le processus de construction, Svelte les compile dans des modules JavaScript séparés.

En conséquence, Svelte 3 construit un DOM plus léger. Par exemple, l'implémentation TodoMVC sur Svelte sous forme compressée pèse 3,6 Ko. À titre de comparaison, React plus ReactDOM, même sans code d'application, pèse environ 45 Ko sous forme compressée. Le téléchargement complet de TodoMVC sur React prend 10 fois plus de temps sur le navigateur que sur Svelte.

Certes, il est difficile d'évaluer impartialement les performances de Svelte par rapport à React, car les frameworks sont très différents par essence.

Et pourtant, si vous voulez en savoir plus sur la comparaison pratique de ces frameworks web, il sera utile de regarder cette vidéo.

Selon GitHub , Svelte Native est nettement plus rapide que Ember, Angular, React, Ractive, Preact, Mithril ou Riot. Il est même en mesure de rivaliser avec Inferno, qui est probablement le cadre d'interface utilisateur le plus rapide au monde à l'heure actuelle. Au final, c'est un avantage décisif, car une vitesse d'application plus élevée peut vous propulser devant la concurrence.

Composants Svelte

Examinons plus en détail les détails de la structure Svelte. Tout composant PWA [Progressive Web Application] sur Svelte peut contenir trois sections: script, style et modèle. Voici une description plus détaillée de ce que cela signifie:

Balise de script: bloc JavaScript facultatif avec déclarations de fonctions et de variables utilisées à l'intérieur du composant.

Étiquette de style: une autre unité facultative. Considérez-le comme une balise de style HTML standard, avec une différence critique. Les règles décrites à l'intérieur de ce bloc s'appliquent uniquement au composant actuel. L'application d'un style à un élément Pn'affectera pas tous les paragraphes de la page. C'est génial, car il n'est pas nécessaire de proposer des classes pour différents éléments. Autrement dit, vous ne pourrez tout simplement pas redéfinir accidentellement une autre règle de style.

Bloc de modèle: il s'agit du dernier et seul bloc obligatoire, généralement la balise H1. Il s'agit à la fois de la vue et de la vue de votre composant. Il est étroitement lié aux blocs de script et de style, car il définit son comportement et sa conception.

Pour avoir une meilleure idée de la création de tous ces composants, je vous suggère de lire une explication brève et compréhensible de A shot of code:

Pour ces raisons, nous pouvons considérer Svelte comme une bibliothèque essayant d'apporter de la modularité au frontend. Cette modularité est prise en charge en regroupant divers composants. Cependant, le cadre isole également le modèle, la logique et la conception. Par défaut, Svelte crée des styles pour chaque composant séparément. Autrement dit, vous éviterez toute fuite de style entre les composants, ce qui ne garantit pas l'utilisation de certains autres frameworks.

Il convient également de noter que Svelte interagit bien avec une variable JavaScript appelée name. Il s'agit d'un nouveau concept de Svelte v3. Toute variable du script de votre composant est désormais accessible à partir du balisage HTML. Il n'y a pas non plus de syntaxe spécifique au framework que vous devrez apprendre à gérer les états. Vous n'avez pas besoin de gérerdataVue, $scopeAngular ou this.stateReact. Au lieu de cela, vous pouvez l'utiliser partout letpour atteindre les valeurs d'état attribuées. La modification des valeurs à chaque fois entraîne automatiquement un nouveau rendu.

Voici à quoi cela ressemble dans la pratique:

La création d'un composant Svelte est similaire à l'utilisation de CodePen. Vous n'avez pas à vous demander comment connecter la fonction JS déclarative que vous avez apprise à travers certains DOM query-selector. Svelte n'affectera pas window listenersou callback functions. Ces fondamentaux restent tels qu'ils devraient être.

Une autre bonne chose à propos de ces composants est qu'ils sont aussi prioritaires que les composants traditionnels. Il vous suffit d'importer le .html et Svelte comprendra comment le déployer.

Que devez-vous savoir d'autre sur Svelte.js

Parlons des autres avantages importants de Svelte dans le processus de développement par rapport à d'autres frameworks.

Convient aux débutants

Nous avons mentionné plus tôt que la raison de la popularité de Svelte est en partie à cause de sa simplicité pour les débutants. Lors de son utilisation, il n'est pas nécessaire de manipuler le DOM. De plus, vous n'avez pas besoin de comprendre les enveloppes d'états spécifiques au framework. L'accès aux variables peut être obtenu directement à partir du balisage, ce qui simplifie considérablement le processus de création d'une application. En travaillant avec Svelte, les programmeurs peuvent apprendre les principes de base de l'état des composants sans se perdre dans les détails.

Svelte fournit sa propre syntaxe pour les instructions conditionnelles et les boucles pour afficher les éléments DOM. Le principe de fonctionnement ici est similaire à JSX. Cependant, tous ces supports fermés dans lesquels les débutants peuvent facilement se perdre ne sont pas si importants.

Il y a une particularité à propos de Svelte qui mérite d'être mentionnée: elle transmet les propriétés aux composants. Ce framework est facile à apprendre et entièrement fonctionnel, mais, au goût de certains développeurs, la syntaxe est trop exotique.

rétrocompatibilité

Auparavant, si vous deviez intégrer, par exemple, un widget de calendrier ou tout autre dans votre application, vous ne pouviez le faire qu'en utilisant la même version du framework sur lequel le widget est construit. Autrement dit, si vous générez l'application dans Angular et que le widget est intégré dans React, vous ne pourrez pas l'intégrer. Cependant, si le widget ou votre application est construit à l'aide de Svelte, cela devient possible.

Séparation de code

Disons que vous utilisez React comme framework principal. Si vous utilisez initialement un seul composant React, et pas beaucoup, vous devez toujours télécharger l'intégralité de React. Avec Svelte, la séparation de code est beaucoup plus efficace, car le framework est intégré au composant et ce composant est très petit.

Soutenir la communauté Open-Source

Svelte est un logiciel open source développé par des passionnés. Ainsi, l'utilisation du framework Svelte est gratuite et vous permet d'implémenter gratuitement de nombreuses fonctions. De plus, Svelte a une communauté active de développeurs sur GitHub, que vous pouvez rejoindre et où vous pouvez toujours demander de l'aide ou contribuer à cette technologie.

Svelte est-il suffisamment stable et fiable

Il s'agit d'une question urgente pour le cadre qui a été mis sur le marché si récemment. Tous les exemples ci-dessus concernent la syntaxe de Svelte version 3. Pour le moment, elle est toujours en version bêta. Comparé aux géants de l'industrie tels que ReactJS et VueJS, il n'est pas très développé.

Peu importe à quel point SvelteJS peut être intéressant, vous devez attendre un moment avant d'enseigner des cours de maître sur le code qui l'utilise. En effet, la version bêta peut être quelque peu différente de la version finale. Cependant, Svelte offre une documentation concise pour la version 3, ce qui peut le rendre plus facile pour les débutants. Ce cadre peut donc certainement être considéré comme faisant partie de votre pile technologique de confiance.

Svelte.js est-il le prochain géant?

Difficile de répondre. Svelte peut-il battre Vue et React en tant que framework frontal qui résistera à l'épreuve du temps?

Ce n'est pas si facile à prévoir. Pour le moment, il n'a pas encore atteint le niveau de popularité de certains de ses frères. Il ne bénéficie pas du même soutien d'une grande entreprise que React. Mais là encore, Vue s'en est plutôt bien sortie sans elle.

L'année dernière, une autre étude sur l'état de JS a été menée. Il est organisé chaque année pour évaluer les préférences des principaux développeurs. Svelte est devenue la plus populaire par rapport aux autres bibliothèques incluses dans l'enquête. Cela peut signifier que tôt ou tard, il sera considéré comme l'un des meilleurs cadres JS.

Svelte vs. React est un sujet de discussion courant parmi les programmeurs, mais l'un des cadres n'est pas nécessairement nettement meilleur que l'autre. Svelte est bien adapté au développement d'applications Web ou MVP, tandis qu'Angular est bien adapté aux applications Web PWA ou d'entreprise. Certains développeurs trouvent un framework qu'ils aiment et s'y tiennent, mais même ainsi, ne laissez pas cela essayer Svelte. Vous aimerez peut-être les fonctionnalités que nous avons décrites.

Reprenons brièvement les principales fonctionnalités de Svelte:

️

Il s'agit d'un framework basé sur des composants qui ne nécessite pas de plugins supplémentaires.
️ Il fonctionne avec la gestion de l'État sans aucune difficulté familière.
️ Il vous permet d'utiliser les styles intégrés [dans le composant], sans nécessiter CSS-in-JS, donc aucune extension pour l'éditeur de code ou une syntaxe étrange n'est requise.
️ Un script de construction très simple suffit pour commencer.
️Pour commencer à travailler sur le projet de base, pratiquement aucun fichier n'est nécessaire.

Si vous êtes un développeur Web qui a besoin d'un nouveau framework, assurez-vous que Svelte en vaut la peine. Dans d'autres cas, si vous recherchez la meilleure technologie pour votre solution Web, Svelte peut être une bonne option à laquelle vous devez prêter attention.

Pourquoi utiliser Svelte pour vos projets Web