ViteConf 2024: Innovations, Announcements, and the Road Ahead

Hello ^_~ ;
I'm Lamine, and I'm excited to share my first tech article exploring the highlights of ViteConf 2024. As a tech enthusiast diving into technical writing, I look forward to your feedback and suggestions to help improve my future content.

Before we dive into the conference details, let's explore what Vite and ViteConf are?

Vite is a next-generation front-end build tool created by Evan You (the creator of Vue.js). It significantly enhances the web development experience by offering lightning-fast Hot Module Replacement (HMR) through a dev server using native ES modules. With its simple configuration, Vite bundles code using Rollup and leverages SWC (Speedy Web Compiler) for efficient code transformation.
ViteConf is an annual free online event that brings together the Vite community in an engaging and interactive format. Experts and enthusiasts gather to share knowledge and showcase new features. This year, (October 3rd-4th, 2024) marked the third edition of the event, featuring 43 workshops in a 12-hour marathon.

Summarizing 12 hours of content with a lot of technical details is challenging. But I've tried to summarize it maximally without omitting important information. To simplify our article, I've kept the original titles of most ViteConf talks and organized them into 8 main sections:

• Top Announcements from ViteConf24.
• Enhanced Vite Integrations.
• Framework-Specific Developments with Vite.
• Performance and Efficiency Boosts.
• Developer Tools and Debugging Enhancements.
• Real-World Case Studies and Success Stories.
• Future Trends and Community Growth.
• Exploring New Frontiers in Framework Design.

Our event brought some big announcements that are paving the way for Vite’s future. Visionary speakers introduced game-changing tools and platforms with the potential to reshape web development. Let’s dive into the highlights!

Void (⌀):

Evan You announced in his talk Void Zero a new company focused on building the next generation of JavaScript tooling. The company has raised $4.6 million in seed funding, led by Accel and Amplify Partners, with participation from experienced founders in the developer tools space. Void Zero works to realize Evan's vision of creating a unified, high-performance, and composable toolchain that is runtime-agnostic for JavaScript development. Evan also discussed the current progress at Void Zero and shared some impressive test benchmarks that are sure to amaze.

Bolt.new:

Eric Simons co-founder of StackBlitz, announced Bolt.new, a revolutionary tool poised to reshape the web development landscape, leveraging the established capabilities of StackBlitz's WebContainer technology. Bolt.new provides developers with a full-stack, in-browser environment that allows instant project creation, debugging, error fixing, and deployment, all powered by the state-of-the-art large language model Claude and V0.
Eric explained how Bolt.new is designed to eliminate setup time. By entering a simple prompt, developers can generate fully configured applications directly from the browser, which is truly game-changing. With integrated package management and dependency handling, the power demonstrated in his talk was unparalleled. The best way to grasp its potential is to try Bolt.new for yourself.
Not stopping at this announcement, Eric also revealed another major update: Bolt.new Core is now open-source and available at github.

OXC and Rolldown:

After Evan's introduction about OXC and Rolldown and their upcoming integration with the Vite environment, Boshen Chen, the creator of the Oxc project, introduced OXC, an ambitious, high-performance, fully integrated JavaScript toolchain written in Rust, designed to significantly improve performance and developer experience. It consists of:

• Parser: A high-performance parser that outperforms existing tools like SWC and Babel.
• Linter (OxLint): A blazing-fast linter that can analyze large codebases efficiently, containing 400+ rules from ESLint but outperforming it by 50-100 times.
• Resolver: A 28x faster module resolution system than webpack's and other existing tools.
• Transformer (in progress): A powerful transformer that can handle various JavaScript dialects, including TypeScript and JSX, currently supports TypeScript and React JSX transforms.

Future planned components include:

• Formatter: Designed to be Prettier-compatible.
• Minifier: Aiming for faster speeds and enhanced compression.

Boshen also introduced Rolldown, the future bundler for Vite, which uses OXC as its core engine. Rolldown provides high performance and supports a range of features, including tree-shaking, code splitting, and plugin compatibility.
The next step involves deeper Vite integration with OXC and Rolldown, which will lead to significant performance improvements, a more consistent developer experience, and the ability to handle even larger and more complex web applications.

New environment API: A New Era of Flexibility:

Matias (Patak) unveiled the Environment API, a significant evolution designed to enhance Vite's flexibility and performance. This API allows developers to define multiple environments (example: client, server, edge) within a single Vite project, streamlining development and deployment processes. He noted the influx of meta-frameworks like Nuxt, Remix, and TanStack since ViteConf's first year.
Key takeaways from the talk include:

• Ecosystem Expansion: Vite now supports Angular, Redwood, Remix, TanStack Start, Waku, Ember, and Meteor, with its ESM-based bundleless design and Rollup plugin API at the core of its success.
• Streamlined SSR & Unified Configurations: Vite’s adoption of Rollup’s plugin API and SvelteKit-inspired SSR structure simplifies setups, ensuring consistent dev and production environments. The Environment API allows developers to configure client, SSR, or Edge environments in a single place.
• Environment API Highlights: Each environment (e.g., client, SSR) now has its own module graph, enabling multiple environments in a single config with a new command, vite build app. Key benefits include support for multi-environment configurations, improved tooling integration (e.g., Miniflare), and enhanced plugin support for frameworks. Patak concluded by discussing Vite 6’s focus on backward compatibility and the importance of community feedback to refine the Environment API further.

TutorialKit:

Tomek Sułkowski introduced in his talk TutorialKit, an innovative open-source tool set to redefine interactive tutorial creation in the JavaScript ecosystem. Addressing the limitations of current documentation, TutorialKit provides a curated, hands-on learning experience that integrates user guides with structured demos and exercises.
Powered by WebContainers, TutorialKit is built on insights from frameworks like Svelte, Angular, and Nuxt. With a single command, npm create tutorial, developers can quickly generate a complete tutorial project—complete with lesson descriptions, code snippets, and live previews in less than a minute.
TutorialKit is highly customizable, offering dark and light themes and an interactive terminal, allowing learners to fully engage with the material. This tool empowers developers, educators, and communities alike to create more engaging educational resources directly in the browser.

pkg.pr.new:

Mohammad Bagher Abiat introduced in his talk pkg.pr.new, a tool for npm library maintainers and users to preview unreleased branches, fixes, or features without complex setup. With a simple command like:
npm i https://pkg.pr.new/${owner}/${repo}/${package}@{commit}
developers can instantly test specific versions, bypassing cumbersome methods like continuous releases.
Next steps include integrations with ESM.sh for CDN support and a custom UI, extending pkg.pr.new’s functionality to environments like Deno and Vue Playground.

In this section, we’ll explore new integrations that make Vite even more adaptable. From Angular support to enhanced testing and CI workflows, these updates reveal how Vite is expanding its reach and simplifying the developer experience.

Component Testing with Storybook and Vitest:

Yann Braga, a Storybook maintainer at Chromatic, unveiled significant new integrations with Vite and Vitest, transforming UI component development and testing. These updates introduce a Vitest plugin that converts Storybook stories into functional tests, effortlessly increasing code coverage without additional test cases. The plugin's visual debugging capability allows developers to inspect failing tests in real-time from their CI environment, fostering seamless team collaboration.
In version 9, Storybook plans to unify visual, accessibility, and functional tests into a cohesive UI and transition to ESM-only builds to reduce install size and enhance performance. These advancements reinforce Storybook’s commitment to efficient, streamlined front-end workflows and comprehensive component testing.

Make your Vite Projects Fly with Nx

Katerina Skroumpelou, Senior Engineer at Nx, highlighted the efficiency Nx brings to Vite projects. She began by discussing how Nx optimizes CI workflows and automates complex tasks, making build processes faster and more streamlined.
Next, she demonstrated using Nx with a React Vite project. The demo showcased how Nx enhances performance through features like caching and Nx Cloud integration. Nx Cloud enables scaling and task replaying, offering parallel execution to boost speed. The “nx affected” command was also featured, intelligently running tasks only for modified parts of the codebase, further optimizing CI.
Katerina emphasized that Nx plugins, like those for ESLint and Vite, simplify migrations and maintain code seamlessly without disrupting existing structures. She wrapped up by showing how to set up GitHub Actions for CI, demonstrating Nx's ability to distribute tasks efficiently across agents.

Using Vite Ruby

Irina Nazarova, who runs the consulting company Evil Martians, shared how Vite Ruby transformed developer experience in Rails applications, offering a better alternative to Rails' "No Build" approach. Vite Ruby was successfully implemented at companies like Power Home Remodeling Group and ClickFunnels, enabling more complex frontend setups while maintaining Rails’ developer-friendly philosophy.

Practicing Vite and Vitest via Node APIs

Zhao Jinjiang, a software engineer at Bit and a Vue.js Conf team member, discussed Bit’s transition from Webpack/Jest to Vite/Vitest. This switch facilitated component-driven development by allowing custom development environments with integrated testing, optimized build and test workflows, and enhanced flexibility through Node APIs.

In this section, we’ll look at how Vite is powering major frameworks like SolidJS, Svelte, and Remix. These developments demonstrate how Vite is driving new features and performance improvements tailored to each framework’s needs.

Crossing the Network Chasm

Ryan Carniato, creator of SolidJS, shared how SolidStart (reached version 1.0 in May), evolved to unify client and server development. Built on Vite, Vinxi, and Nitro, SolidStart introduced server functions and became the first JavaScript framework with a simplified, routerless architecture, achieving an impressively lightweight 4.7KB bundle size.
With funding from the Chrome team, Ryan and Alexis developed Seroval, a powerful serialization tool capable of handling asynchronous data and streaming. This led to a significant breakthrough: single-flight mutations, which efficiently combine actions and data fetching into one seamless request. They demonstrated this concept with an interactive Trello board demo, showcasing the performance gains.
Ryan also emphasized the importance of Vite's ecosystem in enabling rapid prototyping and highlighted how it has influenced the development of Solid 2.0.

The Evolution of Rollup: A Focus on Performance and Modern Syntax

Lukas Taegert-Atkinson presented recent and upcoming enhancements for Rollup:

• Performance Upgrades via Rust Migration: Rollup's integration of Rust has improved bundling speed by 20% and reduced memory usage by 5%. Next steps include a binary cache for faster loading and an asynchronous plugin parsing API.
• Optimized Tree-Shaking: Rollup’s tree-shaking has been refined to more effectively remove unused code, with optimizations for function arguments, dynamic imports, and object properties.
• Expanded Syntax Support: Rollup now supports explicit resource management, decorators, and native JSX, with potential TypeScript support on the horizon. Rollup’s commitment to performance, modern syntax support, and a seamless developer experience reinforces its position as a leading JavaScript bundler. As it evolves, we can look forward to even more powerful features and optimizations.

How Vite Made Remix Better

Pedro Cattori and Mark Dalgleish presented the improvements that came from migrating Remix to Vite.
Pedro focused on server code isolation, explaining how they moved away from relying on treeshaking to remove server code from client bundles. Instead, they implemented explicit Remix transforms and introduced .server file suffixes, which provide clear build-time errors when server code might leak to the client.
Mark covered CSS handling improvements, showing how they evolved from Remix's original URL-based CSS imports to leverage Vite's built-in features. This included better CSS chunking through Rollup and a solution for development mode that uses Vite's URL query strings for CSS imports, ensuring consistent behavior between development and production while avoiding styling flashes.
These changes brought better developer experience, more robust code separation, and more efficient CSS handling to the Remix framework, demonstrating how the Vite migration pushed them to improve their core architecture.

Qwik - Behind the Magic

Shai Reznik opens his talk with a fun, playful introduction, describing himself as a "legendary showman" with impressive claims about his technical abilities.
In the talk, Shai focuses on Qwik, a JS framework designed to optimize app performance by eliminating the need for hydration. Unlike traditional server-side rendering frameworks that rely on hydration to make the app interactive by re-running JS on the client, Qwik uses "JavaScript streaming." This process breaks the app into tiny segments, encoding the app's structure and event listeners during server-side rendering. These segments are then sent to the client, where Qwik buffers the necessary code in the background. As a result, the app becomes interactive as soon as the user interacts with it, without waiting for JS to load.
Shai explains that Qwik automatically handles this process, eliminating the need for manual optimizations like dynamic imports and lazy loading. This improves user experience and SEO by speeding up load times. He also highlights Qwik's ability to scale seamlessly, making it suitable for both simple marketing sites and complex apps. Shai reassures the audience that Qwik is stable, with a growing community and ecosystem, including integrations for authentication, testing, and deployment.
Additionally, Shai introduces future features, such as predictive buffering, AI-driven optimizations like dead code elimination, and automatic refactoring, which are aimed at further streamlining the development process and improving app performance.

Volar.js: How It Works and What's Next

Johnson Chu, the creator of Volar.js, introduced a groundbreaking framework for building language tools that support embedded languages across various environments like Vue.js, React, Svelte, and tools integrated within the Vite ecosystem. Volar.js, now widely adopted, emphasizes efficiency and modularity, making it an essential part of optimizing development workflows, particularly in projects built with Vite.
Johnson broke down Volar’s architecture, highlighting:

• The Language Core Module, which handles essential operations.
• The Language Service Module, managing embedded code and exposing APIs used effectively within Vite-powered projects.
• The Plugin Layer, enabling customization and efficient code transformations, crucial for frameworks like Vite. Erika, a core member of Volar and Astro, discussed Volar’s progress over the past year, emphasizing improvements that have benefited Vite users. The team has launched new features, enhanced performance, and resolved bugs, contributing to Volar's stability and making it a robust tool for Vite-based development.

Svelte 5: Beyond Components

Rich from the Svelte team announced a major rewrite in Svelte 5, aimed at addressing core limitations in Svelte's reactive system despite its popularity among developers. He outlined Svelte’s current structure in four points:

• Acts as a compiler generating vanilla JavaScript.
• Uses implicit, component-based, compiler-driven reactivity.
• Has limitations, such as the inability to track reactivity within functions, inefficient handling of large objects, and requiring manual array mutation updates.
• Reactive variables only function at the component's top level. He then introduced five key changes in Svelte 5:
• Introduces "runes" for explicit, universal, runtime-driven fine-grained reactivity.
• Enables reactive state sharing across components.
• Adopts signals-based reactivity with improved ergonomics via compilation.
• Claims performance advantages over other frameworks.
• Aims for a simpler learning curve and reduced code. Additionally, Rich previewed upcoming SvelteKit improvements with Vite 6’s environment API, which will allow developers to utilize platform-specific APIs (such as Bun SQLite) during local development and mix different server runtimes within a single app.

Ember's Journey to Build with Vite

Chris Manson discusses how Ember.js, a 13-year-old frontend framework, is evolving with Vite integration. Ember's legacy build system, Broccoli, posed challenges for modern optimizations like code splitting. To fix this, Embroider was introduced to bridge the gap between Ember's legacy build system and modern bundlers. It preprocesses Ember's traditional Broccoli tree into a cleaner structure that can be handled by newer bundlers. Early versions of Embroider worked with Webpack but weren't stable, leading to further work to make it compatible with Vite.
The key challenge was adapting Vite's module-first approach to work with Ember's older AMD-based modules. The solution involved re-architecting the build process, where Vite drives the build with an Ember plugin, rather than Ember CLI running Vite. The Embroider Vite plugin was created to handle module resolution and metadata, ensuring smoother integration.
The outcome is a working system for Ember apps to build with Vite, with efforts ongoing to make this the default experience for new projects.

In this section, we’ll discuss the tools and techniques that push Vite’s performance to new heights. Talks on Nitro v3, Rust integration in Rollup, and local-first SQLite apps reveal strategies for building faster, more efficient applications.

The Power of Rust: Taurify the Web

Atila, the X Lead at CrabNebula and a key contributor to the Tauri working group and SolidJS DX team, introduced Taurify, a new SDK designed to transform web applications into native desktop and mobile apps using Tauri technology.
Five Key Features:

1. Simple Integration: Works seamlessly as a package/crate in development mode.
2. Optimized Builds: Reduces build times from minutes to seconds with over-the-air updates.
3. Developer Tools: Comes with debugging features and hot module replacement.
4. Cloud Integration: Supports automated deployment and comprehensive release management.
5. Production Ready: Optimizes bundle size and manages app updates efficiently.

Live Demos:

• Simple App (Solid Hacker News): Atila demonstrated basic Taurify integration, including JSON configuration, real-time development features, and the deployment process.
• Complex App (Mastodon Client): He showcased Taurify's capabilities, demonstrating smooth integration with complex codebases and efficient cloud deployments.

Magically Optimizing Your Fonts

Daniel Roe, Nuxt core team lead, presented innovative methods for optimizing web font performance using Vite and Nuxt. He explained the challenges of web fonts, like layout shifts and performance issues. Roe introduced 3 tools:

• Fontaine: an existing tool that injects font metrics into CSS at build time.
• Unifont: a new open-source tool for accessing font provider APIs uniformly.
• Nuxt Fonts: a zero-config module built on both that automatically handles font optimization, ensuring privacy and performance by serving fonts locally.

Daniel also highlighted Vite's strengths, particularly its polymorphic nature that enables seamless collaboration between frameworks like Nuxt and the Vite team.

Building the Next Meta-Framework for Angular with Analog

Brandon Roberts, creator of AnalogJS and an NgRx maintainer, introduces AnalogJS, a meta-framework for Angular built on Vite. He announced the release of AnalogJS V1.8, which aims to enhance the Angular ecosystem with tools like Vite, Nitro, and Nx for a full-stack solution. Analog leverages modern Angular features like standalone components and enhanced server-side rendering (SSR), offering file-based routing, static site generation, and integrated API routes.
Key Features & Integrations:
• SSR & Static Generation: Support for various platforms (Node, Edge, Vercel, etc.).
• API Routes: Easily define server endpoints alongside components.
• Testing Tools: Integrations with Vitest and Playwright, aligning Angular with modern testing practices.
• Storybook & More: Vite powers integration with component libraries like Storybook.
Roberts also teased experimental features, including Analog Single File Components (SFCs) and form actions, aimed at simplifying client-server data handling.

Performance! Performance! Performance!

Bjorn Lu opened with humor, joking about a "performance myth" before diving into strategies for improving web app performance. They highlighted three key aspects:

1. Efficiency: Reducing unnecessary operations, like using a simple loop instead of map/filter/reduce.
2. Minimalism: Only using required library parts, writing custom code when simpler.
3. Resourcefulness: Leveraging system resources, such as worker threads to parallelize tasks. To identify bottlenecks, the speaker recommended turning "vague" user reports into specific, actionable issues. They demonstrated using profiling tools like Chrome DevTools and npmgraph. The talk featured several optimization case studies:
4. Improving package speed 4x through targeted profiling
5. Using worker threads for faster CSS processing
6. Reducing Rollup's memory usage by dynamic computation The speaker emphasized that small, incremental improvements can compound over time. But they cautioned about balancing performance gains with maintainability.

Building Web Polyliths with Vite

Igor, a software engineer at Cloudflare and a former contributor to Angular, discusses the concept of "web polyliths" as an alternative to traditional monolithic web applications (polylithic applications consist of many components, functioning independently to improve flexibility and robustness). He emphasizes the benefits of polylithic applications, which consist of multiple independent components that can operate in different contexts, contrasting them with monolithic applications that typically have a single-entry point and can lead to performance issues, inefficiencies, and security risks.
Key points include:
• Current State of Monolithic Applications: Many applications today, such as SPAs and Node.js apps, are monolithic, resulting in various drawbacks like slower performance and increased fragility.
• Advantages of Polylithic Architecture: These applications can be faster, more secure, and easier to understand, as they allow for separate deployment and less shared state, reducing the attack surface.
• Complexity Considerations: While polyliths have clear benefits, they introduce complexity in configuration, building, and deployment. However, developers often unintentionally create polyliths, especially in full-stack applications.
• Vite v6's Role: The new Environment API in Vite v6 simplifies the creation of polylithic applications by enabling multiple environments and independent builds without overwhelming complexity, providing features like hot module replacement (HMR).

A First Look at Nitro v3

Pooya Parsa, creator of UnJS and Nitro, introduced Nitro v3, a server toolkit for building deployment-agnostic servers with powerful APIs. Nitro simplifies the compilation and bundling of applications for any provider.
Key Components:

• Runtime Features: API routes via a file system structure, a built-in render layer for SSR, a storage system, task runners, caching, and an embedded database.
• Builder API: Bundles application logic with Nitro’s features for production, powered by Rollup. It also includes a development server with quick rebuilds, with plans to switch to Vite for faster performance.

Nitro v3 prioritizes compatibility with web standards and edge platforms while maintaining Node.js support. The new API simplifies server definitions and enhances composability, observability, and testability.
Pooya also announced H3 v2, released with Nitro v3, featuring a smaller bundle size and faster response handling, fully based on web standards. Future updates will explore Vite integration and hybrid-native polyfills for better compatibility and performance on edge platforms.

In this section, we’ll cover the updates aimed at streamlining debugging and testing. New features in Chrome DevTools, Vitest, and the Vue Devtool Kit provide developers with greater control, helping simplify the development process.

Four Amazing DevTools Updates You'll Love

Jecelyn from the Chrome DevTools team introduced four essential tools for faster, more effective debugging:

1. Persistent Element Inspection: Use "Emulate a Focused Page" to keep elements like dropdowns visible while inspecting. More techniques are available in a linked video.
2. AI-Powered Error Solutions: With Gemini, click the new light bulb icon on errors for AI-generated explanations and tailored fixes.
3. Enhanced Performance Panel: Core web vital metrics now update in real time without needing to record, and developers can compare local and real-world user data.
4. API Mocks with Network Overrides: Mock API responses to test UIs before the backend is ready, with overrides stored locally for easy edits.

Vitest: Revolutionizing JavaScript Testing

In a series of 3 technical deep dives,(the state of vitest, Getting started with vitest code coverage and Testing types with vitest and except-type ) Vitest core team members, Vladimir (Vitest & Vite team member), Ari (Vitest core team & StackBlitz engineer), and Misha Kaletsky (author of expect-type) shared updates about Vitest, a fast and modern testing framework for JavaScript that has seen its weekly downloads triple to approximately 6 million in the past year.

Vitest 2.1 Highlights:

• Browser Mode: Significant improvements and a new UI for running tests in the browser, enabling testing of frontend code in a real browser environment.
• Coverage: Enhanced coverage features, including V8 coverage for browser mode, providing faster and more accurate coverage reports.
• Type Testing: Integration of expect-type for compile-time type checking.
• VS Code Extension: A rewritten extension for faster performance, debugging, and coverage visualization. Key Features and Improvements:
• Faster Test Execution: Optimized performance and caching mechanisms.
• Improved Debugging Experience: Enhanced debugging capabilities in the VS Code extension.
• Comprehensive Coverage Reports: Detailed coverage reports with granular insights.
• Seamless Type Checking: Integration of expect-type for robust type verification.
• User-Friendly UI: A visually appealing and intuitive user interface.

The talks also showcased practical demonstrations of these features, emphasizing the ease of use and efficiency of Vitest. The speakers highlighted the benefits of using Vitest for modern JavaScript and TypeScript development, particularly its ability to accelerate development workflows and ensure code quality.

Devtool Kits in the Vue.js Ecosystem

Guillaume Chau, a Vue.js Core team member, introduced the Devtool Kit, a unifying framework to streamline and enhance the development and compatibility of debugging tools across Vue.js, Nuxt, and potentially other frameworks. The feature-rich but incompatible Nuxt and Vue Devtools prompted the creation of the Devtool Kit, which aims to unify them under a common set of utilities and APIs.

The main goal is to standardize utilities and APIs to allow seamless interoperability between Devtools and facilitate the creation of new Devtools for any framework, beyond just Vue.js or Nuxt, while supporting various environments like browsers, Node.js servers, or standalone applications.

The Devtool Kit has four modules:
Main Module: Registers page modules and controls overall functionality.
Page Module: Operates within the user application context, allowing interaction with app state.
View Module: Manages the visible interface, displaying information to the user.
Server Module: Handles server-side interactions during development.
The Devtool Kit features a bidirectional, typed communication system using technologies like postMessage and WebSockets, enabling seamless interaction between modules, regardless of context.

Let’s not forget the modular “applets,” which provide a highly customized Devtools experience, integrating features from Vue.js, Nuxt, and even third-party tools like Pinia or Tailwind.

New & Upcoming Features in the Node.js Module Loader

Joyee, a Node.js contributor, presents recent and upcoming improvements to Node.js module loading system, focusing on better ESM support and developer experience.

Released Features:

1. ESM in require() (experimental)
   o CommonJS modules can now require() ES Modules.
   o Limitation: No top-level await support.
   o Coming to Node.js 23 stable.

2. Developer Improvements
   o Auto-detection of ES modules in .js files.
   o Module compile cache for faster loading.
   o Built-in module detection without top-level await.
   o Tools to locate problematic top-level await code.

Upcoming Features

1. Package Management:
   o New exports condition to prevent dual package issues
   o Better CommonJS to ESM migration support

2. Developer Tools:
   o Synchronous module loader hooks
   o Runtime configuration files for environment setup

The focus is on improving ESM support while maintaining backwards compatibility and developer experience.

In this section, we’ll dive into real-world applications of Vite. Case studies from Excalidraw, Shopify, and other projects highlight how Vite’s speed, flexibility, and developer experience make a difference in production environments.

Migrating Excalidraw from CRA to Vite

Aakansha, a maintainer of Excalidraw, discusses the experience of migrating the project from Create React App (CRA) to Vite, driven by the need for faster build and HMR times, greater flexibility, and better maintenance.
The migration process started after Patak integrated Vite into Excalidraw in 2021, which caught the team's attention. They decided to migrate due to Vite's faster build times, better hot module replacement, and growing community, the challenges is:

• Testing: Migrated to Vitest with community support, using vitest-canvas-mock for canvas-based testing.
• PWA Support: Implemented caching for locales and fonts using vite-plugin-pwa, resolving issues with a custom Rollup configuration.

However, the team encountered a major issue after deployment - significant performance degradation in the HMR for large files. This negatively impacted the developer experience, leading to a revert. After investigation and removing a plugin, they were able to resolve the issue and successfully deploy.
Excalidraw’s Vite migration, completed with substantial community help, enhanced the developer experience and streamlined builds.

Scaling Vite at Shopify:

Jason Miller developer working on Shopify's largest React codebase (5 million lines of TypeScript and 800 routes), Jason highlighted the benefits of migrating from Webpack to Vite. This migration led to a 15-second startup time, reduced HMR performance from 12 seconds to 5 milliseconds, and optimized module count from 18,000 to 2,300. These improvements allowed the team to shift to local development instead of relying on cloud-based IDEs.

Video Game Development with Vite

Christoph Nakazawa, Game developer Christoph explained how Vite enabled him to build Athena Crisis, a cross-platform game with 214,000 lines of JavaScript. Vite provided 30ms hot-reloading, offline support through the vite-plugin-pwa, and allowed seamless bundling of both frontend and backend code, leading to a fast, 3-minute deployment cycle across multiple platforms.

How the Viteconf 3D Puzzle was Built

Alvaro Sabu, a developer experience engineer at Storyblok and creator of the TresJS library, shared the journey of building the 3D puzzle on the ViteConf landing page. This interactive puzzle, which users can solve via an integrated code editor, was created with TresJS, a Vue-based 3D library.
Alvaro described key steps in designing the puzzle: creating tetrahedron and octahedron pieces, implementing rotation logic with quaternions and animation frames, and integrating it seamlessly into the webpage. A standout feature was the use of WebContainers to embed a Vite development server within the page, allowing users to edit the JavaScript behind the puzzle in real time.
Alvaro also offered insights on overcoming challenges, like using temporary groups for consecutive rotations and optimizing performance. The project highlights TresJS and WebContainers' capabilities for creating immersive, editable 3D web experiences.

In this section, we’ll discuss the future of Vite’s ecosystem and its community focus. Talks on documentation, open-source principles, and framework convergence emphasize Vite’s role in building a collaborative, forward-looking developer community.

Anthony's Road to Open Source II: The Progressive Path in Open Source

Anthony Fu explored the concept of progressiveness in open-source tool development during his talk. Here are the key takeaways:
What Makes a Good Open-Source Tool?

• Solves a Problem: A good tool significantly reduces effort compared to manual methods.
• Easy to Learn and Use: A low learning curve encourages wider adoption.
• Community-Driven Improvement: User feedback and contributions drive ongoing improvement. The Importance of Progressiveness:
• Progressive Onboarding: Tools should be accessible to beginners with an easy learning curve.
• Progressive Integrations: Flexibility to adapt and integrate with various scenarios is key.
• Progressive Features: Powerful features should be introduced gradually, allowing users to deepen their knowledge over time.
• Progressive Breaking Changes: Breaking changes should be introduced smoothly, with migration paths and options for backward compatibility. Anthony also provided examples of progressiveness in tools like Vue, Nuxt.js, and Vite, explaining how each follows a progressive path to enhance user experience and adaptability.

Docs as Community Building

Sarah Rainsberger's talk emphasized how documentation is a powerful, often overlooked tool for community growth. Investing in well-maintained and accessible docs nurtures an engaged, sustainable community, strengthening the project overall.
She explains how docs can foster an active open-source community:

• Strong communities are crucial for project health - more users => more bug reports => feedback, and potential contributors.
• Documentation is an underutilized resource for community building, as it has a low barrier to entry compared to code contributions.
• Docs serve many important purposes like education, onboarding, and marketing that can reduce maintainer burden.
• Identify existing community helpers and invite them to directly improve documentation, even for small fixes.
• Translators are valuable contributors who spot unclear passages that need clarification.
• Doc’s contributors can be onboarded as future code contributors, demonstrating project usability.
• Provide clear contribution guidance, easy tasks, and public recognition to encourage more participation.
• Investing in high-quality, community-built documentation is crucial for open-source project growth and sustainability.

The Future of the Web is Local First

Ben Holmes introduced "local first" apps, showcasing their potential to run entirely in the browser. He demonstrated this using Astro and emphasized how SQLite can be managed client-side with libraries like SQLocal, securely storing data in the browser. The key takeaways are:

1. Document Editor: A simple editor allowing users to create, edit, and save documents directly in the browser's SQLite database, ensuring data persistence without external storage.

2. Search Functionality:
   . Basic Search: Initially implemented a text search using SQL’s LIKE operator.
   . AI-Powered Search: Integrated the Universal Sentence Encoder from
   TensorFlow for intelligent, similarity-based searches, enabling users to find relevant documents even with vague terms.

3. Technical Insights: Discussed challenges such as loading large AI models in the browser and the importance of using web workers for improved performance.

4. User Experience: The demo featured browser-native elements for accessibility and smooth animations with view transitions, enhancing the search experience.
   In conclusion, Ben highlighted the exciting future of on-device AI computation in local-first applications.

From Frameworks to Primitives

Mathias Biilmann, CEO of Netlify, outlined the shift in web development from monolithic structures to Jamstack and modern frameworks, emphasizing the benefits of decoupling the frontend and backend for greater flexibility and scalability. While early frameworks like Gatsby, Next.js, and Nuxt.js streamlined workflows, they also added complexity.
Biilmann now advocates for a transition to smaller, composable primitives that allow for more tailored web applications. Vite plays a key role in this shift, offering a solid foundation that has catalyzed new frameworks like Astro, TanStack Start, and Vike. These frameworks prioritize simplicity, modularity, and performance, empowering developers to build efficient and maintainable web applications.

Converging Web Frameworks

Minko Gechev, Angular’s product lead at Google, discusses the similarities between Angular and React, along with future trends in front-end frameworks. He explains how both frameworks, despite using different syntaxes (templates vs. JSX), utilize similar approaches for change detection and optimization.
A core focus of Minko’s talk is the introduction of Signals, a primitive also used by frameworks like Vue, Solid, and Svelte. Angular's implementation of Signals has improved performance by tracking data dependencies and minimizing unnecessary re-renders.
Minko highlights Angular’s collaboration with Google’s Wiz framework, aimed at sharing performance optimizations and enhancing the developer experience. Notable examples include event replay, which efficiently addresses interactivity gaps, and incremental hydration, which improves page load performance.
He predicts that frameworks will continue to converge on fine-grained code loading and event replay to enhance user experience, emphasizing stability, ecosystem, and personal preference when choosing frameworks.

The Culture of the Vite Ecosystem

Brian Douglas (B Dougie), a key figure behind the OpenSauced project, discusses the culture and growth of the Vite ecosystem. He highlights that Vite is now seeing 15 million downloads per week, an impressive milestone.

Dougie also introduces StarSearch, a tool developed by his team to identify key contributors in the Vite community, spotlighting figures like Anthony Fu, Patak, Brandon Roberts, and Toby for their role in driving Vite's development and adoption. Dougie concludes with a quote from Evan Yu, emphasizing that great contributors are the key to Vite's success, and that Vite's focus on developer experience and problem-solving is central to its growth across front-end ecosystems.

In this section, we’ll explore pioneering frameworks pushing Vite to new capabilities. Talks on Vike, WebAssembly integration, and Zero to One showcase how Vite is enabling innovative approaches that shape the next generation of web applications.

Reinventing the Framework, from Zero to One

Nathan Wienert introduced "One," a new React framework that distinguishes itself with two primary features:

1. Seamless Dual Serving: One allows Vite to serve both React Native and Web applications simultaneously, offering file system routing and hot reloading for both environments.
2. Local-First Integration: It emphasizes a local-first approach by integrating with Zero, providing a solution for data management that supports code sharing between web and native apps.

Setting up is straightforward: create a One app using npx one, and it functions as a Vite plugin for easy configuration. One supports various rendering modes (server-side, static, or client-side) and enhances web features with Tamagui for optimized styling.

The framework efficiently handles data fetching and syncing between server and client, using SWC to replace Babel for faster build times. With platform-specific extensions, it enables distinct experiences across devices, showcasing its versatility for both static and dynamic applications.

Nathan's session emphasized One's goal to seamlessly bridge web and native app development, making it available now, with Zero approaching public beta.

JavaScript as Source and Target for Wasm

Natalia Venditto, a principal lead for JavaScript developer experience at Microsoft Azure, discusses how WebAssembly enables high-performance code execution in JavaScript environments, both client-side and server-side.
Key Technical Points

1. WebAssembly Basics
   o Compiles code from languages like C++/Rust to portable binary.
   o Integrates seamlessly with JavaScript via WebAssembly bindings.
   o Runs compute-intensive operations more efficiently.

2. Development Tools
   o Vite plugins for WebAssembly integration.
   o Debugging support in browsers and VS Code.
   o Direct source-level debugging of compiled code.

3. Component Model
   o New architecture for better cross-language support.
   o Handles complex data types beyond numbers.
   o Enables JavaScript-to-WebAssembly compilation.

Finally, she emphasizes the potential of WebAssembly for portability and composition in development and invites developers to engage with the evolving tools and plugins available in the Vite ecosystem.

Vike - Next Generation Frontend Framework

Rom Brillout presented Vike, a next-generation frontend framework designed for flexibility. He explained that Vike is like Next.js or Nuxt, but with highly customizable extensions that allow developers to use any UI framework. For example, Vike can run apps with a mix of React, Solid, or even Vue 2 and 3 in the same project. It supports all rendering strategies (SPA, SSR, and SSG) and integrates with various data-fetching methods (RPC, REST, GraphQL).

The key differentiator is Vike's open-source model under the MIT license. Rather than a traditional commercial model, Vike offers a unique approach where companies can pay what they choose for enterprise use. The goal is to keep Vike 100% open-source, providing a sustainable business model while ensuring accessibility for all developers. Despite its flexibility and customization options, Brillout emphasized that Vike is already stable for production use, with plans to release version 1.0 soon.

Conclusion:

Thank you for making it to the end of my article! I hope you found it informative and gained new insights into the exciting developments from ViteConf 2024.
This article took a bit longer to publish than planned, as I could only work on it during my Saturdays—but good things take time, right? 😊

I'm especially grateful to my dear friend for helping me review and polish the content, and to everyone who encouraged me to publish. Special thanks to ChatGPT and Claude 😛 for helping me refine my English, I hope it came across well.

This is my first technical article, and your support truly means a lot to me. I look forward to writing more and continuing to share knowledge with the developer community.
Please feel free to share your thoughts and feedback—I'd love to hear from you! You can find me on:
X (Twitter): @Mohamed_LamineF or LinkedIn: mohamedlaminef.

Comments

[William S]

👌