All You Need to Know from My 12-Hour ViteConf23 Marathon

A well-known quote by Tolstoy is that “the two most powerful warriors are patience and time”. And although I can say that I have the patience, I definitely do not have the time anymore. This is because I have spent a good amount of time watching all of the ViteConf talks, which lasted for 12 hours, although on a good chunk of them, I was able to watch at 2x speed because even I don’t have that much patience.

What is “Vite”?

If you don’t quite know what ViteConf is, you probably don’t know what Vite is either. But that’s okay because you came to the second-best place to learn about it (its documentation being the first).

Before introducing ES modules in web browsers, developers lacked a built-in method for structuring JavaScript code in a modular fashion. Consequently, the practice of “bundling” became commonplace, involving the utilization of tools that would crawl, process, and concatenate source modules into files suitable for browser execution.

Over time, we witnessed the emergence of tools like webpack, Rollup, and Parcel, which significantly enhanced the development experience for frontend developers. Nonetheless, as our applications grew in complexity, the volume of JavaScript code also surged dramatically. It’s now typical for extensive projects to encompass thousands of modules. This led to a performance bottleneck for JavaScript-based tooling, resulting in prolonged wait times (sometimes extending to minutes) to start a development server. Even with Hot Module Replacement (HMR), changes to files could take several seconds to reflect in the browser. This sluggish feedback loop has a substantial impact on developers’ productivity and overall satisfaction (usually referred to as DX).

Vite seeks to tackle these challenges by capitalizing on recent advancements in the ecosystem: the adoption of native ES modules within web browsers and the proliferation of JavaScript tools written in languages that compile to native code (more on that later).

A Quick Rundown of ViteConf

With Vite’s rising popularity and far reach in the frontend world, in 2022 ViteConf was born, and this year we got its second iteration. Given the extensive array of talks and discussions, this blog post will take a concise, bullet-point approach as the most suitable format for capturing the essence of the event. So, without further ado, here are my key takeaways:

Vite

Vite is clearly setting itself to be THE build tool for any and all frameworks by keeping itself lean and keeping the Vite Core small, by leveraging its plugin system for anything that is not “core”, while maintaining the health of said plugins using an amazing CI workflow that constantly tests these and prevents issues before releases: GitHub — vitejs/vite-ecosystem-ci;

Remix

Remix is considering moving to Vite, once again signalling its growing popularity: Just use vite! · remix-run remix · Discussion #7632 · GitHub;

Rolldown

Rolldown, a Rust port of Rollup (with a slightly larger scope) is being built by contributors of rspack, with a focus on performance with best-effort compatibility with Rollup, to replace esbuild and Rollup in Vite. Clearly, the focus lately has been to “rustify” all the tools;

Rollup

Rollup will still be in active development for the time being, however, so Rolldown will need to do some catchup:

Volar

Volar, a LSP / Editor Tooling tool with the same maintainability philosophy of Vite, is now the official VSCode plugin for Vue and Astro;

Storybook

Storybook is getting things ready for its 8th release with great perf gains while dropping webpack for Vite users;

SolidJS

Ryan Carniato (creator of SolidJS) gave a wonderful talk about what it means to be a “meta-framework”, as well as how they are trying to destroy SolidStart as it is, and rebuilding it with platform agnostic tools such as Vinxi, Nitro, Bling and Vite, reducing the LoC from 10.000 to 1.200;

RedwoodJS

RedwoodJS is becoming more and more interesting… If you want to build something solid, use the right tools and not worry about tool nitpicks, this is for you! They are also switching to Vite, obviously. However, upon opening Redwood’s repo you will find over 400 open issues, which is expected since they are glueing together a lot of tools, whereas an alternative such as Adonis, might signal a more resilient and stable product.

How to write great documentation

A great talk by Sarah Rainberger about how to write great documentation. She emphasizes the importance of thinking about the reader’s needs and organizing documentation accordingly. She tries to create sections that can be logically grouped and directed accurately for specific reader needs. She also stresses the importance of clear and correct documentation for the success of a project, and encourages the focus to be on helping rather than “following specific writing rules.” In her discussion about writing effective documentation for Astro’s docs, Rainsberger emphasizes the importance of using simple and direct language, providing clear instructions, focusing on the reader’s context, and using words like “should” and “must” carefully. She also highlights the importance of contextual help in making documentation easy for readers to discover and navigate.

Astro

Astro creator, Fred K Schott, talked about ViewTransitions and how cool they are, and from my point of view, they’re here to shake things up on the MPA vs SPA debate;

React Router

Kent C. Dodds talked about how React Router + Vite is a framework and how he prefers the stronger capabilities of a conf-based router vs a file-based one for customizability;

Tauri

Tauri v2 is about to enter its beta phase, which heralds an exciting opportunity for iOS and Android app development, in addition to all the benefits that v1 has already brought on. Additionally, the team behind it is actively crafting a suite of tools for tasks such as updates, distribution, and app signing — although it’s worth noting that these services will for sure be offered on a paid basis. Will it be able to compete with what Expo did with React-Native though? Only time will tell…;

pnpm

A new feature for pnpm is catalogs, which was created to help with pinning a version to a whole workspace and better ensure that everyone is using the same one with no hassle;

Analog

Brandon Roberts demonstrated the integration of Vite, Nx, and Nitro in Analog, the Angular meta framework, with features such as a versatile file-system router supporting various layouts, SSR and SSG capabilities, and file-based syntax for defining API routes.

And that wraps it up! While I couldn’t cover every aspect of ViteConf 2023, I trust that I was able to provide an insightful glimpse into the ever-evolving frontend development landscape.

With discussions spanning from Vite’s future to the rise of ESM and the introduction of promising tools like Rolldown and Volar, the conference showcased the industry’s dynamic nature. And from Tauri, Rolldown and all the way to Rollup, Rust’s presence is being felt as being a cornerstone language to the frontend tool development ecosystem more and more.

Overall, ViteConf did a wonderful job highlighting the continuous innovation and collaboration that drive this dynamic field forward, and I’m very excited to see what the industry will present next year.

All You Need to Know from My 12-Hour ViteConf23 Marathon was originally published in YLD Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.