Bonjour ^_~ ;
Je m'appelle Lamine et je suis ravi de partager mon premier article technique explorant les points forts de ViteConf 2024. En tant que passionné de technologie se plongeant dans la rédaction technique, j'attends avec impatience vos commentaires et suggestions pour m'aider à améliorer mon futur contenu.
Avant de plonger dans les détails de la conférence, explorons ce que sont Vite et ViteConf ?
Vite est un outil de construction front-end de nouvelle génération créé par Evan You (le créateur de Vue.js). Il améliore considérablement l'expérience de développement Web en offrant un remplacement de module à chaud (HMR) ultra-rapide via un serveur de développement utilisant des modules ES natifs. Avec sa configuration simple, Vite regroupe le code à l'aide de Rollup et exploite SWC (Speedy Web Compiler) pour une transformation efficace du code.
ViteConf est un événement annuel en ligne gratuit qui rassemble la communauté Vite dans un format engageant et interactif. Experts et passionnés se réunissent pour partager leurs connaissances et présenter les nouvelles fonctionnalités. Cette année (3 et 4 octobre 2024), c'était la troisième édition de l'événement, proposant 43 ateliers dans un marathon de 12 heures.
Résumer 12 heures de contenu avec beaucoup de détails techniques est un défi. Mais j'ai essayé de le résumer au maximum sans omettre des informations importantes. Pour simplifier notre article, j'ai conservé les titres originaux de la plupart des conférences ViteConf et les ai organisés en 8 sections principales :
Notre événement a apporté de grandes annonces qui ouvrent la voie à l’avenir de Vite. Des conférenciers visionnaires ont présenté des outils et des plates-formes révolutionnaires susceptibles de remodeler le développement Web. Passons aux faits saillants !
Evan You a annoncé Void Zero, une nouvelle société axée sur la création de la prochaine génération d'outils JavaScript. La société a levé 4,6 millions de dollars en financement de démarrage, dirigé par Accel et Amplify Partners, avec la participation de fondateurs expérimentés dans le domaine des outils de développement. Void Zero s'efforce de concrétiser la vision d'Evan consistant à créer une chaîne d'outils unifiée, hautes performances et composable, indépendante de l'exécution pour le développement JavaScript. Evan a également discuté des progrès actuels chez Void Zero et a partagé quelques tests impressionnants qui ne manqueront pas de surprendre.
Eric Simons, co-fondateur de StackBlitz, a annoncé Bolt.new, un outil révolutionnaire prêt à remodeler le paysage du développement Web, en tirant parti des capacités établies de la technologie WebContainer de StackBlitz. Bolt.new fournit aux développeurs un environnement complet dans le navigateur qui permet la création, le débogage, la correction des erreurs et le déploiement instantanés de projets, le tout alimenté par le grand modèle de langage de pointe Claude et V0.
Eric a expliqué comment Bolt.new est conçu pour éliminer le temps de configuration. En saisissant une simple invite, les développeurs peuvent générer des applications entièrement configurées directement à partir du navigateur, ce qui change véritablement la donne. Avec la gestion intégrée des paquets et la gestion des dépendances, la puissance démontrée dans son exposé était sans précédent. La meilleure façon de saisir son potentiel est d’essayer Bolt.new par vous-même.
Ne s'arrêtant pas à cette annonce, Eric a également révélé une autre mise à jour majeure : Bolt.new Core est désormais open-source et disponible sur github.
Après l'introduction d'Evan sur OXC et Rolldown et leur intégration prochaine avec l'environnement Vite, Boshen Chen, le créateur du projet Oxc, a présenté OXC, une chaîne d'outils JavaScript ambitieuse, performante et entièrement intégrée écrite en Rust, conçue pour considérablement améliorer les performances et l’expérience des développeurs. Il se compose de :
Les futurs composants prévus comprennent :
Boshen a également présenté Rolldown, le futur bundler pour Vite, qui utilise OXC comme moteur principal. Rolldown offre des performances élevées et prend en charge une gamme de fonctionnalités, notamment le tremblement d'arborescence, le fractionnement de code et la compatibilité des plugins.
La prochaine étape implique une intégration plus approfondie de Vite avec OXC et Rolldown, ce qui entraînera des améliorations significatives des performances, une expérience de développement plus cohérente et la capacité de gérer des applications Web encore plus volumineuses et plus complexes.
Matias (Patak) a dévoilé l'API Environment, une évolution significative conçue pour améliorer la flexibilité et les performances de Vite. Cette API permet aux développeurs de définir plusieurs environnements (exemple : client, serveur, périphérie) au sein d'un seul projet Vite, rationalisant ainsi les processus de développement et de déploiement. Il a noté l'afflux de méta-frameworks comme Nuxt, Remix et TanStack depuis la première année de ViteConf.
Les principaux points à retenir de la conférence sont :
Tomek a présenté TutorialKit, un outil open source innovant destiné à redéfinir la création de didacticiels interactifs dans l'écosystème JavaScript. Répondant aux limites de la documentation actuelle, TutorialKit offre une expérience d'apprentissage pratique et organisée qui intègre des guides d'utilisation avec des démonstrations et des exercices structurés.
Propulsé par WebContainers, TutorialKit s'appuie sur les informations de frameworks tels que Svelte, Angular et Nuxt. Avec une seule commande, npm create tutoriel, les développeurs peuvent générer rapidement un projet de didacticiel complet, avec des descriptions de leçons, des extraits de code et des aperçus en direct en moins d'une minute.
TutorialKit est hautement personnalisable, proposant des thèmes sombres et clairs et un terminal interactif, permettant aux apprenants de s'engager pleinement dans le matériel. Cet outil permet aux développeurs, aux enseignants et aux communautés de créer des ressources pédagogiques plus attrayantes directement dans le navigateur.
Mohammad a présenté pkg.pr.new, un outil permettant aux responsables de la bibliothèque npm et aux utilisateurs de prévisualiser les branches, correctifs ou fonctionnalités inédits sans configuration complexe. Avec une simple commande comme :
npm je https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
les développeurs peuvent tester instantanément des versions spécifiques, en contournant les méthodes lourdes telles que les versions continues.
Les prochaines étapes incluent des intégrations avec ESM.sh pour la prise en charge du CDN et une interface utilisateur personnalisée, étendant les fonctionnalités de pkg.pr.new à des environnements comme Deno et Vue Playground.
Dans cette section, nous explorerons de nouvelles intégrations qui rendent Vite encore plus adaptable. De la prise en charge angulaire aux tests améliorés et aux flux de travail CI, ces mises à jour révèlent comment Vite étend sa portée et simplifie l'expérience des développeurs.
Yann Braga, responsable de Storybook chez Chromatic, a dévoilé de nouvelles intégrations importantes avec Vite et Vitest, transformant le développement et les tests de composants d'interface utilisateur. Ces mises à jour introduisent un plugin Vitest qui convertit les histoires Storybook en tests fonctionnels, augmentant ainsi sans effort la couverture du code sans cas de test supplémentaires. La capacité de débogage visuel du plugin permet aux développeurs d'inspecter les tests défaillants en temps réel depuis leur environnement CI, favorisant ainsi une collaboration transparente en équipe.
Dans la version 9, Storybook prévoit d'unifier les tests visuels, d'accessibilité et fonctionnels dans une interface utilisateur cohérente et de passer à des versions uniquement ESM pour réduire la taille de l'installation et améliorer les performances. Ces avancées renforcent l’engagement de Storybook en faveur de flux de travail frontaux efficaces et rationalisés et de tests complets de composants.
Katerina Skroumpelou, ingénieure senior chez Nx, a souligné l'efficacité que Nx apporte aux projets Vite. Elle a commencé par expliquer comment Nx optimise les flux de travail CI et automatise les tâches complexes, rendant les processus de construction plus rapides et plus rationalisés.
Ensuite, elle a démontré l'utilisation de Nx avec un projet React Vite. La démo a montré comment Nx améliore les performances grâce à des fonctionnalités telles que la mise en cache et l'intégration de Nx Cloud. Nx Cloud permet la mise à l'échelle et la relecture des tâches, offrant une exécution parallèle pour augmenter la vitesse. La commande « nx affectée » a également été présentée, exécutant intelligemment des tâches uniquement pour les parties modifiées de la base de code, optimisant davantage CI.
Katerina a souligné que les plugins Nx, comme ceux pour ESLint et Vite, simplifient les migrations et maintiennent le code de manière transparente sans perturber les structures existantes. Elle a conclu en montrant comment configurer GitHub Actions pour CI, démontrant ainsi la capacité de Nx à répartir efficacement les tâches entre les agents.
Irina Nazarova, qui dirige la société de conseil Evil Martians, a expliqué comment Vite Ruby a transformé l'expérience des développeurs dans les applications Rails, offrant une meilleure alternative à l'approche « No Build » de Rails. Vite Ruby a été mis en œuvre avec succès dans des entreprises comme Power Home Remodeling Group et ClickFunnels, permettant des configurations frontales plus complexes tout en conservant la philosophie conviviale de Rails pour les développeurs.
Zhao Jinjiang, ingénieur logiciel chez Bit et membre de l'équipe Vue.js Conf, a discuté de la transition de Bit de Webpack/Jest à Vite/Vitest. Ce commutateur a facilité le développement axé sur les composants en autorisant des environnements de développement personnalisés avec des tests intégrés, des flux de travail de construction et de test optimisés et une flexibilité améliorée grâce aux API Node.
Dans cette section, nous verrons comment Vite alimente les principaux frameworks tels que SolidJS, Svelte et Remix. Ces développements démontrent comment Vite génère de nouvelles fonctionnalités et améliorations de performances adaptées aux besoins de chaque framework.
Ryan Carniato, créateur de SolidJS, a expliqué comment SolidStart (qui a atteint la version 1.0 en mai) a évolué pour unifier le développement client et serveur. Construit sur Vite, Vinxi et Nitro, SolidStart a introduit des fonctions de serveur et est devenu le premier framework JavaScript doté d'une architecture simplifiée et sans routeur, atteignant une taille de bundle incroyablement légère de 4,7 Ko.
Grâce au financement de l'équipe Chrome, Ryan et Alexis ont développé Seroval, un puissant outil de sérialisation capable de gérer les données asynchrones et le streaming. Cela a conduit à une avancée significative : les mutations à vol unique, qui combinent efficacement les actions et la récupération de données en une seule requête transparente. Ils ont démontré ce concept avec une démo interactive du tableau Trello, présentant les gains de performances.
Ryan a également souligné l'importance de l'écosystème de Vite pour permettre le prototypage rapide et a souligné comment il a influencé le développement de Solid 2.0.
Lukas Taegert-Atkinson a présenté les améliorations récentes et à venir pour Rollup :
Pedro Cattori et Mark Dalgleish ont présenté les améliorations apportées par la migration de Remix vers Vite.
Pedro s'est concentré sur l'isolation du code du serveur, expliquant comment ils ont cessé de s'appuyer sur l'arborescence pour supprimer le code du serveur des bundles clients. Au lieu de cela, ils ont implémenté des transformations Remix explicites et introduit des suffixes de fichier .server, qui fournissent des erreurs claires au moment de la construction lorsque le code du serveur pourrait fuir vers le client.
Mark a couvert les améliorations de la gestion CSS, montrant comment elles ont évolué à partir des importations CSS originales basées sur les URL de Remix pour tirer parti des fonctionnalités intégrées de Vite. Cela comprenait un meilleur découpage CSS via Rollup et une solution pour le mode développement qui utilise les chaînes de requête URL de Vite pour les importations CSS, garantissant un comportement cohérent entre le développement et la production tout en évitant les flashs de style.
Ces changements ont apporté une meilleure expérience aux développeurs, une séparation de code plus robuste et une gestion CSS plus efficace au framework Remix, démontrant comment la migration Vite les a poussés à améliorer leur architecture de base.
Shai Reznik ouvre son discours avec une introduction amusante et ludique, se décrivant comme un « showman légendaire » avec des affirmations impressionnantes sur ses capacités techniques.
Dans l'exposé, Shai se concentre sur Qwik, un framework JS conçu pour optimiser les performances des applications en éliminant le besoin d'hydratation. Contrairement aux frameworks de rendu traditionnels côté serveur qui s'appuient sur l'hydratation pour rendre l'application interactive en réexécutant JS sur le client, Qwik utilise le « streaming JavaScript ». Ce processus divise l'application en petits segments, codant la structure de l'application et les écouteurs d'événements lors du rendu côté serveur. Ces segments sont ensuite envoyés au client, où Qwik met en mémoire tampon le code nécessaire en arrière-plan. De ce fait, l'application devient interactive dès que l'utilisateur interagit avec elle, sans attendre le chargement de JS.
Shai explique que Qwik gère automatiquement ce processus, éliminant ainsi le besoin d'optimisations manuelles telles que les importations dynamiques et le chargement paresseux. Cela améliore l'expérience utilisateur et le référencement en accélérant les temps de chargement. Il souligne également la capacité de Qwik à évoluer de manière transparente, ce qui le rend adapté aussi bien aux sites marketing simples qu'aux applications complexes. Shai rassure le public sur le fait que Qwik est stable, avec une communauté et un écosystème en pleine croissance, y compris des intégrations pour l'authentification, les tests et le déploiement.
De plus, Shai introduit de futures fonctionnalités, telles que la mise en mémoire tampon prédictive, les optimisations basées sur l'IA telles que l'élimination du code mort et la refactorisation automatique, qui visent à rationaliser davantage le processus de développement et à améliorer les performances des applications.
Johnson Chu, le créateur de Volar.js, a introduit un cadre révolutionnaire pour créer des outils linguistiques prenant en charge les langages intégrés dans divers environnements tels que Vue.js, React, Svelte et des outils intégrés dans l'écosystème Vite. Volar.js, désormais largement adopté, met l'accent sur l'efficacité et la modularité, ce qui en fait un élément essentiel de l'optimisation des flux de développement, en particulier dans les projets construits avec Vite.
Johnson a décomposé l'architecture de Volar, soulignant :
Rich de l'équipe Svelte a annoncé une réécriture majeure dans Svelte 5, visant à résoudre les principales limitations du système réactif de Svelte malgré sa popularité parmi les développeurs. Il a décrit la structure actuelle de Svelte en quatre points :
Chris Manson explique comment Ember.js, un framework frontend vieux de 13 ans, évolue avec l'intégration de Vite. L'ancien système de construction d'Ember, Broccoli, posait des défis pour les optimisations modernes telles que le fractionnement du code. Pour résoudre ce problème, Embroider a été introduit pour combler le fossé entre le système de construction existant d'Ember et les bundles modernes. Il prétraite le brocoli traditionnel d'Ember en une structure plus propre qui peut être manipulée par les nouveaux conditionneurs. Les premières versions d'Embroider fonctionnaient avec Webpack mais n'étaient pas stables, ce qui a conduit à des travaux supplémentaires pour le rendre compatible avec Vite.
Le principal défi consistait à adapter l'approche module d'abord de Vite pour fonctionner avec les anciens modules AMD d'Ember. La solution impliquait de réorganiser le processus de construction, où Vite pilote la construction avec un plugin Ember, plutôt qu'Ember CLI exécutant Vite. Le plugin Embroider Vite a été créé pour gérer la résolution des modules et les métadonnées, garantissant une intégration plus fluide.
Le résultat est un système fonctionnel pour les applications Ember à construire avec Vite, avec des efforts en cours pour en faire l'expérience par défaut pour les nouveaux projets.
Dans cette section, nous discuterons des outils et des techniques qui poussent les performances de Vite vers de nouveaux sommets. Les discussions sur Nitro v3, l'intégration de Rust dans Rollup et les applications SQLite locales révèlent des stratégies pour créer des applications plus rapides et plus efficaces.
Atila, responsable X chez CrabNebula et contributeur clé du groupe de travail Tauri et de l'équipe SolidJS DX, a présenté Taurify, un nouveau SDK conçu pour transformer les applications Web en applications de bureau et mobiles natives utilisant la technologie Tauri.
Cinq fonctionnalités clés :
Démos en direct :
Daniel Roe, chef de l'équipe principale de Nuxt, a présenté des méthodes innovantes pour optimiser les performances des polices Web à l'aide de Vite et Nuxt. Il a expliqué les défis des polices Web, tels que les changements de mise en page et les problèmes de performances. Roe a présenté 3 outils :
Daniel a également souligné les atouts de Vite, en particulier sa nature polymorphe qui permet une collaboration transparente entre des frameworks comme Nuxt et l'équipe Vite.
Brandon Roberts, créateur d'AnalogJS et responsable de NgRx, présente AnalogJS, un méta-framework pour Angular construit sur Vite. Il a annoncé la sortie d'AnalogJS V1.8, qui vise à améliorer l'écosystème Angular avec des outils comme Vite, Nitro et Nx pour une solution full-stack. Analog exploite les fonctionnalités angulaires modernes telles que les composants autonomes et le rendu côté serveur (SSR) amélioré, offrant un routage basé sur des fichiers, la génération de sites statiques et des routes API intégrées.
Principales fonctionnalités et intégrations :
• SSR & Génération statique : Prise en charge de diverses plateformes (Node, Edge, Vercel, etc.).
• Routes API : Définissez facilement les points de terminaison du serveur ainsi que les composants.
• Outils de test : Intégrations avec Vitest et Playwright, alignant Angular sur les pratiques de test modernes.
• Storybook & More : Vite permet l'intégration avec des bibliothèques de composants comme Storybook.
Roberts a également présenté des fonctionnalités expérimentales, notamment les composants analogiques de fichier unique (SFC) et les actions de formulaire, visant à simplifier la gestion des données client-serveur.
Bjorn Lu a débuté avec humour, en plaisantant sur un « mythe de la performance » avant de se plonger dans les stratégies visant à améliorer les performances des applications Web. Ils ont souligné trois aspects clés :
Igor, ingénieur logiciel chez Cloudflare et ancien contributeur à Angular, discute du concept de « polylithes Web » comme alternative aux applications Web monolithiques traditionnelles (les applications polylithiques sont constituées de nombreux composants, fonctionnant indépendamment pour améliorer la flexibilité et la robustesse). Il souligne les avantages des applications polylithiques, qui sont constituées de plusieurs composants indépendants pouvant fonctionner dans différents contextes, en les comparant aux applications monolithiques qui ont généralement un point d'entrée unique et peuvent entraîner des problèmes de performances, des inefficacités et des risques de sécurité.
Les points clés incluent :
• État actuel des applications monolithiques : De nombreuses applications actuelles, telles que les applications SPA et Node.js, sont monolithiques, ce qui entraîne divers inconvénients tels qu'un ralentissement des performances et une fragilité accrue.
• Avantages de l'architecture polylithique : Ces applications peuvent être plus rapides, plus sécurisées et plus faciles à comprendre, car elles permettent un déploiement séparé et un état moins partagé, réduisant ainsi la surface d'attaque.
• Considérations relatives à la complexité : Bien que les polylithes présentent des avantages évidents, ils introduisent de la complexité dans la configuration, la construction et le déploiement. Cependant, les développeurs créent souvent involontairement des polylithes, en particulier dans les applications full-stack.
• Rôle de Vite v6 : La nouvelle API d'environnement de Vite v6 simplifie la création d'applications polylithiques en permettant plusieurs environnements et des constructions indépendantes sans complexité écrasante, en fournissant des fonctionnalités telles que le remplacement de module à chaud (HMR).
Pooya Parsa, créateur d'UnJS et de Nitro, a présenté Nitro v3, une boîte à outils de serveur permettant de créer des serveurs indépendants du déploiement avec des API puissantes. Nitro simplifie la compilation et le regroupement d'applications pour n'importe quel fournisseur.
Composants clés :
Nitro v3 donne la priorité à la compatibilité avec les standards Web et les plateformes Edge tout en conservant la prise en charge de Node.js. La nouvelle API simplifie les définitions de serveur et améliore la composabilité, l'observabilité et la testabilité.
Pooya a également annoncé H3 v2, publié avec Nitro v3, offrant une taille de bundle plus petite et une gestion des réponses plus rapide, entièrement basée sur les standards du Web. Les futures mises à jour exploreront l'intégration de Vite et les polyfills hybrides natifs pour une meilleure compatibilité et de meilleures performances sur les plates-formes Edge.
Dans cette section, nous aborderons les mises à jour visant à rationaliser le débogage et les tests. Les nouvelles fonctionnalités de Chrome DevTools, Vitest et Vue Devtool Kit offrent aux développeurs un meilleur contrôle, contribuant ainsi à simplifier le processus de développement.
Jecelyn de l'équipe Chrome DevTools a présenté quatre outils essentiels pour un débogage plus rapide et plus efficace :
Dans une série de 3 plongées techniques approfondies, les membres de l'équipe principale de Vitest, Vladimir (membre de l'équipe Vitest et Vite), Ari (équipe principale de Vitest et ingénieur StackBlitz) et Misha Kaletsky (auteur de Expect-Type) ont partagé des mises à jour sur Vitest. , un framework de test rapide et moderne pour JavaScript qui a vu ses téléchargements hebdomadaires tripler pour atteindre environ 6 millions au cours de l'année écoulée.
Les conférences ont également présenté des démonstrations pratiques de ces fonctionnalités, soulignant la facilité d'utilisation et l'efficacité de Vitest. Les intervenants ont souligné les avantages de l'utilisation de Vitest pour le développement JavaScript et TypeScript moderne, en particulier sa capacité à accélérer les flux de développement et à garantir la qualité du code.
Guillaume Chau, membre de l'équipe Vue.js Core, a présenté le Devtool Kit, un framework unificateur pour rationaliser et améliorer le développement et la compatibilité des outils de débogage sur Vue.js, Nuxt et potentiellement d'autres frameworks. Les Devtools Nuxt et Vue, riches en fonctionnalités mais incompatibles, ont incité à la création du Devtool Kit, qui vise à les unifier sous un ensemble commun d'utilitaires et d'API.
L'objectif principal est de standardiser les utilitaires et les API pour permettre une interopérabilité transparente entre les Devtools et faciliter la création de nouveaux Devtools pour n'importe quel framework, au-delà de Vue.js ou Nuxt, tout en prenant en charge divers environnements tels que les navigateurs, les serveurs Node.js ou applications autonomes.
Le Devtool Kit comprend quatre modules :
Module principal : Enregistre les modules de page et contrôle la fonctionnalité globale.
Module de page : Fonctionne dans le contexte de l'application utilisateur, permettant une interaction avec l'état de l'application.
Module d'affichage : Gère l'interface visible, affichant des informations à l'utilisateur.
Module serveur : Gère les interactions côté serveur pendant le développement.
Le Devtool Kit comprend un système de communication bidirectionnel et typé utilisant des technologies telles que postMessage et WebSockets, permettant une interaction transparente entre les modules, quel que soit le contexte.
N'oublions pas les « applets » modulaires qui offrent une expérience Devtools hautement personnalisée, intégrant des fonctionnalités de Vue.js, Nuxt et même des outils tiers comme Pinia ou Tailwind.
Joyee, un contributeur de Node.js, présente les améliorations récentes et à venir du système de chargement des modules Node.js, en se concentrant sur une meilleure prise en charge ESM et une meilleure expérience pour les développeurs.
ESM dans require() (expérimental)
o Les modules CommonJS peuvent désormais nécessiter() des modules ES.
o Limitation : pas de support d'attente de haut niveau.
o Arrivée sur Node.js 23 stable.
Améliorations des développeurs
o Détection automatique des modules ES dans les fichiers .js.
o Cache de compilation du module pour un chargement plus rapide.
o Détection de module intégrée sans attente de niveau supérieur.
o Outils pour localiser le code d'attente problématique de niveau supérieur.
Gestion des colis :
o Nouvelle condition d'exportation pour éviter les problèmes de double package
o Meilleure prise en charge de la migration de CommonJS vers ESM
Outils de développement :
o Crochets de chargement de modules synchrones
o Fichiers de configuration d'exécution pour la configuration de l'environnement
L'accent est mis sur l'amélioration de la prise en charge d'ESM tout en conservant la rétrocompatibilité et l'expérience des développeurs.
Dans cette section, nous plongerons dans les applications réelles de Vite. Des études de cas d'Excalidraw, Shopify et d'autres projets mettent en évidence comment la vitesse, la flexibilité et l'expérience des développeurs de Vite font la différence dans les environnements de production.
Aakansha, responsable d'Excalidraw, discute de l'expérience de migration du projet de Create React App (CRA) vers Vite, motivée par la nécessité de délais de construction et de HMR plus rapides, d'une plus grande flexibilité et d'une meilleure maintenance.
Le processus de migration a commencé après que Patak a intégré Vite dans Excalidraw en 2021, ce qui a attiré l'attention de l'équipe. Ils ont décidé de migrer en raison des temps de construction plus rapides de Vite, d'un meilleur remplacement des modules à chaud et d'une communauté croissante. Les défis sont les suivants :
Cependant, l'équipe a rencontré un problème majeur après le déploiement : une dégradation significative des performances dans le HMR pour les fichiers volumineux. Cela a eu un impact négatif sur l'expérience du développeur, conduisant à un retour en arrière. Après enquête et suppression d'un plugin, ils ont pu résoudre le problème et déployer avec succès.
La migration Vite d'Excalidraw, réalisée avec l'aide substantielle de la communauté, a amélioré l'expérience des développeurs et rationalisé les builds.
Jason Miller, développeur travaillant sur la plus grande base de code React de Shopify (5 millions de lignes de TypeScript et 800 routes), Jason a souligné les avantages de la migration de Webpack vers Vite. Cette migration a conduit à un temps de démarrage de 15 secondes, à une réduction des performances HMR de 12 secondes à 5 millisecondes et à un nombre de modules optimisé de 18 000 à 2 300. Ces améliorations ont permis à l'équipe de passer au développement local au lieu de s'appuyer sur des IDE basés sur le cloud.
Christoph Nakazawa, développeur de jeux Christoph a expliqué comment Vite lui a permis de créer Athena Crisis, un jeu multiplateforme avec 214 000 lignes de JavaScript. Vite a fourni un rechargement à chaud de 30 ms, une prise en charge hors ligne via le vite-plugin-pwa et a permis un regroupement transparent du code frontend et backend, conduisant à un cycle de déploiement rapide de 3 minutes sur plusieurs plates-formes.
Alvaro Sabu, ingénieur en expérience développeur chez Storyblok et créateur de la bibliothèque TresJS, a partagé le parcours de construction du puzzle 3D sur la page de destination de ViteConf. Ce puzzle interactif, que les utilisateurs peuvent résoudre via un éditeur de code intégré, a été créé avec TresJS, une bibliothèque 3D basée sur Vue.
Alvaro a décrit les étapes clés de la conception du puzzle : créer des pièces de tétraèdre et d'octaèdre, mettre en œuvre une logique de rotation avec des quaternions et des images d'animation et l'intégrer de manière transparente dans la page Web. Une fonctionnalité remarquable était l'utilisation de WebContainers pour intégrer un serveur de développement Vite dans la page, permettant aux utilisateurs de modifier le JavaScript derrière le puzzle en temps réel.
Alvaro a également donné des idées sur la façon de surmonter les défis, comme l'utilisation de groupes temporaires pour des rotations consécutives et l'optimisation des performances. Le projet met en valeur les capacités de TresJS et WebContainers pour créer des expériences Web 3D immersives et modifiables.
Dans cette section, nous discuterons de l’avenir de l’écosystème de Vite et de son orientation communautaire. Les discussions sur la documentation, les principes open source et la convergence des frameworks soulignent le rôle de Vite dans la construction d'une communauté de développeurs collaborative et tournée vers l'avenir.
Ben Holmes a présenté les applications « locales d'abord », démontrant leur potentiel à fonctionner entièrement dans le navigateur. Il l'a démontré en utilisant Astro et a souligné comment SQLite peut être géré côté client avec des bibliothèques comme SQLocal, stockant en toute sécurité les données dans le navigateur. Les principaux points à retenir sont :
Fonctionnalité de recherche :
. Recherche de base : implémentation initiale d'une recherche de texte à l'aide de l'opérateur LIKE de SQL.
. Recherche basée sur l'IA : intégration de l'encodeur de phrases universel de
TensorFlow pour des recherches intelligentes basées sur la similarité, permettant aux utilisateurs de trouver des documents pertinents même avec des termes vagues.
Aperçus techniques : discussion des défis tels que le chargement de grands modèles d'IA dans le navigateur et l'importance de l'utilisation de Web Workers pour améliorer les performances.
Expérience utilisateur : la démo présentait des éléments natifs du navigateur pour l'accessibilité et des animations fluides avec des transitions de vue, améliorant ainsi l'expérience de recherche.
En conclusion, Ben a souligné l'avenir passionnant du calcul de l'IA sur appareil dans les applications locales.
Mat Bilmann, PDG de Netlify, a souligné l'évolution du développement Web des structures monolithiques vers Jamstack et les frameworks modernes, soulignant les avantages du découplage du frontend et du backend pour une plus grande flexibilité et évolutivité. Si les premiers frameworks comme Gatsby, Next.js et Nuxt.js rationalisaient les flux de travail, ils ajoutaient également de la complexité.
Bilmann préconise désormais une transition vers des primitives plus petites et composables qui permettent des applications Web plus personnalisées. Vite joue un rôle clé dans ce changement, offrant une base solide qui a catalysé de nouveaux frameworks comme Astro, TanStack Start et Vike. Ces frameworks privilégient la simplicité, la modularité et les performances, permettant aux développeurs de créer des applications Web efficaces et maintenables.
Minko Gechev, responsable produit Angular chez Google, discute des similitudes entre Angular et React, ainsi que des tendances futures en matière de frameworks front-end. Il explique comment les deux frameworks, malgré l'utilisation de syntaxes différentes (modèles vs JSX), utilisent des approches similaires pour la détection et l'optimisation des changements.
L'objectif principal de l'exposé de Minko est l'introduction de Signals, une primitive également utilisée par des frameworks comme Vue, Solid et Svelte. La mise en œuvre de Signals par Angular a amélioré les performances en suivant les dépendances des données et en minimisant les nouveaux rendus inutiles.
Minko met en évidence la collaboration d'Angular avec le framework Wiz de Google, visant à partager les optimisations de performances et à améliorer l'expérience des développeurs. Des exemples notables incluent la relecture d'événements, qui comble efficacement les lacunes d'interactivité, et l'hydratation incrémentielle, qui améliore les performances de chargement des pages.
Il prédit que les frameworks continueront de converger vers le chargement de code fin et la relecture d'événements pour améliorer l'expérience utilisateur, en mettant l'accent sur la stabilité, l'écosystème et les préférences personnelles lors du choix des frameworks.
Brian Douglas (B Dougie), figure clé du projet OpenSauced, discute de la culture et de la croissance de l'écosystème Vite. Il souligne que Vite enregistre désormais 15 millions de téléchargements par semaine, une étape impressionnante.
Dougie présente également StarSearch, un outil développé par son équipe pour identifier les principaux contributeurs de la communauté Vite, mettant en lumière des personnalités comme Anthony Fu, Patak, Brandon Roberts et Toby pour leur rôle dans le développement et l'adoption de Vite. Dougie conclut avec une citation d'Evan Yu, soulignant que les grands contributeurs sont la clé du succès de Vite et que l'accent mis par Vite sur l'expérience des développeurs et la résolution de problèmes est au cœur de sa croissance dans les écosystèmes front-end.
Anthony Fu a exploré le concept de progressivité dans le développement d'outils open source au cours de son exposé. Voici les principaux points à retenir :
Qu'est-ce qui fait un bon outil Open Source ?
L'exposé de Sarah Rainsberger a souligné à quel point la documentation est un outil puissant, souvent négligé, pour la croissance d'une communauté. Investir dans des documents bien entretenus et accessibles nourrit une communauté engagée et durable, renforçant ainsi le projet dans son ensemble.
Elle explique comment les documents peuvent favoriser une communauté open source active :
Dans cette section, nous explorerons des frameworks pionniers poussant Vite vers de nouvelles fonctionnalités. Les discussions sur Vike, l'intégration de WebAssembly et Zero to One montrent comment Vite permet des approches innovantes qui façonnent la prochaine génération d'applications Web.
Réinventer le Framework, de zéro à un
Nathan Wienert a présenté « One », un nouveau framework React qui se distingue par deux fonctionnalités principales :
La configuration est simple : créez une application One à l'aide de npx one, et elle fonctionne comme un plugin Vite pour une configuration facile. L'un prend en charge différents modes de rendu (côté serveur, statique ou côté client) et améliore les fonctionnalités Web avec Tamagui pour un style optimisé.
Le framework gère efficacement la récupération et la synchronisation des données entre le serveur et le client, en utilisant SWC pour remplacer Babel pour des temps de construction plus rapides. Grâce à des extensions spécifiques à la plate-forme, il permet des expériences distinctes sur tous les appareils, démontrant sa polyvalence pour les applications statiques et dynamiques.
La session de Nathan a souligné l'objectif de One de relier de manière transparente le développement d'applications Web et d'applications natives, en le rendant disponible dès maintenant, Zero approchant de la version bêta publique.
Natalia Venditto, responsable principale de l'expérience des développeurs JavaScript chez Microsoft Azure, explique comment WebAssembly permet l'exécution de code hautes performances dans des environnements JavaScript, à la fois côté client et côté serveur.
Points techniques clés
Bases de WebAssembly
o Compile le code de langages comme C/Rust en binaire portable.
o S'intègre parfaitement à JavaScript via les liaisons WebAssembly.
o Exécute plus efficacement les opérations gourmandes en calcul.
Outils de développement
o Plugins Vite pour l'intégration WebAssembly.
o Prise en charge du débogage dans les navigateurs et VS Code.
o Débogage direct au niveau source du code compilé.
Modèle de composant
o Nouvelle architecture pour un meilleur support multilingue.
o Gère les types de données complexes au-delà des nombres.
o Permet la compilation JavaScript vers WebAssembly.
Enfin, elle souligne le potentiel de WebAssembly pour la portabilité et la composition en développement et invite les développeurs à s'engager avec les outils et plugins évolutifs disponibles dans l'écosystème Vite.
Rom Brillout a présenté Vike, un framework frontend de nouvelle génération conçu pour la flexibilité. Il a expliqué que Vike est comme Next.js ou Nuxt, mais avec des extensions hautement personnalisables qui permettent aux développeurs d'utiliser n'importe quel framework d'interface utilisateur. Par exemple, Vike peut exécuter des applications avec un mélange de React, Solid ou même Vue 2 et 3 dans le même projet. Il prend en charge toutes les stratégies de rendu (SPA, SSR et SSG) et s'intègre à diverses méthodes de récupération de données (RPC, REST, GraphQL).
Le différenciateur clé est le modèle open source de Vike sous licence MIT. Plutôt qu'un modèle commercial traditionnel, Vike propose une approche unique selon laquelle les entreprises peuvent payer ce qu'elles choisissent pour une utilisation professionnelle. L'objectif est de garder Vike 100 % open source, en proposant un modèle économique durable tout en garantissant l'accessibilité à tous les développeurs. Malgré sa flexibilité et ses options de personnalisation, Brillout a souligné que Vike est déjà stable pour une utilisation en production, et prévoit de publier prochainement la version 1.0.
Merci d’être arrivé à la fin de mon article ! J'espère que vous l'avez trouvé instructif et que vous avez acquis de nouvelles informations sur les développements passionnants de ViteConf 2024.
La publication de cet article a pris un peu plus de temps que prévu, car je ne pouvais y travailler que le samedi, mais les bonnes choses prennent du temps, n'est-ce pas ? ?
Je suis particulièrement reconnaissant à mon cher ami de m'avoir aidé à réviser et à peaufiner le contenu, ainsi qu'à tous ceux qui m'ont encouragé à publier. Un merci spécial à ChatGPT et Claude ? pour m'avoir aidé à perfectionner mon anglais, j'espère que cela s'est bien passé.
Ceci est mon premier article technique, et votre soutien compte vraiment beaucoup pour moi. J'ai hâte d'écrire davantage et de continuer à partager mes connaissances avec la communauté des développeurs.
N'hésitez pas à partager vos réflexions et vos commentaires, j'aimerais avoir de vos nouvelles ! Vous pouvez me trouver sur :
X (Twitter) : @Mohamed_LamineF ou LinkedIn : mohamedlaminef.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
