Get best of the week

Est-il temps d'oublier React et de passer à Svelte?

Chaque année, une étude sur l' état de JavaScript est publiée, qui résume les résultats d'une enquête examinant l'état actuel de l'écosystème JavaScript. Cette étude couvre les frameworks front-end, le développement serveur et mobile, les tests, les ressources populaires pour les développeurs et bien plus encore.

Bien entendu, tout tourne autour de JavaScript. Par conséquent, si vous utilisez JS pour le développement Web, je vous recommande fortement de jeter un œil à State of JavaScript si vous ne l'avez pas déjà fait.

Pour moi, l'un des résultats les plus intéressants de State of JavaScript a été l'attention inattendue de ceux qui ont participé à l'enquête sur le framework frontal Svelte .

Dans le classement général des principaux outils frontaux (basé sur des indicateurs de connaissance du cadre, d'intérêt et de satisfaction à l'égard de celui-ci), Svelte apparaît en deuxième position. Il y va juste après React , devant des outils bien connus comme Vue.js , Preact , Angular et Ember .
Cela m'a un peu choqué, car Svelte est un outil relativement nouveau, à la fois en termes d'âge et en termes de paradigme de développement logiciel.


Classement des frameworks frontaux basés sur l'état de la recherche JavaScript

Je sais que beaucoup d'entre vous peuvent être scandalisés ici et dire que React et Svelte ne sont néanmoins pas des frameworks, mais des bibliothèques. Je le sais, mais le rapport de recherche n'a pas été rédigé par moi, alors fermons la question de la terminologie à ce sujet.

J'ai trouvé un exemple de projet de modèle Svelte et créé une petite application Hello World.


À gauche, le projet React le plus simple. Sur la droite se trouve un projet similaire basé sur Svelte.

Bien que ce projet simple n'ait pas été difficile à mettre en état de marche, quelqu'un qui a déjà écrit sur React aura besoin de temps pour maîtriser Svelte.

Vaut-il le temps d'apprendre le Svelte? Peut-être que nous ne sommes confrontés qu'à une autre chose à la mode qui disparaîtra aussi rapidement qu'elle est apparue? Je propose de le découvrir.

But de l'étude


Je voudrais répondre à la question suivante: "Dois-je arrêter de perdre du temps à apprendre React et commencer à traiter avec Svelte?"

Nous chercherons la réponse à cette question en explorant les différences fondamentales entre React et Svelte. Cela nous permettra de comprendre les qualités uniques de chacun de ces outils. En conséquence, nous découvrirons lequel mérite d'être investi.

Nous commençons par un examen de chacune des bibliothèques, puis parlons de leurs avantages et inconvénients, puis tirons des conclusions.

Réagir


Au cours des deux dernières années, tout le monde a littéralement parlé de React. Cette bibliothèque, créée par Facebook, a rapidement capturé le monde du développement Web. Maintenant, c'est un outil de développement Web qui occupe la première place dans le monde (la vérité, la réponse à la question du «numéro un» dépend ou non de la question posée).

La bibliothèque React, en grande partie grâce à la communauté qui l'entoure, se développe plus rapidement que jamais auparavant. Et bien qu'il n'y ait aucun signe de ralentissement de cette croissance.

Voici trois fonctionnalités de React qui rendent cette bibliothèque particulièrement attrayante:

  1. Nature déclarative.
  2. Structure d'application basée sur les composants.
  3. Facilité d'utilisation en termes d'intégration dans une pile technologique existante.

La nature déclarative de React vous permet de créer des interfaces utilisateur interactives. Il suffit au programmeur de concevoir simplement les éléments visuels de l'application pour chaque état, après quoi React fera le reste. Cela simplifie la lecture et la compréhension du code, facilite le débogage.

Comment React fait le reste? Grâce à l'utilisation de la technologie DOM virtuelle. La détermination des parties du DOM à mettre à jour est effectuée dans les entrailles de la bibliothèque, à un niveau intermédiaire entre le code écrit par le programmeur et le vrai DOM. Grâce à cette technologie, des vitesses de rendu de page élevées peuvent être garanties.

La bibliothèque React est conçue de manière à ce que les technologies utilisées dans la pile d'outils de développement n'aient pas d'importance. React-frontend peut être «vissé» à n'importe quoi. Par exemple, les backends basés sur Node.js , Ruby on Rails , Spring Boot , PHP, etc. Cette bibliothèque est complètement neutre par rapport à ce avec quoi elle devra interagir.

Pourquoi certains appellent React une "bibliothèque" et certains appellent un "framework"? Pour créer une certaine application, avec React, vous devez utiliser des bibliothèques supplémentaires utilisées pour contrôler l'état de l'application, pour le routage et pour interagir avec diverses API. Si vous créez un modèle de projet React à l'aide decreate-react-app - il ne disposera pas d'un certain ensemble d'outils que l'on pourrait attendre du cadre.

Svelte


Svelte est un outil qui a été créé afin de changer la situation dans le domaine du développement frontend. Voici une bonne vidéo sur Svelte 3, dans laquelle Rich Harris, créateur de Svelte, parle de façon très intéressante et émotionnelle de cette bibliothèque. Si vous n'avez pas encore regardé cette vidéo, je vous recommande de la regarder.

Dans cette présentation, l'histoire de la programmation réactive est bien présentée, les défauts inhérents à la mise en œuvre traditionnelle des mécanismes réactifs sont mis en évidence et la solution aux problèmes correspondants est présentée.

Une grande partie de ce qui peut être attribué aux forces de React est le fondement de Svelte. Rich Harris connaît très bien les avantages et les inconvénients des composants internes de React.

React maintient l'interface à jour et effectue d'autres actions directement dans le navigateur. Svelte fait son travail lors de la construction du projet. C'est la principale différence entre React et Svelte. Voici ce que la documentation Svelte en dit: "Svelte convertit votre application en code JavaScript parfait lors de la construction du projet, plutôt que d'interpréter le code de l'application pendant son exécution."

Svelte n'utilise pas une technique comme comparer le DOM réel et virtuel.

Le compilateur Svelte prend un composant déclaratif et le transforme en un code efficace, impératif et de bas niveau qui interagit directement avec le DOM.

Étant donné que Svelte utilise le compilateur, pas le DOM virtuel, cela permet de réduire la charge sur le navigateur, d'augmenter la vitesse des pages et de faciliter le moteur JS du navigateur pour collecter les ordures. Le navigateur n'a pas à résoudre certaines tâches lors de l'exécution du code de la page, ce qui améliore la productivité des projets.

Certes, comme React, Svelte utilise des composants écrits dans un style déclaratif. L'essentiel de la différence entre React et Svelte commence après la construction du projet Svelte.

Forces et faiblesses de React et Svelte


Parlons des forces et des faiblesses des bibliothèques étudiées.

▍ Forces de React


  • Fort soutien communautaire.
  • Beaucoup de bibliothèques pour tester le code écrit basé sur React.
  • Prise en charge de TypeScript.
  • Outils de développement de qualité.
  • , .
  • React-.

▍ Svelte


  • , , Svelte.
  • - (HTML, CSS, JS).

    • JSX .
  • .

    • Svelte- 40% , React-.
  • ( ).
  • .

▍ React


  • DOM — .
  • .
  • .
  • - React.
  • JSX- .

▍ Svelte


  • ( React) .
  • TypeScript.
  • , , , .
  • , Svelte ( , ).


Revenons à notre question: «Dois-je arrêter de perdre du temps à apprendre React et commencer à traiter avec Svelte?»

Honnêtement, j'ai commencé à travailler sur cet article, espérant arriver à la conclusion que Svelte est une technologie trop jeune et qu'il ne vaut pas la peine d'investir particulièrement de temps dans son étude. Mais après avoir compris ce qui se passait, après être entré dans les bases, j'étais très intrigué et impressionné par ce qui m'était révélé, par le type de dynamique de Svelte que je ressentais.

Il est incontestable que les projets Svelte ont de très bonnes performances.

Les idées derrière Svelte semblent audacieuses et progressistes. La taille de la communauté Svelte augmente. Je suis sûr que le succès des outils frontaux (ainsi que l'étendue de leur distribution) dépend fortement de la communauté et de la façon dont les développeurs adoptent ces outils.

En conséquence, nous pouvons dire que si Svelte et tout ce qui concerne cette bibliothèque continue de se développer au même rythme, nous pouvons nous attendre à une large diffusion de cette technologie.

Bien sûr, Svelte ne fait que commencer son voyage, donc nous ne connaissons pas encore ces problèmes, et il peut y en avoir beaucoup qui apparaîtront inévitablement lors de la mise en œuvre de Svelte dans des projets réels. Nous ne savons pas comment les programmeurs contourneront ces problèmes, comment les développeurs de bibliothèques l’amélioreront.

Lorsque la bibliothèque React est apparue pour la première fois, elle ressemblait à un outil de pointe sans aucun inconvénient. Mais, avec le développement et la diffusion de React, il s'est avéré que les développeurs Web doivent faire face à diverses situations difficiles, ils doivent rechercher des solutions de contournement, des compromis. Et les développeurs de la bibliothèque elle-même doivent également travailler dur pour l'améliorer.

Je suis sûr que Svelte attend la même chose. Après tout, le monde du développement Web est extrêmement volatil.

Si vous n'êtes pas encore prêt à quitter React, je vous conseille au minimum de surveiller de près Svelte. Cette bibliothèque peut devenir un concurrent puissant pour réagir beaucoup plus rapidement que vous ne l'imaginez.

Chers lecteurs! Qu'est ce que tu pense deSvelte?

More articles:


All Articles