Ce post de vendredi est dédié à la traduction d'un article intéressant publié hier sur
Medium . J'ai décidé d'apprendre un nouveau genre de traductions pour moi-même, alors s'il vous plaît ne donnez pas grand-chose si quelque chose ne va pas quelque part. Et si possible, notifiez même les erreurs et les fautes de frappe dans PM.
Merci et bonne lecture!
Une histoire de la façon dont les nouvelles fonctionnalités de la plate-forme Web et des cadres compilés définissent la prochaine ère du développement Web.
Photo:
Stefan BucherAujourd'hui, des frameworks tels que
Angular ,
React et
Ember sont essentiels au développement d'applications Web complexes. Au cours de la dernière décennie (
Angular a été publié en 2010), l'utilisation de ces cadres est devenue de facto la norme pour beaucoup d'entre nous. Ils nous aident à structurer notre code, à gérer l'état des applications et à construire des interfaces complexes basées sur des composants réutilisables.
Cependant, comme vous le savez, JavaScript est la ressource Web la plus chère qui affecte directement l'interactivité de nos pages. Et la taille du code JavaScript de nos applications Web est plus grande que jamais. La page Web moyenne est supérieure à 3 Mo, ce qui est supérieur à la taille du jeu Doom original. En tant que développeurs, nous pouvons disposer d'Internet rapide et de plans tarifaires abordables, mais nos utilisateurs peuvent ne pas avoir tout cela.
Selon
Alex Russell , dépasser la taille de seulement 130 Ko pour toutes nos ressources peut signifier qu'il est impossible de respecter l'intervalle de téléchargement de 5 secondes sur un téléphone standard et un réseau mobile. Cependant, certains de nos frameworks préférés peuvent prendre plus d'eux-mêmes.
Pouvons-nous utiliser les avantages que nous offrent les frameworks, mais en même temps éviter de gonfler le code? Avoir une commodité pour le développeur et en même temps, une excellente expérience utilisateur? J'y crois. Et je crois que nous entrons dans une nouvelle ère de développement web, qui sera déterminée par cela ... Une ère où nos frameworks commenceront à disparaître.
Svelte
Un exemple de cette tendance est
Svelte , «le cadre d'interface utilisateur qui disparaît comme par magie» (article «Le cadre d'interface utilisateur qui disparaît comme par magie»
sur Habré - environ).
Svelte est un framework "au moment de la compilation" qui n'a pas d'exécution spécifique sur le client. Nous sommes habitués à envoyer de gros packages JavaScript à nos utilisateurs et nous attendons de leurs navigateurs qu'ils analysent et exécutent des scripts. Mais
Svelte ne fonctionne pas comme ça. Au lieu de cela, il compile votre application en petits modules JavaScript vanille autonomes. En d'autres termes, au moment où l'application sera livrée à vos utilisateurs,
Svelte disparaîtra!
Pinafore , un client
Mastodon PWA pour le réseau social décentralisé créé par
Nolan Lawson de Microsoft, est un exemple d'application développée à l'aide de
Svelte . Pinafore montre
des résultats très rapides dans le test de page Web et un score de 98 points dans
Lighthouse .
Svelte , en soi, est très minimaliste, mais il y a aussi
Sapper (
S velte
App Mak
er - environ) - un cadre complet basé sur lui. Inspiré par Next.js,
Sapper inclut le rendu côté serveur, la séparation de code, les styles étendus, le routage déclaratif et le rechargement à chaud. De plus, le modèle de démarrage
Sapper fournit PWA par défaut, avec un manifeste d'application Web et un travailleur de service avec mise en cache automatique des ressources.
J'ai demandé à Nolan ce qu'il pensait de l'utilisation de
Svelte et
Sapper . Il m'a dit que c'était un «rêve de travailler avec»
Svelte .
Sapeur est «un peu moins mature» et a eu quelques problèmes avec lui, mais il est également content. J'ai également commencé à utiliser ces deux cadres pour un nouveau projet, et jusqu'à présent, la combinaison de fonctionnalités et de vitesse de fonctionnement élevée est vraiment parfaite.
Pochoir
Svelte a inspiré un projet alternatif de Ionic:
Stencil .
Encore une fois, l'objectif est d'adopter les «meilleurs concepts des frameworks les plus populaires», mais en même temps d'obtenir de meilleures performances:
«Avec… les cadres traditionnels et les techniques de regroupement, l'équipe avait du mal à répondre aux demandes de latence et de taille de code pour les applications Web progressives qui fonctionnaient aussi bien sur les réseaux rapides et lents, sur une diversité de plateformes et d'appareils. - stenciljs.com
Pour comprendre en quoi consiste
Stencil , j'ai trouvé une
introduction utile
de Rob Bearman . Il y a aussi une
vidéo de
Maximilian . Le résultat de
Stencil est un composant Web standard (plus d'informations sur les composants Web ci-dessous), non spécifique à
Stencil . Cela signifie que vous pouvez l'utiliser en combinaison avec un autre framework si vous le souhaitez (mais cet article explique comment les frameworks disparaissent, pas se multiplient!).
Séparément, je tiens à noter que malgré le fait que la documentation
Svelte n'y prête pas beaucoup d'attention, mais le composant
Svelte peut également être compilé directement dans le composant Web (
voici un exemple - si vous définissez
customElement ici -
nous obtenons le résultat ). Cependant,
Rich Harris , le créateur de
Svelte (et
Rollup et bien d'autres choses incroyables!) M'a dit qu'il ne pensait pas qu'il y avait des avantages spéciaux à utiliser cette fonctionnalité pour le moment.
Le pochoir ressemble également au
polymère le plus connu de Google, mais il disparaît complètement à la sortie. Cependant, je n'ai pas trop utilisé Polymer pour commenter plus en détail. Peut-être mérite-t-il également une attention particulière. La dernière
version , la
3e, a commencé à utiliser les
modules ES (plus d'informations ci-dessous), au lieu des
importations HTML , et
npm au lieu de
Bower . Il existe également un
kit de démarrage PWA qui recommande
Alex Russell comme le meilleur outil pour créer des applications Web productives. Il vous donne un modèle
PRPL (Push, Render, Pre-cache, Lazy-load) dès la sortie de la boîte.
Angulaire nouvelle génération
Merci à Rich Harris de m'avoir fait savoir qu'Angular suit également cette tendance!
Angular Elements - une innovation dans
Angular 6 - vous permet d'exporter des composants Angular en tant que composants Web à réglage automatique. À l'heure actuelle, il nécessite toujours une "version minimale et autonome d'Angular", mais ils "fonctionnent sur des éléments personnalisés qui peuvent être utilisés dans des applications Web construites sur la base d'autres cadres".
De plus,
Ivy est un moteur de rendu de nouvelle génération en angulaire, conçu pour réduire considérablement la taille du code résultant. (Même si ça vaut le coup d’être regardé: dans un esprit de compétition amicale, Rich a
comparé les résultats de compilation
des composants Web de Svelte et Ivy!).
C'est très cool que les frameworks populaires adoptent cette approche, ce qui rend leur code final également plus compact. Nous espérons que de plus en plus d'applications Web passeront à une nouvelle approche, cela aura un impact important sur les performances d'Internet dans son ensemble.
De plus, il y a de plus en plus de conditions préalables au fait que nous n'aurons bientôt plus besoin de cadres. Les frameworks peuvent, bien sûr, simplifier le développement et continuer à fournir des modules complémentaires utiles, mais la plate-forme Web elle-même offre plus de fonctionnalités que jamais ...
Plateforme Web comme cadre
Dans mon article
«A Rube Goldberg Machine» et la
conversation qui a suivi, ma collègue
Ada Rose Cannon a décrit comment les nouvelles fonctions CSS et JavaScript peuvent être «considérées comme des cadres intégrés dans la plate-forme Web».
Par exemple, les propriétés personnalisées CSS (mieux connues sous le nom de variables CSS) peuvent signifier que vous n'avez plus besoin d'un précompilateur CSS comme
Sass . Et CSS Grid peut désormais vous éviter de charger Bootstrap.
«Vous n'avez pas besoin d'un framework pour utiliser CSS Grid. CSS Grid est un framework. ”
- Rachel Andrew
Composants Web
Les composants Web sont particulièrement solides et sont la clé d'une grande partie de cette tendance. Ils incluent les fonctionnalités suivantes - Éléments personnalisés, Shadow DOM et modèles HTML -
ne sont pas encore disponibles partout , mais, comme le
dit Ada , ils ont une assez bonne prise en charge, et
il existe des polyfichiers qui leur offrent une meilleure prise en charge, vous pouvez donc les utiliser aujourd'hui!
Ada et
Ruth John ont récemment développé une application Web pour visualiser la musique à l'aide de composants Web et ont
partagé leurs leçons .
En outre, vous pouvez vous sentir plus en sécurité avec de nouvelles fonctionnalités telles que les composants Web si vous utilisez le rendu côté serveur (SSR) et implémentez votre côté client avec l'
amélioration progressive .
Ma préférence personnelle est de créer une excellente expérience SSR, puis de l'améliorer en une application à page unique.
- Ada Rose Cannon
Modules ES isomorphes
Vous pouvez également utiliser des
modules ES maintenant! Encore une fois, la prise en charge du navigateur est assez bonne, et vous pouvez prendre en charge les navigateurs plus anciens en utilisant la
solution de remplacement "nomodule" .
En fait, si vous êtes d'accord avec l'approche SSR + Progressive Enhancement, vous pouvez même utiliser des modules ES sans avoir à utiliser des outils de construction pour les
transpiler vers d'autres navigateurs, car les anciens navigateurs peuvent toujours fonctionner sans JavaScript. Et en utilisant le chargeur de modules
ESM , nous pouvons également
utiliser des modules ES directement dans NodeJS .
C'est génial car nous pouvons réutiliser nos scripts sur le frontend et le backend (c'est-à-dire le "rendu isomorphe"), sans danser avec un tambourin. Nous pouvons structurer notre code frontal sans avoir à coller nos scripts ensemble, mettre de nombreuses balises de script sur une page ou utiliser des chargeurs côté client.
C'est exactement ce qu'Ada a démontré dans son
premier discours sur Twitch ce mois-ci. Il y a aussi une
entrée de blog avec des explications.
J'espère que j'ai pu partager mes réflexions alors que nous commençons à entrer dans une nouvelle ère de développement web. Une époque qui dépend moins des frameworks d'interface utilisateur traditionnels, des bibliothèques CSS et des bundlers. Une ère dans laquelle nous envoyons moins d'octets et chargeons nos applications Web plus rapidement. L'ère des cadres en voie de disparition.
Merci à Nolan Lawson, Rich Harris et Ada Rose Cannon pour leur aide et leur inspiration pour cet article. Cet article est également publié ici sur mon blog personnel.***
De moi-même, je tiens à noter que, malheureusement, pour le moment, seul Habré écrit sur
Svelte . Par conséquent, en russe, il y a beaucoup d'informations sur ce merveilleux cadre.
Si vous l'avez rencontré pour la première fois, vous pourriez être intéressé à lire d'autres articles sur ce sujet:
Qui souhaite suivre activement son développement - bienvenue sur la chaîne de télégrammes en langue russe
SvelteJS . Nous serons ravis de vous voir!
Félicitations à tous pour l'été et les victoires de notre équipe! Bon week-end! Hourra!