Bonjour, Habr!
Aujourd'hui, nous avons voulu vous proposer un texte intéressant sur l'évolution du front-end à notre époque, ou plutôt, selon l'auteur, après
React . Probablement, le message pourrait être plus volumineux, donc, si l'auteur écrit une suite, nous essaierons également de ne pas manquer et de traduire.
Bienvenue au chat!
A peine apparue,
React a immédiatement changé les règles du jeu. Il a inauguré une nouvelle ère dans le développement côté client. Son flux de données unidirectionnel, JSX et sa manière déclarative de définir les représentations étaient tout simplement fous. React a rapidement gagné en popularité, et encore aujourd'hui, 6 ans plus tard, il reste l'une des bibliothèques les plus populaires pour le frontend.
Cependant, l'écosystème frontal se développe rapidement; de nombreux projets intéressants sont en cours de développement dans ce domaine. Je suis constamment à la recherche de la prochaine technologie qui changera à nouveau les règles du jeu. J'aime quand un étranger d'hier entre en jeu, sapant complètement nos approches habituelles du travail - comme React l'a fait il y a 6 ans.
La joie de trouver une nouvelle technologie qui vous aide à devenir plus productif que jamais n'a pas de prix. Il est très important d'étudier ce qui existe en dehors de React, même si vous vous considérez comme un spécialiste React. Un bon développeur choisit les outils nécessaires pour résoudre le problème. Il doit connaître de nombreux paradigmes, langages et outils.
Récemment, j'ai fait quelques recherches, expérimenté et trouvé des bibliothèques vraiment intéressantes et de nouvelles normes Web qui, à mon avis, ont du potentiel. Tout ce dont je vais parler dans cet article est disponible pour une utilisation en production aujourd'hui. Ces technologies ne peuvent pas être qualifiées de «première ligne», mais jusqu'à présent, elles n'ont pas été largement adoptées.
Svelte
Commençons par des cadres complètement nouveaux qui inculquent de nouvelles façons de penser, plutôt que de transformer quelque chose qui existe déjà. Voici Svelte. Il s'agit d'un nouveau paradigme dans l'écosystème client.
Alors pourquoi Svelte est-il unique? Fondamentalement - pour deux raisons. Tout d'abord, des packages incroyablement petits y sont créés, car l'environnement d'exécution n'y est pas inclus. Les partisans de Svelte appellent cela «l'environnement d'exécution zéro». Le temps d'exécution de React pèse environ 100 kb, et cette quantité est ajoutée au-delà du package de chaque application React.
La deuxième vertu importante de Svelte est sa syntaxe. C'est tellement minime, comme s'il n'y avait pas du tout de syntaxe. Nous y reviendrons.
Svelte emprunte beaucoup à React et
Vue . Si vous avez de l'expérience avec React, vous en savez déjà beaucoup et vous aurez à peine besoin de temps pour maîtriser Svelte.
Regardons du code pour donner une impression de Svelte.
Pour définir un nouveau composant, un nouveau fichier est créé et le nom de ce fichier sera le nom du composant. Ce fichier aura une section de script facultative, une section de styles facultative et, surtout, le modèle HTML lui-même. Svelte n'utilise pas JSX, mais utilise son propre langage de modèle.
<script> export let counter;
Un peu comme Vue, mais plus simple.
La syntaxe ... et il n'y a pas de syntaxe particulière, c'est juste du pur JavaScript. Vous souhaitez définir un statut? Augmentez simplement la variable de
counter .
<script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button>
Pas de
this.setState . Pas de crochets
useState . Juste javascript. Avec de si petits exemples, il est difficile d'évaluer l'intégralité du minimalisme syntaxique. J'ai programmé cela pendant plusieurs heures, et cela s'est avéré superproductif, car pour résoudre le problème, j'ai dû écrire beaucoup moins de code. Il me semblait que je courais et que quelqu'un d'autre me poussait dans le dos. Comme si je trichais. Cette syntaxe minimaliste est une décision prise consciemment par les créateurs de Svelte. Ils expliquent eux-mêmes dans un article pourquoi écrire moins de code. Voici une excellente citation de
cet article :
... avec une augmentation de la base de code, le temps pour développer un projet et le nombre de bugs augmentent de façon quadratique, plutôt que linéaire. - Écrivez moins de code
Le composant le plus important d'un framework web est sa documentation. React est célèbre pour sa merveilleuse documentation, beaucoup l'apprennent uniquement sur les quais. La documentation de Svelte est également très bonne, pour autant que je puisse voir. En tant que nouveau venu dans Svelte, j'aime surtout les
exemples de la documentation de ce framework:
Dans de nombreux cas, je sais à peu près ce dont j'ai besoin. Par exemple, changez l'état d'un composant, ajoutez des gestionnaires d'événements, obtenez un état global (comme dans Redux). Ensuite, je dois voir rapidement comment cela se fait. La section des exemples est un exemple de ce type. Je n'ai pas besoin de rechercher des articles sur Google sur un blog ou de regarder des annonces sur Github. Parcourez simplement la section que vous souhaitez. La beauté!
Il y a même quelque chose de similaire à Gatsby et Next.js. Le truc s'appelle
Sapper , vous commencez à coder dessus très rapidement. Vous permet de créer des applications d'une seule page avec des pages HTML générées statiquement, ce à quoi ressemble Gatsby / Next.js.
Svelte a également une alternative à Redux, appelée magasins. Ils sont incroyablement minimalistes. Le stockage est créé comme ceci:
import { writable } from 'svelte/store'; export const count = writable(0);
Ensuite, le référentiel peut être mis à jour comme ceci.
count.set(0);
Il n'y a pas de code stéréotypé du tout, et toute cette fonctionnalité est entièrement intégrée à Svelte - pas de dépendances supplémentaires. Rappelez-vous maintenant combien de problèmes avec l'ajout de Redux dans le projet React.
Quel est le lien entre l'équipe React et Svelte?
L'équipe React n'est pas aussi enthousiaste à propos de Svelte que moi. Ils pensent que l'amélioration des performances associée à l'abandon de l'environnement d'exécution est négligeable. Seulement dans des cas très spécifiques, par exemple, lorsque vous travaillez avec des widgets intégrés, etc. un tel jeu en vaut la chandelle. De plus, nous avons Gatsby et Next, donc, selon la communauté React, une légère augmentation de la vitesse signifie encore moins (désolé, je ne me souviens pas où je l'ai lu. Si vous me trouvez, faites-le moi savoir sur Twitter, je suis
@karljakoblind ). Dans ce cas, je soutiens que toute amélioration de la vitesse est importante, et écarter les économies de 100 Ko sur chaque package uniquement parce que «cela n'est utile qu'avec des widgets» est un mauvais argument. Pour rendre le Web grand et abordable, nous devons faire toutes sortes d'optimisations de performances que nous pouvons. Si vous avez déjà été impliqué dans le réglage fin d'une application pour améliorer ses performances, vous savez à quel point même les plus petites améliorations signifient. C'est la somme de toutes les petites améliorations qui s'ajoutent à un téléchargement ultra-rapide, qui se produit comme par magie.
Alors, dois-je essayer Svelte?
La prochaine fois, lorsque je lancerai un projet qui fonctionnerait bien sur React, je réfléchirai sérieusement à l'utilisation de Svelte à la place. En étudiant Svelte, j'ai été surpris de la productivité de ce framework, même si vous ne lisez pas la documentation. Tout ce que j'ai fait, c'est travailler à travers des exemples et m'entraîner un peu avec Sapper - et il me semblait quand même que le travail était plus productif qu'avec React. Je pense qu'une telle productivité élevée est en quelque sorte liée à la syntaxe minimaliste. Il est également très précieux que, sans aucun travail supplémentaire, nous obtenions de tels packages compacts. Les applications qui se chargent rapidement sont très populaires auprès de nos utilisateurs et de Google!
Svelte a-t-il des défauts? Honnêtement, un seul vient à l'esprit. Le fait est que Svelte est encore nouveau et peu utilisé. Par conséquent, sa communauté est limitée et, peut-être encore plus important, il n'y a pas (encore?) Beaucoup d'entreprises qui ont besoin de spécialistes Svelte. Si vous êtes un développeur junior et que vous recherchez un emploi, je pense que vous êtes plus sage d'apprendre d'abord React. Cependant, si vous êtes un développeur senior (ou un junior, et que vous avez beaucoup de temps), je vous recommande fortement de regarder Svelte.
Plus de détails
svelte.dev - site officiel
Vidéo: Rich Harris -
Repenser la réactivitéComposants Web
Peut-être que les composants Web sont la prochaine grande technologie? Je pense qu'elle a définitivement du potentiel. Alors, quels sont les composants Web?
Les composants Web sont un ensemble
de normes w3c pour la création de nouvelles balises HTML personnalisées. En utilisant ces normes, vous pouvez créer n'importe quoi, des widgets aux grandes applications.
Et dans la plupart des principaux navigateurs, cette nouvelle norme est prise en charge:
Dans Internet Explorer, ces fonctionnalités sont prises en charge par les polyfills.
En créant un composant Web, vous créez un nouvel élément DOM natif. La situation n'est pas comme dans React, où un «élément DOM virtuel» est créé, qui est ensuite implémenté dans le DOM.
<my-component hello="world"></my-component>
L'aspect le plus agréable de Svelte est qu'il nettoie l'environnement d'exécution, et il en va de même pour les composants Web. Lors de la création d'un élément DOM natif, vous n'avez pas besoin d'un environnement d'exécution; un navigateur normal suffit pour lancer l'application.
Comme ce ne sont que des éléments DOM, n'importe quelle page Web peut les utiliser. Vous pouvez créer des widgets ou des applications entières qui seront ensuite intégrées aux applications existantes. Peu importe ce que vous programmez - Angular, React, Vue ou quelque chose de complètement différent. Il s'agit des éléments DOM les plus courants, tels que la balise <div>.
<body> <my-app name="Hello world"></my-app> <script src="/my-app.js" type="module"></script> </body>
Cela ouvre de nouvelles opportunités et de nouvelles approches à l'architecture des grandes offres côté client. Les
microfronts en sont un
exemple .
Vous pouvez écrire des composants Web directement, mais, en fait, du point de vue du développement, ce n'est pas une bonne pratique. Mieux vaut utiliser un framework qui compile au niveau des composants web. Deux cadres populaires de ce type sont
Stencil.js et
Polymer (de Google).
Lorsque vous utilisez des composants Web, leurs packages sont très compacts car il n'y a pas d'environnement d'exécution. Jetez un œil aux repères suivants:
Avez-vous remarqué le Svelte mentionné dans cette liste? Svelte peut compiler au niveau des composants et le package qu'il génère est très petit.
Cependant, il est encore plus intéressant de voir à quel point tous les packages de frameworks de composants Web sont plus petits que les packages de frameworks "classiques", par exemple, React et Angular.
Qu'en est-il des composants Web dans React?
Bien que React puisse également compiler vers des composants Web, il ne les prend pas en charge, selon
custom-elements-everywhere.com .
Cependant, un soutien complet peut suivre; peut-être que l'équipe React est sur le point de franchir cette étape, après avoir bien
réfléchi avant de la lancer. L'une des raisons de cette évasion est que les composants Web utilisent un style impératif plutôt que déclaratif comme dans React. Peut-être qu'un jour, dans React, le support complet des composants Web apparaîtra, ou peut-être pas. En attendant, si vous avez l'intention de créer des composants Web, utilisez une bibliothèque différente au lieu de React.
Dois-je utiliser des composants Web?
Il me semble que les composants Web sont plus utiles lorsque vous les utilisez dans l'architecture microfront. Si vous travaillez dans une grande organisation, où de nombreuses équipes opèrent simultanément, en utilisant différentes bibliothèques clientes, travailler ensemble sur du code dans différentes équipes peut être une tâche non triviale. Dans ce cas, l'approche du travail est différente de celle de React. React est spécialisé dans l'orchestration d'une application entière, plutôt que dans la création de widgets. Comme vous pouvez le voir, les composants React et Web peuvent coexister pacifiquement entre eux.
Les composants Web présentent à peu près les mêmes inconvénients que Svelte. Si vous imposez un CV dans le but d'obtenir un emploi, les composants Web ne peuvent pas être appelés prioritaires. Au minimum, aucune priorité sur React. Mon expérience suggère que les entreprises ne sont pas si exigeantes (encore?).
Réflexions finales
Dans le développement du frontend, beaucoup de tout ce qui est cool et intéressant se passe. React n'est qu'un des cadres, et il vous suffit de naviguer dans ce qui se passe en dehors.
Si vous êtes un développeur senior et spécialisé dans le front-end, alors, bien sûr, vous sélectionnez les meilleurs outils pour travailler. C'est souvent React, mais les composants Web sont peut-être meilleurs pour votre prochain projet.