ViteConf-Innovationen, Ankündigungen und der Weg in die Zukunft

Hallo ^_~ ;
Ich bin Lamine und freue mich, meinen ersten technischen Artikel über die Highlights der ViteConf 2024 zu veröffentlichen. Als Technikbegeisterter, der sich mit technischem Schreiben beschäftigt, freue ich mich auf Ihr Feedback und Ihre Vorschläge, um meine zukünftigen Inhalte zu verbessern.

Bevor wir uns mit den Konferenzdetails befassen, wollen wir untersuchen, was Vite und ViteConf sind?

Vite ist ein Front-End-Build-Tool der nächsten Generation, das von Evan You (dem Erfinder von Vue.js) entwickelt wurde. Es verbessert das Webentwicklungserlebnis erheblich, indem es einen blitzschnellen Hot Module Replacement (HMR) über einen Entwicklungsserver mit nativen ES-Modulen bietet. Mit seiner einfachen Konfiguration bündelt Vite Code mithilfe von Rollup und nutzt SWC (Speedy Web Compiler) für eine effiziente Codetransformation.
ViteConf ist eine jährliche kostenlose Online-Veranstaltung, die die Vite-Community in einem ansprechenden und interaktiven Format zusammenbringt. Experten und Enthusiasten treffen sich, um Wissen auszutauschen und neue Funktionen vorzustellen. In diesem Jahr (3.-4. Oktober 2024) fand die Veranstaltung zum dritten Mal statt und umfasste 43 Workshops in einem 12-Stunden-Marathon.

Zwölf Stunden Inhalt mit vielen technischen Details zusammenzufassen, ist eine Herausforderung. Aber ich habe versucht, es maximal zusammenzufassen, ohne wichtige Informationen auszulassen. Um unseren Artikel zu vereinfachen, habe ich die Originaltitel der meisten ViteConf-Vorträge beibehalten und sie in 8 Hauptabschnitte unterteilt:

• Top-Ankündigungen von ViteConf24.
• Erweiterte Vite-Integrationen.
• Framework-spezifische Entwicklungen mit Vite.
• Leistungs- und Effizienzsteigerungen.
• Entwicklertools und Debugging-Verbesserungen.
• Fallstudien und Erfolgsgeschichten aus der Praxis.
• Zukünftige Trends und Community-Wachstum.
• Neue Grenzen im Framework-Design erkunden.

Unsere Veranstaltung brachte einige große Ankündigungen mit sich, die den Weg für die Zukunft von Vite ebnen. Visionäre Redner stellten bahnbrechende Tools und Plattformen vor, die das Potenzial haben, die Webentwicklung neu zu gestalten. Tauchen wir ein in die Highlights!

Leere (⌀):

Evan You hat Void Zero angekündigt, ein neues Unternehmen, das sich auf die Entwicklung der nächsten Generation von JavaScript-Tools konzentriert. Das Unternehmen hat unter der Leitung von Accel und Amplify Partners unter Beteiligung erfahrener Gründer im Bereich Entwicklertools eine Startfinanzierung in Höhe von 4,6 Millionen US-Dollar aufgebracht. Void Zero arbeitet an der Verwirklichung von Evans Vision, eine einheitliche, leistungsstarke und zusammensetzbare Toolchain zu schaffen, die für die JavaScript-Entwicklung laufzeitunabhängig ist. Evan besprach auch die aktuellen Fortschritte bei Void Zero und teilte einige beeindruckende Testbenchmarks mit, die Sie mit Sicherheit in Erstaunen versetzen werden.

Bolt.neu:

Eric Simons, Mitbegründer von StackBlitz, kündigte Bolt.new an, ein revolutionäres Tool, das die Webentwicklungslandschaft neu gestalten wird und die etablierten Funktionen der WebContainer-Technologie von StackBlitz nutzt. Bolt.new bietet Entwicklern eine vollständige, browserinterne Umgebung, die die sofortige Projekterstellung, das Debuggen, die Fehlerbehebung und die Bereitstellung ermöglicht, alles basierend auf dem hochmodernen großen Sprachmodell Claude und V0.
Eric erklärte, wie Bolt.new so konzipiert ist, dass die Einrichtungszeit verkürzt wird. Durch die Eingabe einer einfachen Eingabeaufforderung können Entwickler vollständig konfigurierte Anwendungen direkt aus dem Browser generieren, was wirklich bahnbrechend ist. Mit integrierter Paketverwaltung und Abhängigkeitsbehandlung war die in seinem Vortrag demonstrierte Leistung beispiellos. Der beste Weg, sein Potenzial zu erkennen, besteht darin, Bolt.new selbst auszuprobieren.
Eric blieb bei dieser Ankündigung nicht stehen, sondern enthüllte auch ein weiteres wichtiges Update: Bolt.new Core ist jetzt Open Source und auf Github verfügbar.

OXC und Rolldown:

Nach Evans Einführung zu OXC und Rolldown und ihrer bevorstehenden Integration in die Vite-Umgebung stellte Boshen Chen, der Schöpfer des Oxc-Projekts, OXC vor, eine ehrgeizige, leistungsstarke, vollständig integrierte JavaScript-Toolchain, die in Rust geschrieben wurde und wesentlich dazu entwickelt wurde Verbessern Sie die Leistung und die Entwicklererfahrung. Es besteht aus:

• Parser: Ein Hochleistungsparser, der bestehende Tools wie SWC und Babel übertrifft.
• Linter (OxLint): Ein blitzschneller Linter, der große Codebasen effizient analysieren kann. Er enthält 400 Regeln von ESLint, übertrifft diese aber um das 50- bis 100-fache.
• Resolver: Ein 28-mal schnelleres Modulauflösungssystem als Webpacks und andere vorhandene Tools.
• Transformer (in Bearbeitung): Ein leistungsstarker Transformer, der verschiedene JavaScript-Dialekte, einschließlich TypeScript und JSX, verarbeiten kann, unterstützt derzeit TypeScript- und React JSX-Transformationen.

Zu den künftig geplanten Komponenten gehören:

• Formatierer: Konzipiert für Prettier-Kompatibilität.
• Minifier: Ziel sind höhere Geschwindigkeiten und verbesserte Komprimierung.

Boshen stellte außerdem Rolldown vor, den zukünftigen Bundler für Vite, der OXC als Kern-Engine verwendet. Rolldown bietet hohe Leistung und unterstützt eine Reihe von Funktionen, darunter Tree-Shaking, Code-Splitting und Plugin-Kompatibilität.
Der nächste Schritt beinhaltet eine tiefere Vite-Integration mit OXC und Rolldown, die zu erheblichen Leistungsverbesserungen, einem konsistenteren Entwicklererlebnis und der Fähigkeit führen wird, noch größere und komplexere Webanwendungen zu verarbeiten.

Neue Umgebungs-API: Eine neue Ära der Flexibilität:

Matias (Patak) stellte die Environment API vor, eine bedeutende Weiterentwicklung, die die Flexibilität und Leistung von Vite verbessern soll. Mit dieser API können Entwickler mehrere Umgebungen (Beispiel: Client, Server, Edge) innerhalb eines einzigen Vite-Projekts definieren und so Entwicklungs- und Bereitstellungsprozesse optimieren. Er bemerkte den Zustrom von Meta-Frameworks wie Nuxt, Remix und TanStack seit dem ersten Jahr der ViteConf.
Zu den wichtigsten Erkenntnissen aus dem Vortrag gehören:

• Ökosystemerweiterung: Vite unterstützt jetzt Angular, Redwood, Remix, TanStack Start, Waku, Ember und Meteor, wobei sein ESM-basiertes Bundleless-Design und die Rollup-Plugin-API den Kern seines Erfolgs bilden.
• Optimiertes SSR und einheitliche Konfigurationen: Vites Übernahme der Rollup-Plugin-API und der von SvelteKit inspirierten SSR-Struktur vereinfacht die Einrichtung und gewährleistet konsistente Entwicklungs- und Produktionsumgebungen. Mit der Umgebungs-API können Entwickler Client-, SSR- oder Edge-Umgebungen an einem einzigen Ort konfigurieren.
• Highlights der Umgebungs-API: Jede Umgebung (z. B. Client, SSR) verfügt jetzt über einen eigenen Modulgraphen, der mehrere Umgebungen in einer einzigen Konfiguration mit einem neuen Befehl, der Vite Build App, ermöglicht. Zu den Hauptvorteilen gehören die Unterstützung von Multi-Umgebungs-Konfigurationen, eine verbesserte Tool-Integration (z. B. Miniflare) und eine verbesserte Plugin-Unterstützung für Frameworks. Abschließend erörterte Patak den Fokus von Vite 6 auf Abwärtskompatibilität und die Bedeutung des Community-Feedbacks für die weitere Verfeinerung der Umgebungs-API.

TutorialKit:

Tomek stellte TutorialKit vor, ein innovatives Open-Source-Tool, das die Erstellung interaktiver Tutorials im JavaScript-Ökosystem neu definiert. TutorialKit begegnet den Einschränkungen der aktuellen Dokumentation und bietet eine kuratierte, praktische Lernerfahrung, die Benutzerhandbücher mit strukturierten Demos und Übungen integriert.
TutorialKit basiert auf WebContainers und basiert auf Erkenntnissen aus Frameworks wie Svelte, Angular und Nuxt. Mit einem einzigen Befehl, npm create Tutorial, können Entwickler in weniger als einer Minute schnell ein vollständiges Tutorial-Projekt erstellen – komplett mit Lektionsbeschreibungen, Codeausschnitten und Live-Vorschauen.
TutorialKit ist hochgradig anpassbar und bietet dunkle und helle Themen sowie ein interaktives Terminal, sodass sich Lernende vollständig mit dem Material beschäftigen können. Dieses Tool ermöglicht es Entwicklern, Pädagogen und Communities gleichermaßen, ansprechendere Bildungsressourcen direkt im Browser zu erstellen.

pkg.pr.new:

Mohammad stellte pkg.pr.new vor, ein Tool für NPM-Bibliotheksbetreuer und -Benutzer, mit dem sie ohne komplexe Einrichtung eine Vorschau unveröffentlichter Zweige, Korrekturen oder Funktionen anzeigen können. Mit einem einfachen Befehl wie:
npm i https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
Entwickler können bestimmte Versionen sofort testen und umständliche Methoden wie kontinuierliche Releases umgehen.
Zu den nächsten Schritten gehören Integrationen mit ESM.sh für CDN-Unterstützung und eine benutzerdefinierte Benutzeroberfläche, wodurch die Funktionalität von pkg.pr.new auf Umgebungen wie Deno und Vue Playground erweitert wird.

In diesem Abschnitt werden wir neue Integrationen erkunden, die Vite noch anpassungsfähiger machen. Von der Angular-Unterstützung bis hin zu verbesserten Tests und CI-Workflows zeigen diese Updates, wie Vite seine Reichweite erweitert und das Entwicklererlebnis vereinfacht.

Komponententests mit Storybook und Vitest:

Yann Braga, ein Storybook-Betreuer bei Chromatic, stellte bedeutende neue Integrationen mit Vite und Vitest vor, die die Entwicklung und das Testen von UI-Komponenten revolutionieren. Mit diesen Updates wird ein Vitest-Plugin eingeführt, das Storybook-Storys in Funktionstests umwandelt und so die Codeabdeckung ohne zusätzliche Testfälle mühelos erhöht. Die visuelle Debugging-Funktion des Plugins ermöglicht es Entwicklern, fehlgeschlagene Tests in Echtzeit von ihrer CI-Umgebung aus zu überprüfen und so eine nahtlose Teamzusammenarbeit zu fördern.
In Version 9 plant Storybook, visuelle, Barrierefreiheits- und Funktionstests in einer zusammenhängenden Benutzeroberfläche zu vereinen und auf reine ESM-Builds umzusteigen, um die Installationsgröße zu reduzieren und die Leistung zu verbessern. Diese Fortschritte unterstreichen das Engagement von Storybook für effiziente, optimierte Front-End-Workflows und umfassende Komponententests.

Bringen Sie Ihre Vite-Projekte mit Nx zum Erfolg

Katerina Skroumpelou, leitende Ingenieurin bei Nx, betonte die Effizienz, die Nx für Vite-Projekte bringt. Sie begann mit der Diskussion, wie Nx CI-Workflows optimiert und komplexe Aufgaben automatisiert, wodurch Build-Prozesse schneller und effizienter werden.
Als nächstes demonstrierte sie die Verwendung von Nx mit einem React Vite-Projekt. Die Demo zeigte, wie Nx die Leistung durch Funktionen wie Caching und Nx Cloud-Integration steigert. Nx Cloud ermöglicht Skalierung und Aufgabenwiederholung und bietet parallele Ausführung zur Steigerung der Geschwindigkeit. Der Befehl „nx Affected“ wurde ebenfalls vorgestellt, der Aufgaben intelligent nur für geänderte Teile der Codebasis ausführt und so CI weiter optimiert.
Katerina betonte, dass Nx-Plugins, wie die für ESLint und Vite, Migrationen vereinfachen und Code nahtlos pflegen, ohne bestehende Strukturen zu stören. Abschließend zeigte sie, wie man GitHub-Aktionen für CI einrichtet und demonstrierte damit die Fähigkeit von Nx, Aufgaben effizient auf Agenten zu verteilen.

Verwendung von Vite Ruby

Irina Nazarova, die das Beratungsunternehmen Evil Martians leitet, berichtete, wie Vite Ruby die Entwicklererfahrung in Rails-Anwendungen verändert hat und eine bessere Alternative zum „No Build“-Ansatz von Rails bietet. Vite Ruby wurde erfolgreich bei Unternehmen wie Power Home Remodeling Group und ClickFunnels implementiert und ermöglichte komplexere Frontend-Setups unter Beibehaltung der entwicklerfreundlichen Philosophie von Rails.

Üben von Vite und Vitest über Node-APIs

Zhao Jinjiang, Softwareentwickler bei Bit und Mitglied des Vue.js Conf-Teams, diskutierte den Übergang von Bit von Webpack/Jest zu Vite/Vitest. Dieser Wechsel erleichterte die komponentengesteuerte Entwicklung, indem er benutzerdefinierte Entwicklungsumgebungen mit integrierten Tests, optimierten Build- und Test-Workflows und erhöhter Flexibilität durch Node-APIs ermöglichte.

In diesem Abschnitt schauen wir uns an, wie Vite wichtige Frameworks wie SolidJS, Svelte und Remix unterstützt. Diese Entwicklungen zeigen, wie Vite neue Funktionen und Leistungsverbesserungen vorantreibt, die auf die Anforderungen jedes Frameworks zugeschnitten sind.

Die Netzwerk-Kluft überwinden

Ryan Carniato, Erfinder von SolidJS, erzählte, wie sich SolidStart (erreichte im Mai Version 1.0) weiterentwickelte, um die Client- und Serverentwicklung zu vereinheitlichen. Aufbauend auf Vite, Vinxi und Nitro führte SolidStart Serverfunktionen ein und wurde zum ersten JavaScript-Framework mit einer vereinfachten, routerlosen Architektur, wodurch eine beeindruckend geringe Bundle-Größe von 4,7 KB erreicht wurde.
Mit finanzieller Unterstützung des Chrome-Teams entwickelten Ryan und Alexis Seroval, ein leistungsstarkes Serialisierungstool, das asynchrone Daten und Streaming verarbeiten kann. Dies führte zu einem bedeutenden Durchbruch: Single-Flight-Mutationen, die Aktionen und Datenabruf effizient in einer nahtlosen Anfrage kombinieren. Sie demonstrierten dieses Konzept mit einer interaktiven Trello-Board-Demo und demonstrierten die Leistungssteigerungen.
Ryan betonte auch die Bedeutung des Vite-Ökosystems für die Ermöglichung eines schnellen Prototypings und betonte, wie es die Entwicklung von Solid 2.0 beeinflusst hat.

Die Entwicklung von Rollup: Ein Fokus auf Leistung und moderne Syntax

Lukas Taegert-Atkinson stellte aktuelle und kommende Verbesserungen für Rollup vor:

• Leistungsverbesserungen durch Rust-Migration: Die Rollup-Integration von Rust hat die Bündelungsgeschwindigkeit um 20 % verbessert und die Speichernutzung um 5 % reduziert. Zu den nächsten Schritten gehören ein Binärcache für schnelleres Laden und eine asynchrone Plugin-Parsing-API.
• Optimiertes Tree-Shaking: Das Tree-Shaking von Rollup wurde verfeinert, um ungenutzten Code effektiver zu entfernen, mit Optimierungen für Funktionsargumente, dynamische Importe und Objekteigenschaften.
• Erweiterte Syntaxunterstützung: Rollup unterstützt jetzt explizite Ressourcenverwaltung, Dekoratoren und natives JSX, mit potenzieller TypeScript-Unterstützung in Sicht. Das Engagement von Rollup für Leistung, moderne Syntaxunterstützung und ein nahtloses Entwicklererlebnis stärkt seine Position als führender JavaScript-Bundler. Im weiteren Verlauf können wir uns auf noch leistungsfähigere Funktionen und Optimierungen freuen.

Wie Vite Remix besser machte

Pedro Cattori und Mark Dalgleish stellten die Verbesserungen vor, die sich aus der Migration von Remix zu Vite ergaben.
Pedro konzentrierte sich auf die Servercode-Isolierung und erklärte, wie sie davon abkamen, sich auf Treeshaking zu verlassen, um Servercode aus Client-Bundles zu entfernen. Stattdessen implementierten sie explizite Remix-Transformationen und führten .server-Dateisuffixe ein, die eindeutige Build-Fehler verursachen, wenn Servercode an den Client weitergegeben werden könnte.
Mark ging auf Verbesserungen bei der CSS-Verarbeitung ein und zeigte, wie sie sich aus den ursprünglichen URL-basierten CSS-Importen von Remix entwickelt haben, um die integrierten Funktionen von Vite zu nutzen. Dazu gehörten ein besseres CSS-Chunking durch Rollup und eine Lösung für den Entwicklungsmodus, die die URL-Abfragezeichenfolgen von Vite für CSS-Importe verwendet und so ein konsistentes Verhalten zwischen Entwicklung und Produktion gewährleistet und gleichzeitig Styling-Flashs vermeidet.
Diese Änderungen führten zu einer besseren Entwicklererfahrung, einer robusteren Codetrennung und einer effizienteren CSS-Verarbeitung für das Remix-Framework und zeigten, wie die Vite-Migration sie dazu veranlasste, ihre Kernarchitektur zu verbessern.

Qwik – Hinter der Magie

Shai Reznik beginnt seinen Vortrag mit einer lustigen, spielerischen Einführung und beschreibt sich selbst als „legendären Showman“ mit beeindruckenden Aussagen über seine technischen Fähigkeiten.
Im Vortrag konzentriert sich Shai auf Qwik, ein JS-Framework, das die App-Leistung optimiert, indem es die Notwendigkeit einer Flüssigkeitszufuhr eliminiert. Im Gegensatz zu herkömmlichen serverseitigen Rendering-Frameworks, die auf Hydration basieren, um die App interaktiv zu machen, indem sie JS auf dem Client erneut ausführen, verwendet Qwik „JavaScript-Streaming“. Dieser Prozess unterteilt die App in winzige Segmente und kodiert die Struktur und Ereignis-Listener der App während des serverseitigen Renderns. Diese Segmente werden dann an den Client gesendet, wo Qwik im Hintergrund den notwendigen Code zwischenspeichert. Dadurch wird die App interaktiv, sobald der Benutzer mit ihr interagiert, ohne auf das Laden von JS warten zu müssen.
Shai erklärt, dass Qwik diesen Prozess automatisch abwickelt und manuelle Optimierungen wie dynamische Importe und Lazy Loading überflüssig macht. Dies verbessert die Benutzererfahrung und SEO, indem die Ladezeiten beschleunigt werden. Er hebt außerdem die Fähigkeit von Qwik hervor, nahtlos zu skalieren, sodass es sowohl für einfache Marketing-Websites als auch für komplexe Apps geeignet ist. Shai versichert dem Publikum, dass Qwik stabil ist, mit einer wachsenden Community und einem wachsenden Ökosystem, einschließlich Integrationen für Authentifizierung, Tests und Bereitstellung.
Darüber hinaus führt Shai zukünftige Funktionen wie prädiktive Pufferung, KI-gesteuerte Optimierungen wie die Eliminierung von totem Code und automatisches Refactoring ein, die darauf abzielen, den Entwicklungsprozess weiter zu rationalisieren und die App-Leistung zu verbessern.

Volar.js: Wie es funktioniert und was als nächstes kommt

Johnson Chu, der Erfinder von Volar.js, hat ein bahnbrechendes Framework zum Erstellen von Sprachtools eingeführt, das eingebettete Sprachen in verschiedenen Umgebungen wie Vue.js, React, Svelte und in das Vite-Ökosystem integrierte Tools unterstützt. Volar.js, mittlerweile weit verbreitet, legt Wert auf Effizienz und Modularität und ist damit ein wesentlicher Bestandteil der Optimierung von Entwicklungsabläufen, insbesondere bei Projekten, die mit Vite erstellt wurden.
Johnson hat Volars Architektur aufgeschlüsselt und hervorgehoben:

• Das Sprachkernmodul, das wesentliche Vorgänge übernimmt.
• Das Sprachdienstmodul verwaltet eingebetteten Code und stellt APIs bereit, die effektiv in Vite-basierten Projekten verwendet werden.
• Die Plugin-Ebene ermöglicht individuelle Anpassungen und effiziente Codetransformationen und ist für Frameworks wie Vite von entscheidender Bedeutung. Erika, ein Kernmitglied von Volar und Astro, erörterte die Fortschritte von Volar im vergangenen Jahr und betonte Verbesserungen, von denen Vite-Benutzer profitiert haben. Das Team hat neue Funktionen eingeführt, die Leistung verbessert und Fehler behoben, was zur Stabilität von Volar beiträgt und es zu einem robusten Tool für die Vite-basierte Entwicklung macht.

Svelte 5: Jenseits von Komponenten

Rich vom Svelte-Team kündigte eine umfassende Neufassung von Svelte 5 an, die darauf abzielt, Kerneinschränkungen im reaktiven System von Svelte zu beheben, obwohl es bei Entwicklern beliebt ist. Er skizzierte Sveltes aktuelle Struktur in vier Punkten:

• Fungiert als Compiler, der Vanilla-JavaScript generiert.
• Verwendet implizite, komponentenbasierte, vom Compiler gesteuerte Reaktivität.
• Es gibt Einschränkungen, z. B. die Unfähigkeit, die Reaktivität innerhalb von Funktionen zu verfolgen, die ineffiziente Handhabung großer Objekte und die Notwendigkeit manueller Array-Mutationsaktualisierungen.
• Reaktive Variablen funktionieren nur auf der obersten Ebene der Komponente. Anschließend führte er fünf wichtige Änderungen in Svelte 5 ein:
• Führt „Runen“ für explizite, universelle, laufzeitgesteuerte, feinkörnige Reaktivität ein.
• Ermöglicht die reaktive Statusfreigabe zwischen Komponenten.
• Übernimmt signalbasierte Reaktivität mit verbesserter Ergonomie durch Kompilierung.
• Erhebt Leistungsvorteile gegenüber anderen Frameworks.
• Ziel ist eine einfachere Lernkurve und reduzierter Code. Darüber hinaus gab Rich eine Vorschau auf die kommenden SvelteKit-Verbesserungen mit der Umgebungs-API von Vite 6, die es Entwicklern ermöglichen wird, plattformspezifische APIs (wie Bun SQLite) während der lokalen Entwicklung zu nutzen und verschiedene Serverlaufzeiten in einer einzigen App zu kombinieren.

Embers Reise zum Bauen mit Vite

Chris Manson erläutert, wie sich Ember.js, ein 13 Jahre altes Frontend-Framework, mit der Vite-Integration weiterentwickelt. Das alte Build-System von Ember, Broccoli, stellte moderne Optimierungen wie Code-Splitting vor Herausforderungen. Um dieses Problem zu beheben, wurde Embroider eingeführt, um die Lücke zwischen dem alten Build-System von Ember und modernen Bundlern zu schließen. Es verarbeitet den traditionellen Brokkolibaum von Ember in eine sauberere Struktur, die von neueren Bündelern verarbeitet werden kann. Frühe Versionen von Embroider funktionierten mit Webpack, waren jedoch nicht stabil, was weitere Arbeiten zur Kompatibilität mit Vite erforderte.
Die größte Herausforderung bestand darin, den Modul-First-Ansatz von Vite an die älteren AMD-basierten Module von Ember anzupassen. Die Lösung bestand darin, den Build-Prozess neu zu gestalten, wobei Vite den Build mit einem Ember-Plugin steuert und nicht mit der Ember-CLI, auf der Vite ausgeführt wird. Das Embroider Vite-Plugin wurde entwickelt, um Modulauflösung und Metadaten zu verarbeiten und eine reibungslosere Integration zu gewährleisten.
Das Ergebnis ist ein funktionierendes System für Ember-Apps, das mit Vite erstellt werden kann. Es werden weiterhin Anstrengungen unternommen, dies zur Standarderfahrung für neue Projekte zu machen.

In diesem Abschnitt besprechen wir die Tools und Techniken, die die Leistung von Vite auf ein neues Niveau heben. Vorträge über Nitro v3, Rust-Integration in Rollup und Local-First-SQLite-Apps zeigen Strategien für die Erstellung schnellerer und effizienterer Anwendungen.

Die Kraft des Rosts: Taurifizieren Sie das Web

Atila, der Fünf Hauptmerkmale:

1. Einfache Integration:Funktioniert nahtlos als Paket/Kiste im Entwicklungsmodus.
2. Optimierte Builds: Reduziert die Build-Zeiten von Minuten auf Sekunden durch Over-the-Air-Updates.
3. Entwicklertools: Mit Debugging-Funktionen und Hot-Modul-Austausch.
4. Cloud-Integration: Unterstützt automatisierte Bereitstellung und umfassendes Release-Management.
5. Produktionsbereit: Optimiert die Bundle-Größe und verwaltet App-Updates effizient.

Live-Demos:

• Einfache App (solide Hacker-Neuigkeiten):Atila demonstrierte die grundlegende Taurify-Integration, einschließlich JSON-Konfiguration, Echtzeit-Entwicklungsfunktionen und den Bereitstellungsprozess.
• Komplexe App (Mastodon-Client):Er stellte die Fähigkeiten von Taurify vor und demonstrierte die reibungslose Integration mit komplexen Codebasen und effizienten Cloud-Bereitstellungen.

Optimieren Sie Ihre Schriftarten auf magische Weise

Daniel Roe, Nuxt-Kernteamleiter, präsentierte innovative Methoden zur Optimierung der Web-Font-Leistung mit Vite und Nuxt. Er erläuterte die Herausforderungen von Webfonts, wie Layoutverschiebungen und Leistungsprobleme. Roe stellte 3 Tools vor:

• Fontaine: ein vorhandenes Tool, das zur Erstellungszeit Schriftmetriken in CSS einfügt.
• Unifont: ein neues Open-Source-Tool für den einheitlichen Zugriff auf die APIs von Schriftartenanbietern.
• Nuxt Fonts: ein Zero-Config-Modul, das auf beiden aufbaut und automatisch die Schriftartenoptimierung übernimmt und durch die lokale Bereitstellung von Schriftarten Datenschutz und Leistung gewährleistet.

Daniel hob auch die Stärken von Vite hervor, insbesondere seine polymorphe Natur, die eine nahtlose Zusammenarbeit zwischen Frameworks wie Nuxt und dem Vite-Team ermöglicht.

Aufbau des nächsten Meta-Frameworks für Angular mit Analog

Brandon Roberts, Schöpfer von AnalogJS und NgRx-Betreuer, stellt AnalogJS vor, ein auf Vite basierendes Meta-Framework für Angular. Er kündigte die Veröffentlichung von AnalogJS V1.8 an, das darauf abzielt, das Angular-Ökosystem mit Tools wie Vite, Nitro und Nx für eine Full-Stack-Lösung zu erweitern. Analog nutzt moderne Angular-Funktionen wie eigenständige Komponenten und erweitertes serverseitiges Rendering (SSR) und bietet dateibasiertes Routing, statische Site-Generierung und integrierte API-Routen.
Hauptfunktionen und Integrationen:
• SSR und statische Generierung: Unterstützung für verschiedene Plattformen (Node, Edge, Vercel usw.).
• API-Routen: Definieren Sie ganz einfach Serverendpunkte neben Komponenten.
• Testtools: Integrationen mit Vitest und Playwright, um Angular an moderne Testpraktiken anzupassen.
• Storybook & mehr: Vite ermöglicht die Integration mit Komponentenbibliotheken wie Storybook.
Roberts stellte auch experimentelle Funktionen vor, darunter analoge Single-File-Komponenten (SFCs) und Formularaktionen, die darauf abzielen, die Datenverarbeitung zwischen Client und Server zu vereinfachen.

Leistung! Leistung! Leistung!

Björn Lu begann mit Humor und scherzte über einen „Leistungsmythos“, bevor er sich mit Strategien zur Verbesserung der Leistung von Web-Apps befasste. Sie hoben drei Schlüsselaspekte hervor:

1. Effizienz: Reduzierung unnötiger Vorgänge, wie z. B. die Verwendung einer einfachen Schleife anstelle von Map/Filter/Reduce.
2. Minimalismus: Nur erforderliche Bibliotheksteile verwenden, benutzerdefinierten Code schreiben, wenn dies einfacher ist.
3. Einfallsreichtum: Nutzung von Systemressourcen, wie z. B. Worker-Threads, um Aufgaben zu parallelisieren. Um Engpässe zu identifizieren, empfahl der Redner, „vage“ Benutzerberichte in konkrete, umsetzbare Probleme umzuwandeln. Sie demonstrierten die Verwendung von Profilierungstools wie Chrome DevTools und npmgraph. Der Vortrag umfasste mehrere Fallstudien zur Optimierung:
4. Verbesserung der Paketgeschwindigkeit um das Vierfache durch gezielte Profilierung
5. Verwendung von Arbeitsthreads für eine schnellere CSS-Verarbeitung
6. Reduzierung der Speichernutzung von Rollup durch dynamische Berechnung Der Redner betonte, dass sich kleine, inkrementelle Verbesserungen mit der Zeit verstärken können. Sie warnten jedoch davor, Leistungssteigerungen mit Wartbarkeit in Einklang zu bringen.

Web-Polylithen mit Vite bauen

Igor, ein Softwareentwickler bei Cloudflare und ehemaliger Mitarbeiter von Angular, diskutiert das Konzept der „Web-Polylithen“ als Alternative zu herkömmlichen monolithischen Webanwendungen (polylithische Anwendungen bestehen aus vielen Komponenten, die unabhängig voneinander funktionieren, um Flexibilität und Robustheit zu verbessern). Er betont die Vorteile polylithischer Anwendungen, die aus mehreren unabhängigen Komponenten bestehen, die in unterschiedlichen Kontexten betrieben werden können, und stellt sie im Gegensatz zu monolithischen Anwendungen dar, die typischerweise einen einzigen Einstiegspunkt haben und zu Leistungsproblemen, Ineffizienzen und Sicherheitsrisiken führen können.
Zu den wichtigsten Punkten gehören:
• Aktueller Stand monolithischer Anwendungen: Viele Anwendungen wie SPAs und Node.js-Apps sind heutzutage monolithisch, was zu verschiedenen Nachteilen wie langsamerer Leistung und erhöhter Fragilität führt.
• Vorteile der polylithischen Architektur: Diese Anwendungen können schneller, sicherer und leichter zu verstehen sein, da sie eine separate Bereitstellung und weniger gemeinsame Zustände ermöglichen, wodurch die Angriffsfläche verringert wird.
• Überlegungen zur Komplexität: Obwohl Polylithen klare Vorteile haben, führen sie zu Komplexität bei der Konfiguration, dem Aufbau und der Bereitstellung. Allerdings erstellen Entwickler oft unbeabsichtigt Polylithen, insbesondere in Full-Stack-Anwendungen.
• Die Rolle von Vite v6: Die neue Umgebungs-API in Vite v6 vereinfacht die Erstellung polylithischer Anwendungen, indem sie mehrere Umgebungen und unabhängige Builds ohne überwältigende Komplexität ermöglicht und Funktionen wie Hot Module Replacement (HMR) bereitstellt.

Ein erster Blick auf Nitro v3

Pooya Parsa, Erfinder von UnJS und Nitro, stellte Nitro v3 vor, ein Server-Toolkit zum Erstellen einsatzunabhängiger Server mit leistungsstarken APIs. Nitro vereinfacht die Zusammenstellung und Bündelung von Anwendungen für jeden Anbieter.
Schlüsselkomponenten:

• Laufzeitfunktionen: API-Routen über eine Dateisystemstruktur, eine integrierte Renderebene für SSR, ein Speichersystem, Task-Runner, Caching und eine eingebettete Datenbank.
• Builder-API: Bündelt Anwendungslogik mit den Funktionen von Nitro für die Produktion, unterstützt durch Rollup. Es umfasst auch einen Entwicklungsserver mit schnellen Neuerstellungen und plant, für eine schnellere Leistung auf Vite umzusteigen.

Nitro v3 priorisiert die Kompatibilität mit Webstandards und Edge-Plattformen und behält gleichzeitig die Node.js-Unterstützung bei. Die neue API vereinfacht Serverdefinitionen und verbessert die Zusammensetzbarkeit, Beobachtbarkeit und Testbarkeit.
Pooya kündigte außerdem H3 v2 an, das mit Nitro v3 veröffentlicht wurde und eine kleinere Bundle-Größe und schnellere Antwortverarbeitung bietet, die vollständig auf Webstandards basiert. Zukünftige Updates werden die Vite-Integration und hybrid-native Polyfills für bessere Kompatibilität und Leistung auf Edge-Plattformen untersuchen.

In diesem Abschnitt behandeln wir die Updates, die darauf abzielen, das Debuggen und Testen zu optimieren. Neue Funktionen in Chrome DevTools, Vitest und dem Vue Devtool Kit bieten Entwicklern mehr Kontrolle und tragen zur Vereinfachung des Entwicklungsprozesses bei.

Vier erstaunliche DevTools-Updates, die Sie lieben werden

Jecelyn vom Chrome DevTools-Team stellte vier wesentliche Tools für schnelleres und effektiveres Debuggen vor:

1. Persistente Elementprüfung: Verwenden Sie „Eine fokussierte Seite emulieren“, um Elemente wie Dropdowns während der Prüfung sichtbar zu halten. Weitere Techniken finden Sie in einem verlinkten Video.
2. KI-gestützte Fehlerlösungen: Klicken Sie bei Gemini auf das neue Glühbirnensymbol bei Fehlern, um KI-generierte Erklärungen und maßgeschneiderte Korrekturen zu erhalten.
3. Verbessertes Leistungspanel: Wichtige Web-Kernmetriken werden jetzt in Echtzeit aktualisiert, ohne dass eine Aufzeichnung erforderlich ist, und Entwickler können lokale und reale Benutzerdaten vergleichen.
4. API-Mocks mit Netzwerküberschreibungen: Scheinen Sie API-Antworten, um Benutzeroberflächen zu testen, bevor das Backend bereit ist, mit lokal gespeicherten Überschreibungen für einfache Bearbeitungen.

Vitest: Revolutionierung von JavaScript-Tests

In einer Reihe von drei technischen Tieftauchgängen teilten die Mitglieder des Vitest-Kernteams, Vladimir (Mitglied des Vitest- und Vite-Teams), Ari (Vitest-Kernteam und StackBlitz-Ingenieur) und Misha Kaletsky (Autor von Expect-Type), Updates über Vitest , ein schnelles und modernes Test-Framework für JavaScript, dessen wöchentliche Downloads sich im vergangenen Jahr auf etwa 6 Millionen verdreifacht haben.

Highlights von Vitest 2.1:

• Browsermodus: Wesentliche Verbesserungen und eine neue Benutzeroberfläche zum Ausführen von Tests im Browser, die das Testen von Frontend-Code in einer echten Browserumgebung ermöglicht.
• Abdeckung: Erweiterte Abdeckungsfunktionen, einschließlich V8-Abdeckung für den Browsermodus, die schnellere und genauere Abdeckungsberichte liefern.
• Typprüfung: Integration von Expect-Type zur Typprüfung zur Kompilierungszeit.
• VS-Code-Erweiterung: Eine neu geschriebene Erweiterung für schnellere Leistung, Debugging und Abdeckungsvisualisierung. Hauptfunktionen und Verbesserungen:
• Schnellere Testausführung: Optimierte Leistung und Caching-Mechanismen.
• Verbesserte Debugging-Erfahrung:Verbesserte Debugging-Funktionen in der VS Code-Erweiterung.
• Umfassende Abdeckungsberichte: Detaillierte Abdeckungsberichte mit detaillierten Einblicken.
• Nahtlose Typprüfung: Integration von Expect-Type für robuste Typüberprüfung.
• Benutzerfreundliche Benutzeroberfläche:Eine optisch ansprechende und intuitive Benutzeroberfläche.

In den Vorträgen wurden diese Funktionen auch praktisch demonstriert und die Benutzerfreundlichkeit und Effizienz von Vitest hervorgehoben. Die Redner hoben die Vorteile der Verwendung von Vitest für die moderne JavaScript- und TypeScript-Entwicklung hervor, insbesondere seine Fähigkeit, Entwicklungsabläufe zu beschleunigen und die Codequalität sicherzustellen.

Devtool-Kits im Vue.js-Ökosystem

Guillaume Chau, ein Mitglied des Vue.js-Kernteams, stellte das Devtool Kit vor, ein vereinheitlichendes Framework zur Rationalisierung und Verbesserung der Entwicklung und Kompatibilität von Debugging-Tools in Vue.js, Nuxt und möglicherweise anderen Frameworks. Die funktionsreichen, aber inkompatiblen Nuxt- und Vue-Devtools führten zur Entwicklung des Devtool-Kits, das darauf abzielt, sie unter einem gemeinsamen Satz von Dienstprogrammen und APIs zu vereinen.

Das Hauptziel besteht darin, Dienstprogramme und APIs zu standardisieren, um eine nahtlose Interoperabilität zwischen Devtools zu ermöglichen und die Erstellung neuer Devtools für jedes Framework, über Vue.js oder Nuxt hinaus, zu erleichtern und gleichzeitig verschiedene Umgebungen wie Browser, Node.js-Server usw. zu unterstützen eigenständige Anwendungen.

Das Devtool Kit besteht aus vier Modulen:
Hauptmodul: Registriert Seitenmodule und steuert die Gesamtfunktionalität.
Seitenmodul: Funktioniert im Benutzeranwendungskontext und ermöglicht die Interaktion mit dem App-Status.
Anzeigemodul: Verwaltet die sichtbare Schnittstelle und zeigt dem Benutzer Informationen an.
Servermodul: Verwaltet serverseitige Interaktionen während der Entwicklung.
Das Devtool Kit verfügt über ein bidirektionales, typisiertes Kommunikationssystem, das Technologien wie postMessage und WebSockets verwendet und eine nahtlose Interaktion zwischen Modulen unabhängig vom Kontext ermöglicht.

Nicht zu vergessen sind die modularen „Applets“, die ein hochgradig individuelles Devtools-Erlebnis bieten und Funktionen von Vue.js, Nuxt und sogar Tools von Drittanbietern wie Pinia oder Tailwind integrieren.

Neue und kommende Funktionen im Node.js-Modullader

Joyee, ein Node.js-Mitarbeiter, stellt aktuelle und kommende Verbesserungen am Modulladesystem von Node.js vor und konzentriert sich dabei auf eine bessere ESM-Unterstützung und Entwicklererfahrung.

Freigegebene Funktionen:

1. ESM in require() (experimentell)
   o CommonJS-Module können jetzt ES-Module erfordern().
   o Einschränkung: Kein Support auf oberster Ebene.
   o Kommt zu Node.js 23 stabil.

2. Entwicklerverbesserungen
   o Automatische Erkennung von ES-Modulen in .js-Dateien.
   o Modulkompilierungscache für schnelleres Laden.
   o Integrierte Modulerkennung ohne Warten auf oberster Ebene.
   o Tools zum Auffinden problematischen Wartecodes auf oberster Ebene.

Kommende Funktionen

1. Paketverwaltung:
   o Neue Exportbedingung, um Probleme mit doppelten Paketen zu verhindern
   o Bessere Unterstützung für die Migration von CommonJS zu ESM

2. Entwicklertools:
   o Synchrone Modullade-Hooks
   o Laufzeitkonfigurationsdateien für die Umgebungseinrichtung

Der Schwerpunkt liegt auf der Verbesserung der ESM-Unterstützung bei gleichzeitiger Wahrung der Abwärtskompatibilität und der Entwicklererfahrung.

In diesem Abschnitt befassen wir uns mit realen Anwendungen von Vite. Fallstudien von Excalidraw, Shopify und anderen Projekten zeigen, wie die Geschwindigkeit, Flexibilität und Entwicklererfahrung von Vite in Produktionsumgebungen einen Unterschied machen.

Migration von Excalidraw von CRA nach Vite

Aakansha, ein Betreuer von Excalidraw, spricht über die Erfahrungen bei der Migration des Projekts von Create React App (CRA) zu Vite, getrieben von der Notwendigkeit schnellerer Build- und HMR-Zeiten, größerer Flexibilität und besserer Wartung.
Der Migrationsprozess begann, nachdem Patak im Jahr 2021 Vite in Excalidraw integriert hatte, was die Aufmerksamkeit des Teams erregte. Aufgrund der schnelleren Build-Zeiten, des besseren Austauschs von Hot-Modulen und der wachsenden Community von Vite haben sie sich für eine Migration entschieden. Die Herausforderungen sind:

• Testen:Mit Community-Unterstützung zu Vitest migriert, wobei vitest-canvas-mock für Canvas-basierte Tests verwendet wird.
• PWA-Unterstützung: Caching für Gebietsschemas und Schriftarten mithilfe von vite-plugin-pwa implementiert, wodurch Probleme mit einer benutzerdefinierten Rollup-Konfiguration behoben werden.

Nach der Bereitstellung stieß das Team jedoch auf ein großes Problem – eine erhebliche Leistungseinbuße im HMR bei großen Dateien. Dies wirkte sich negativ auf die Entwicklererfahrung aus und führte zu einem Rückfall. Nach der Untersuchung und dem Entfernen eines Plugins konnten sie das Problem beheben und erfolgreich bereitstellen.
Die Vite-Migration von Excalidraw, die mit umfangreicher Community-Hilfe abgeschlossen wurde, verbesserte das Entwicklererlebnis und optimierte Builds.

Vite bei Shopify skalieren:

Jason Miller, Entwickler, der an Shopifys größter React-Codebasis (5 Millionen Zeilen TypeScript und 800 Routen) arbeitet, betonte die Vorteile der Migration von Webpack zu Vite. Diese Migration führte zu einer Startzeit von 15 Sekunden, einer Reduzierung der HMR-Leistung von 12 Sekunden auf 5 Millisekunden und einer optimierten Modulanzahl von 18.000 auf 2.300. Diese Verbesserungen ermöglichten es dem Team, auf lokale Entwicklung umzusteigen, anstatt sich auf cloudbasierte IDEs zu verlassen.

Videospielentwicklung mit Vite

Christoph Nakazawa, Spieleentwickler Christoph erklärte, wie Vite es ihm ermöglichte, Athena Crisis zu entwickeln, ein plattformübergreifendes Spiel mit 214.000 Zeilen JavaScript. Vite bot 30 ms Hot-Reloading, Offline-Unterstützung über das vite-plugin-pwa und ermöglichte die nahtlose Bündelung von Frontend- und Backend-Code, was zu einem schnellen Bereitstellungszyklus von 3 Minuten auf mehreren Plattformen führte.

Wie das Viteconf 3D-Puzzle gebaut wurde

Alvaro Sabu, Developer Experience Engineer bei Storyblok und Schöpfer der TresJS-Bibliothek, erzählte auf der ViteConf-Landingpage von der Reise zum Erstellen des 3D-Puzzles. Dieses interaktive Rätsel, das Benutzer über einen integrierten Code-Editor lösen können, wurde mit TresJS, einer Vue-basierten 3D-Bibliothek, erstellt.
Alvaro beschrieb die wichtigsten Schritte bei der Gestaltung des Puzzles: die Erstellung von Tetraeder- und Oktaederstücken, die Implementierung einer Rotationslogik mit Quaternionen und Animationsrahmen und deren nahtlose Integration in die Webseite. Ein herausragendes Merkmal war die Verwendung von WebContainern zur Einbettung eines Vite-Entwicklungsservers in die Seite, sodass Benutzer das JavaScript hinter dem Puzzle in Echtzeit bearbeiten können.
Alvaro bot auch Einblicke in die Bewältigung von Herausforderungen, wie die Verwendung temporärer Gruppen für aufeinanderfolgende Rotationen und die Optimierung der Leistung. Das Projekt unterstreicht die Fähigkeiten von TresJS und WebContainers zur Erstellung immersiver, bearbeitbarer 3D-Weberlebnisse.

In diesem Abschnitt diskutieren wir die Zukunft des Vite-Ökosystems und seinen Community-Fokus. Vorträge über Dokumentation, Open-Source-Prinzipien und Framework-Konvergenz unterstreichen Vites Rolle beim Aufbau einer kollaborativen, zukunftsorientierten Entwickler-Community.

Die Zukunft des Webs ist Local First

Ben Holmes stellte „Local First“-Apps vor und demonstrierte deren Potenzial, vollständig im Browser ausgeführt zu werden. Er demonstrierte dies anhand von Astro und betonte, wie SQLite clientseitig mit Bibliotheken wie SQLocal verwaltet werden kann und Daten sicher im Browser speichert. Die wichtigsten Erkenntnisse sind:

1. Dokumenteneditor: Ein einfacher Editor, der es Benutzern ermöglicht, Dokumente direkt in der SQLite-Datenbank des Browsers zu erstellen, zu bearbeiten und zu speichern und so die Datenpersistenz ohne externen Speicher sicherzustellen.

2. Suchfunktion:
   . Einfache Suche: Ursprünglich wurde eine Textsuche mit dem LIKE-Operator von SQL implementiert.
   . KI-gestützte Suche: Integriert den Universal Sentence Encoder von
   TensorFlow für intelligente, ähnlichkeitsbasierte Suchen, die es Benutzern ermöglichen, relevante Dokumente auch mit vagen Begriffen zu finden.

3. Technische Einblicke: Besprochene Herausforderungen wie das Laden großer KI-Modelle in den Browser und die Bedeutung der Verwendung von Web Workern für eine verbesserte Leistung.

4. Benutzererfahrung: Die Demo enthielt browsernative Elemente für Barrierefreiheit und reibungslose Animationen mit Ansichtsübergängen, wodurch das Sucherlebnis verbessert wurde.
   Abschließend hob Ben die spannende Zukunft der On-Device-KI-Berechnung in Local-First-Anwendungen hervor.

Von Frameworks zu Primitiven

Mat Bilmann, CEO von Netlify, skizzierte den Wandel in der Webentwicklung von monolithischen Strukturen hin zu Jamstack und modernen Frameworks und betonte die Vorteile der Entkopplung von Frontend und Backend für mehr Flexibilität und Skalierbarkeit. Während frühe Frameworks wie Gatsby, Next.js und Nuxt.js Arbeitsabläufe rationalisierten, erhöhten sie auch die Komplexität.
Bilmann plädiert nun für einen Übergang zu kleineren, zusammensetzbaren Grundelementen, die maßgeschneidertere Webanwendungen ermöglichen. Vite spielt bei diesem Wandel eine Schlüsselrolle und bietet eine solide Grundlage, die neue Frameworks wie Astro, TanStack Start und Vike hervorgebracht hat. Bei diesen Frameworks stehen Einfachheit, Modularität und Leistung im Vordergrund und ermöglichen es Entwicklern, effiziente und wartbare Webanwendungen zu erstellen.

Konvergierende Web-Frameworks

Minko Gechev, Produktleiter von Angular bei Google, diskutiert die Ähnlichkeiten zwischen Angular und React sowie zukünftige Trends bei Front-End-Frameworks. Er erklärt, wie beide Frameworks trotz der Verwendung unterschiedlicher Syntaxen (Vorlagen vs. JSX) ähnliche Ansätze zur Änderungserkennung und -optimierung nutzen.
Ein Hauptschwerpunkt von Minkos Vortrag ist die Einführung von Signalen, einem Grundelement, das auch von Frameworks wie Vue, Solid und Svelte verwendet wird. Angulars Implementierung von Signals hat die Leistung verbessert, indem Datenabhängigkeiten verfolgt und unnötige erneute Renderings minimiert werden.
Minko hebt die Zusammenarbeit von Angular mit dem Wiz-Framework von Google hervor, die darauf abzielt, Leistungsoptimierungen zu teilen und das Entwicklererlebnis zu verbessern. Bemerkenswerte Beispiele sind die Ereigniswiedergabe, die Interaktivitätslücken effizient schließt, und die inkrementelle Hydratation, die die Seitenladeleistung verbessert.
Er prognostiziert, dass Frameworks sich weiterhin auf feinkörniges Laden von Code und Ereigniswiedergabe konzentrieren werden, um die Benutzererfahrung zu verbessern, wobei Stabilität, Ökosystem und persönliche Vorlieben bei der Auswahl von Frameworks im Vordergrund stehen.

Die Kultur des Vite-Ökosystems

Brian Douglas (B Dougie), eine Schlüsselfigur hinter dem OpenSauced-Projekt, diskutiert die Kultur und das Wachstum des Vite-Ökosystems. Er betont, dass Vite mittlerweile 15 Millionen Downloads pro Woche verzeichnet, ein beeindruckender Meilenstein.

Dougie stellt außerdem StarSearch vor, ein von seinem Team entwickeltes Tool zur Identifizierung wichtiger Mitwirkender in der Vite-Community, und hebt Persönlichkeiten wie Anthony Fu, Patak, Brandon Roberts und Toby für ihre Rolle bei der Förderung der Entwicklung und Einführung von Vite hervor. Dougie schließt mit einem Zitat von Evan Yu, in dem er betont, dass großartige Mitwirkende der Schlüssel zum Erfolg von Vite sind und dass der Fokus von Vite auf Entwicklererfahrung und Problemlösung von zentraler Bedeutung für sein Wachstum in Front-End-Ökosystemen ist.

Anthonys Weg zu Open Source II: Der progressive Weg in Open Source

Anthony Fu untersuchte in seinem Vortrag das Konzept der Progressivität in der Open-Source-Tool-Entwicklung. Hier sind die wichtigsten Erkenntnisse:
Was macht ein gutes Open-Source-Tool aus?

• Löst ein Problem: Ein gutes Werkzeug reduziert den Aufwand im Vergleich zu manuellen Methoden erheblich.
• Einfach zu erlernen und zu verwenden: Eine niedrige Lernkurve fördert eine breitere Akzeptanz.
• Community-gesteuerte Verbesserung: Benutzerfeedback und Beiträge fördern kontinuierliche Verbesserungen. Die Bedeutung des Fortschritts:
• Progressives Onboarding: Die Tools sollten für Anfänger mit einer einfachen Lernkurve zugänglich sein.
• Progressive Integrationen: Flexibilität zur Anpassung und Integration in verschiedene Szenarien ist der Schlüssel.
• Progressive Funktionen: Leistungsstarke Funktionen sollten schrittweise eingeführt werden, damit Benutzer ihr Wissen im Laufe der Zeit vertiefen können.
• Progressive Breaking Changes: Breaking Changes sollten reibungslos eingeführt werden, mit Migrationspfaden und Optionen für Abwärtskompatibilität. Anthony lieferte auch Beispiele für Progressivität in Tools wie Vue, Nuxt.js und Vite und erläuterte, wie jedes einen progressiven Weg verfolgt, um die Benutzererfahrung und Anpassungsfähigkeit zu verbessern.

Dokumente als Gemeinschaftsbildung

Sarah Rainsbergers Vortrag betonte, dass Dokumentation ein wirkungsvolles, oft übersehenes Werkzeug für das Community-Wachstum ist. Die Investition in gut gepflegte und zugängliche Dokumente fördert eine engagierte, nachhaltige Community und stärkt das Projekt insgesamt.
Sie erklärt, wie Dokumente eine aktive Open-Source-Community fördern können:

• Starke Communities sind entscheidend für den Projekterfolg – ​​mehr Benutzer => weitere Fehlerberichte => Feedback und potenzielle Mitwirkende.
• Dokumentation ist eine zu wenig genutzte Ressource für den Community-Aufbau, da sie im Vergleich zu Code-Beiträgen eine geringe Eintrittsbarriere aufweist.
• Dokumente dienen vielen wichtigen Zwecken wie Schulung, Onboarding und Marketing, die die Belastung für Betreuer verringern können.
• Identifizieren Sie vorhandene Community-Helfer und laden Sie sie ein, die Dokumentation direkt zu verbessern, auch bei kleinen Korrekturen.
• Übersetzer sind wertvolle Mitwirkende, die unklare Passagen erkennen, die einer Klärung bedürfen.
• Docs Mitwirkende können als zukünftige Code-Mitwirkende gewonnen werden, um die Benutzerfreundlichkeit des Projekts zu demonstrieren.
• Sorgen Sie für klare Beitragsleitlinien, einfache Aufgaben und öffentliche Anerkennung, um mehr Beteiligung zu fördern.
• In hochwertige, von der Community erstellte Dokumentation zu investieren, ist für das Wachstum und die Nachhaltigkeit von Open-Source-Projekten von entscheidender Bedeutung.

In diesem Abschnitt werden wir bahnbrechende Frameworks erkunden, die Vite zu neuen Fähigkeiten führen. Vorträge zu Vike, WebAssembly-Integration und Zero to One zeigen, wie Vite innovative Ansätze ermöglicht, die die nächste Generation von Webanwendungen prägen.

Erkundung neuer Grenzen im Framework-Design

Das Framework neu erfinden, von Null auf Eins
Nathan Wienert stellte „One“ vor, ein neues React-Framework, das sich durch zwei Hauptmerkmale auszeichnet:

1. Nahtloses Dual Serving: One ermöglicht es Vite, sowohl React Native- als auch Webanwendungen gleichzeitig bereitzustellen und bietet Dateisystem-Routing und Hot-Reloading für beide Umgebungen.
2. Local-First-Integration: Es betont einen Local-First-Ansatz durch die Integration mit Zero und bietet eine Lösung für die Datenverwaltung, die die Codefreigabe zwischen Web- und nativen Apps unterstützt.

Die Einrichtung ist unkompliziert: Erstellen Sie eine One-App mit npx one, die als Vite-Plugin für eine einfache Konfiguration fungiert. One unterstützt verschiedene Rendering-Modi (serverseitig, statisch oder clientseitig) und erweitert Webfunktionen mit Tamagui für optimiertes Styling.

Das Framework verwaltet den Datenabruf und die Synchronisierung zwischen Server und Client effizient und verwendet SWC als Ersatz für Babel für schnellere Build-Zeiten. Mit plattformspezifischen Erweiterungen ermöglicht es unterschiedliche Erlebnisse auf allen Geräten und stellt seine Vielseitigkeit sowohl für statische als auch dynamische Anwendungen unter Beweis.

Nathans Sitzung betonte das Ziel von One, die Web- und native App-Entwicklung nahtlos zu verbinden, und machte es jetzt verfügbar, während Zero sich der öffentlichen Beta nähert.

JavaScript als Quelle und Ziel für Wasm

Natalia Venditto, Hauptleiterin für JavaScript-Entwicklererfahrung bei Microsoft Azure, erläutert, wie WebAssembly eine leistungsstarke Codeausführung in JavaScript-Umgebungen ermöglicht, sowohl clientseitig als auch serverseitig.
Wichtige technische Punkte

1. WebAssembly-Grundlagen
   o Kompiliert Code aus Sprachen wie C/Rust in eine tragbare Binärdatei.
   o Lässt sich über WebAssembly-Bindungen nahtlos in JavaScript integrieren.
   o Führt rechenintensive Vorgänge effizienter aus.

2. Entwicklungstools
   o Vite-Plugins für die WebAssembly-Integration.
   o Debugging-Unterstützung in Browsern und VS-Code.
   o Direktes Debuggen des kompilierten Codes auf Quellebene.

3. Komponentenmodell
   o Neue Architektur für bessere sprachübergreifende Unterstützung.
   o Verarbeitet komplexe Datentypen, die über Zahlen hinausgehen.
   o Aktiviert die JavaScript-zu-WebAssembly-Kompilierung.

Abschließend betont sie das Potenzial von WebAssembly für Portabilität und Komposition in der Entwicklung und lädt Entwickler ein, sich mit den sich entwickelnden Tools und Plugins zu beschäftigen, die im Vite-Ökosystem verfügbar sind.

Vike – Frontend-Framework der nächsten Generation

Rom Brillout präsentierte Vike, ein Frontend-Framework der nächsten Generation, das auf Flexibilität ausgelegt ist. Er erklärte, dass Vike wie Next.js oder Nuxt sei, jedoch mit hochgradig anpassbaren Erweiterungen, die es Entwicklern ermöglichen, jedes UI-Framework zu verwenden. Vike kann beispielsweise Apps mit einer Mischung aus React, Solid oder sogar Vue 2 und 3 im selben Projekt ausführen. Es unterstützt alle Rendering-Strategien (SPA, SSR und SSG) und lässt sich in verschiedene Datenabrufmethoden (RPC, REST, GraphQL) integrieren.

Das Hauptunterscheidungsmerkmal ist Vikes Open-Source-Modell unter der MIT-Lizenz. Anstelle eines traditionellen kommerziellen Modells bietet Vike einen einzigartigen Ansatz, bei dem Unternehmen für die Unternehmensnutzung bezahlen können, was sie wählen. Ziel ist es, Vike zu 100 % Open Source zu halten, ein nachhaltiges Geschäftsmodell bereitzustellen und gleichzeitig die Zugänglichkeit für alle Entwickler sicherzustellen. Trotz seiner Flexibilität und Anpassungsmöglichkeiten betonte Brillout, dass Vike bereits für den Produktionseinsatz stabil ist und plant, bald Version 1.0 zu veröffentlichen.

Abschluss:

Vielen Dank, dass Sie es bis zum Ende meines Artikels geschafft haben! Ich hoffe, Sie fanden es informativ und haben neue Einblicke in die spannenden Entwicklungen der ViteConf 2024 gewonnen.
Die Veröffentlichung dieses Artikels hat etwas länger gedauert als geplant, da ich nur an meinen Samstagen daran arbeiten konnte – aber gute Dinge brauchen Zeit, oder? ?

Ich bin besonders meinem lieben Freund dankbar, der mir geholfen hat, den Inhalt zu überprüfen und zu verfeinern, und allen, die mich zur Veröffentlichung ermutigt haben. Besonderer Dank geht an ChatGPT und Claude? Ich hoffe, dass Sie mir dabei geholfen haben, mein Englisch zu verfeinern.

Dies ist mein erster technischer Artikel und Ihre Unterstützung bedeutet mir wirklich sehr viel. Ich freue mich darauf, mehr zu schreiben und weiterhin Wissen mit der Entwickler-Community zu teilen.
Bitte teilen Sie mir gerne Ihre Gedanken und Ihr Feedback mit – ich würde mich freuen, von Ihnen zu hören! Sie finden mich unter:
X (Twitter): @Mohamed_LamineF oder LinkedIn: mohamedlaminef.

Das obige ist der detaillierte Inhalt vonViteConf-Innovationen, Ankündigungen und der Weg in die Zukunft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!