Le frontend moderne a parcouru un long chemin depuis l'époque de jQuery et des pages HTML régulières. Nous avons maintenant des assembleurs, des gestionnaires de packages, une approche de composants, SPA, SSR et bien plus encore.
Il semble que nous ayons tout ce qui est nécessaire pour le bonheur. Mais l'industrie va de l'avant. Je veux vous parler du framework Svelte compilé et de ses avantages par rapport aux analogues.
Image par Andrew Walpole
Tendances Google
Pour comprendre la situation actuelle dans le front-end, j'ai analysé la popularité des requêtes dans Google Trends pour les mots-clés React, jQuery, Vue, Angular en Russie au cours des 5 dernières années.
Tendances Google
Au cours des 5 dernières années, le nombre de requêtes liées à jQuery a considérablement diminué, laissant la place aux frameworks de composants. Bien que jQuery ait perdu du terrain, il reste un outil de développement populaire.
À partir de ce graphique, nous pouvons conclure que les bibliothèques de composants ont remporté le premier rôle, et React est le leader en Russie.
Marché du travail
Nous écrivons du code non seulement pour nous-mêmes, mais aussi pour de l'argent. Surtout pour l'argent. Par conséquent, il est insensé de considérer la popularité des cadres indépendamment du marché du travail.
Par le nombre de postes vacants sur hh, React est en première place, suivi de jQuery et d'autres bibliothèques de composants. Si nous regardons le nombre de candidats qui ont indiqué les bibliothèques en question dans leurs compétences clés, jQuery connaît 5 fois plus de candidats que React. Et 15 fois plus grand que Angular.
Marché du travail
Les conclusions suivantes peuvent être tirées de ce graphique:
- Les cadres de composants sont les plus populaires parmi les employeurs, le plus populaire d'entre eux est React.
- Parmi les candidats, la bibliothèque la plus courante est jQuery.
Ainsi, les frameworks de composants ont gagné. Frontend a résolu les problèmes rencontrés par les développeurs lors de jQuery. Mais de nouvelles approches suscitent de nouveaux problèmes. Quels problèmes est-ce que je vois?
- Performance.
En janvier de cette année, Google a annoncé la possibilité de publier des applications PWA sur google play, ouvrant la voie à javascript dans le magasin d'applications natif. Cela impose une certaine responsabilité aux développeurs, car les utilisateurs attendent les performances des applications natives, il ne devrait pas y avoir de différence pour le consommateur.
Javascript conquiert également les appareils de faible puissance. Ceci est une télévision intelligente, regardez, IoT. De tels appareils ont un budget limité de mémoire et de processeur, de sorte que les développeurs ne peuvent pas se permettre de gaspiller leurs ressources sur l'utilisateur.
Au travail, nous avons de l'expérience dans l'exécution d'applications React sur un hub Internet. Cela s'est avéré moyen. - Seuil d'entrée élevé.
Comme nous l'avons vu ci-dessus, la plupart des demandeurs d'emploi pointent vers des compétences jQuery, ne réagissent pas. La maîtrise des concepts React est beaucoup plus difficile que de se connecter à une page jQuery et de commencer à créer. - Dépendance du cadre.
Si vous avez une bibliothèque de composants écrite dans React, il est peu probable que vous puissiez la réutiliser dans un projet Vue ou Angular. Vous devenez otage de l'écosystème.
Svelte. Arôme vanille.
En avril de cette année, la troisième version du framework compilé Svelte a été publiée.
Svelte offre aux développeurs la possibilité d'écrire du code déclaratif de haut niveau qui, après la compilation, se transforme en code impératif de bas niveau. Cela permet également de faire un tremblement d'arbre efficace et, par conséquent, permet d'envoyer un paquet minimal au client.
Voyons quelles solutions Svelte propose pour les problèmes sondés.
Étant donné que React est la bibliothèque la plus populaire de Russie, d'autres exemples seront disponibles sur React.
1. Performance
Si vous commencez à vous familiariser avec la nouvelle bibliothèque, alors vous commencerez probablement la visite avec une liste de tâches. C'est une tâche assez simple, qui est souvent plus facile à écrire en vanille. Si vous souhaitez approfondir le cadre, un examen de Real World Application est un excellent choix. Il s'agit d'un blog qui est essentiellement un clone de Medium. Il y a l'enregistrement, l'autorisation, la création de messages, les commentaires, les likes. Les spécialistes du framework écrivent l'implémentation de la fonctionnalité et l'ajoutent à la collection Real World Application .
Un article sur la comparaison de Real World Application écrit dans différents cadres a été publié sur FreeCodeCamp.
Si nous regardons la taille du bundle final, Svelte surpasse ses concurrents. Seulement 9,7 Ko de code sont envoyés au client. Par conséquent, le transfert de données, l'analyse et le traitement de votre code prennent moins de temps.
Comparaison de la taille du bundle Real World Application
Et le meilleur code n'est pas du code écrit.
Si nous examinons le nombre de lignes de code nécessaires pour écrire les fonctionnalités de l'application, alors Svelte aura besoin d'environ 1 000 lignes et React d'environ 2 000 lignes. Moins il y a de code dans votre application, moins de bogues et une prise en charge plus facile.
Comparaison de la taille du code d'application dans le monde réel
Jetons un coup d'œil à la performance. js-framework-benchmark propose une comparaison des performances de rendu parmi les frameworks frontaux. Le test consiste à dessiner un tableau avec un grand nombre de lignes. D'autres manipulations avec ce tableau sont effectuées: mise à jour partielle ou complète, création, nettoyage, suppression de lignes.
Au moment de la mise à jour, Svelte affiche l'heure la meilleure ou comparable. Svelte est très équilibré, il n'y a pas de distorsions lors de l'exécution de différents types d'opérations.
Comparaison du temps d'exécution de la mise à jour, ms
Si nous regardons la quantité de mémoire consommée, Svelte est la moins vorace parmi les bibliothèques considérées.
Comparaison de la quantité de mémoire consommée, Mo
Je n'avais pas l'habitude de prendre un mot et j'ai décidé de tout vérifier moi-même. J'ai trouvé l' implémentation du benchmark DBMonster pour le front-end et réécrit l'implémentation sur React 16.8 et Svelte 3. Le test consiste à restituer le tableau puis à mettre à jour les lignes.
À quoi ressemble le test DBMonster?
Pendant le test, Svelte a consommé 10 Mo de mémoire en moins et mis à jour 10 ms plus rapidement que React.
Svelte / réagir
Les tests ci-dessus sont synthétiques, mais nous pouvons en conclure que lors du développement sur Svelte, vous sortirez de la boîte:
- Taille de paquet plus petite
- Moins de consommation de mémoire
- Rendu plus rapide.
2. Seuil d'entrée élevé
Si nous regardons le composant le plus simple sur React, alors vous devez importer React lui-même, écrire une fonction qui retournera le balisage et exportera votre composant. Total 3 lignes de code.
import React from 'react'; const Component = () => (<div>Hello</div>); export default Component;
Si nous regardons l'exemple le plus simple d'un composant sur svelte, alors vous écrivez simplement le balisage. Total 1 ligne de code.
<div>Hello</div>
À strictement parler, le composant Svelte le plus simple est un fichier vide. Cela permet de créer un modèle pour votre application à partir de fichiers vides, puis de commencer le développement. Dans ce cas, rien ne se cassera.
Vous pouvez également prendre la disposition reçue du typographe et l'utiliser immédiatement comme composant Svelte sans transformations supplémentaires. Le html valide est un composant Svelte.
Je veux partager un exemple d'une interview sur la position de développeur de réaction moyenne.
setFilter() { this.switchFlag = !this.switchFlag } ... <button onClick={setFilter}>Filter</button>
Le candidat a tenté d'enregistrer l'état du bouton de filtre directement dans la propriété de classe. React, malgré son nom, n'est pas suffisamment réactif pour répondre à de tels changements. Cela suggère que même les développeurs intermédiaires ont du mal à obtenir les modèles de mise à jour d'état utilisés par React.
Regardons un exemple de bouton qui augmente le compteur d'un clic.
Sur React, vous avez besoin d'une variable pour conserver l'état et d'une fonction qui peut mettre à jour l'état. Ensuite, vous devez affecter un gestionnaire pour la mise à jour au bouton lui-même. Au total, j'ai obtenu 8 lignes de code.
import React from 'react'; const Component = () => { const [count, setCount] = React.useState(0) return <button onClick={() => setCount(count + 1)}> Clicked {count} </button> } export default Component;
Pour résoudre un problème similaire sur Svelte, vous avez besoin d'une variable pour stocker l'état. Plus loin dans le gestionnaire, vous modifiez simplement la valeur de cette variable. Total 6 lignes de code.
<script> let count = 0; </script> <button on:click={()=>count+=1}> Clicked {count} </button>
Compliquons un peu l'exemple. Supposons que nous ayons besoin d'un champ de saisie qui affiche son état à côté de lui.
Sur React, nous avons encore besoin d'une variable et d'une fonction pour mettre à jour l'état. Ensuite, dans le champ de saisie, vous devez transférer la valeur actuelle et affecter un gestionnaire aux modifications. Je me suis retrouvé avec 11 lignes de code.
import React from 'react'; const App = () => { const [value, setValue] = React.useState(''); return ( <React.Fragment> <input value={value} onChange={e => setValue(e.target.value)} /> {value} </React.Fragment> ); } export default App;
Pour résoudre ce problème sur Svelte, vous avez besoin d'une variable qui stocke l'état, puis effectuez simplement une liaison bidirectionnelle dans le champ de saisie. Total de 5 lignes de code.
<script> let value = ''; </script> <input bind:value={value}/> {value}
Si vous avez déjà animé la suppression d'un élément du DOM sur React, je sympathise avec vous. React nécessitera soit un wrapper qui retardera la suppression de l'élément du DOM et fera l'animation, soit l'élément restera dans le DOM, mais l'animation nécessitera le contrôle de la propriété d'affichage ou d'autres manipulations afin que l'élément ne prenne pas de place.
J'ai essayé de trouver l'implémentation la plus simple sur React, ce qui a abouti à 35 lignes de code. Si vous avez une solution plus simple, partagez les commentaires.
Fadein fadeout react import React from "react"; import "./style.css"; const App = () => { const [visible, setVisible] = React.useState(true); return ( <React.Fragment> <button onClick={() => setVisible(!visible)}>toggle</button> <div className={visible ? "visible" : "invisible"}>Hello</div> </React.Fragment> ); }; export default App;
.visible { animation: fadeIn 0.5s linear forwards; } .invisible { animation: fadeOut 0.5s linear forwards; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
Sur Svelte, un composant similaire ne nécessite que 8 lignes de code. Svelte possède un module intégré pour gérer les animations. Vous importez le type d'animation souhaité, puis dites comment animer votre composant lors de l'ajout et de la suppression.
<script> import { fade } from 'svelte/transition'; let visible = true; </script> <button on:click={()=>visible=!visible}>toggle</button> {#if visible} <div transition:fade>Hello</div> {/if}
La compilabilité permet à Svelte de fournir des abstractions intéressantes au développeur. Et si vous ne les utilisez pas, ils ne tomberont pas dans le paquet final.
Par exemple, le module de transition a une fonctionnalité de fondu enchaîné sympa qui vous permet d'animer un composant lors du passage d'un nœud DOM à un autre. En l'utilisant, vous pouvez effectuer une telle transition de tâche dans la liste des tâches.
Un autre exemple d'abstractions intéressantes est la directive use : . Il vous permet d'affecter un gestionnaire personnalisé à un élément DOM. Dans l'exemple ci-dessous, les événements de pression et de déplacement, ainsi que les événements tactiles sont traités à l'aide d'une seule fonction.
Après avoir fait connaissance avec Svelte, mes amis disent généralement qu'ils n'ont pas connu ce genre de développement frontal amusant depuis jQuery.
3. Dépendance du cadre
Lorsque React est arrivé, il y avait beaucoup de widgets jQuery sur le Web. Trouver le bon composant sur React a été difficile. Ensuite, des wrappers pour les widgets jQuery ont commencé à apparaître, qui étaient capables de synchroniser React et jQuery. Après cela, les composants écrits sur React lui-même ont déjà commencé à apparaître.
Maintenant, une situation similaire avec React lui-même. Il existe un tas de solutions et de bibliothèques prêtes à l'emploi qui ne vous permettent pas de transférer sans difficulté vers un autre framework.
Que propose Svelte? Après la compilation, votre code se transforme en JS standard, qui ne nécessite pas d'exécution. Cela permet d'utiliser le composant Svelte dans d'autres frameworks. Vous avez juste besoin d'un emballage universel. Par exemple, un adaptateur pour React et Vue svelte-adapter . En encapsulant le composant dans l'adaptateur, vous pouvez utiliser l'élément en tant que composant normal.
import React from "react"; import SvelteSpinner from "svelte-spinner"; import toReact from "svelte-adapter/react"; const Spinner = toReact(SvelteSpinner, {}, "div"); const App = () => <Spinner size={50} />
Svelte prend en charge la compilation dans un élément personnalisé, ce qui élargit encore le champ d'application des composants. Vous pouvez voir la prise en charge des éléments personnalisés avec divers cadres sur custom-elements-partout .
Expérience personnelle
Je ne peux pas encore écrire chez Svelte au travail, car nous sommes étroitement liés à l'écosystème React, mais j'ai des projets personnels.
J'ai déjà écrit comment j'ai publié mon application Metalz sur Google Play.
Selon mes sentiments, Svelte vous permet d'écrire du code plus concis et compréhensible, tout en fournissant une large gamme d'outils pour simplifier l'implémentation.
Inconvénients
Comme tout framework jeune, Svelte possède un petit écosystème de solutions toutes faites et quelques articles où vous pouvez trouver les meilleures pratiques. Par conséquent, je ne recommanderais pas de prendre immédiatement Svelte pour de grands projets, car vous pouvez vous retrouver dans une impasse architecturale.
Essayez Svelte sur de petits projets, je suis sûr que vous l'aimerez.