Highlights from ViteConf 2023
Tags: webdev, javascript, frontend, opensource
Published: 2023-10-22 16:40:53

I spent 12 hours watching [ViteConf 2023](https://viteconf.org/23/) talks to learn lot of cool new things about web dev, open source softwares, and front end technology. You can find the [list of talks here](https://viteconf.org/23/schedule). I became aware of so many amazing web dev tools and frameworks to improve developer experience. I’m going to highlight the talks I personally found most interesting.

### [Stop Writing Docs; Start Helping](https://www.youtube.com/watch?v=jcpkVJr-rUw) by [Sarah Rainsberger](https://twitter.com/sarah11918) - Docs Lead at Astro

Sarah talks about how to write great docs with many concrete examples and advices. I think this talk is beneficial to everyone because great docs is how you get people to use your software. “Write less, help more” is the central idea of the talk. I screenshotted some slides with great advice.

![Delete outdated, misleading, incorrect info from your doc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a26mbrdkw8ow92z7wap0.png)

![Do not use the word should](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3nfnbwcfvntnhu024hi.png)


![Your job is not to excite the user or make jokes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5e1buiicm79l1kcnr1q.png)

### [Road to Open Source: The Set Theory](https://www.youtube.com/watch?v=NJbCfAKtxUI) by [Anthony Fu](https://twitter.com/antfu7)

Anthony Fu talks about converting OOS that work universally instead of one specific use case or software.


![Nitro is a universal server builder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3f77akvio2ro2zz3q9u.png)


Anthony and his collaborators talks about building tools in Nuxt that allow server functions of apps - server side rendering and server APIs -  to to work with specific features of cloud providers, such as edge rendering and serverless functions. The tool auto detects each platform and allows apps to be written isomorphically.

They realized this is a problem every metaframework has to deal with and is not specific to Nuxt. So they extracted those tools into a standard tool called Nitro - a universal server builder. With Nitro taking care of the details of dealing with servers, it actually allows Nuxt to have more clear architecture for handling server side rendering, APIs, etc.

Now Nitro has been adopted by other metaframeworks such as Analog and Stacks.


![Unplugin is a universal plugin interface for bundlers such as Webpack and Vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a3apgo0e3lg9rlrnou7.png)

Similarly, they built first-party integrations to allow Nuxt to be compatible with Webpack and Vite for bundling. However, the architecture and plugin ecosystem are quite different. For example, if you want to add some transformation to some modules in the pipeline, that would require implementing the logic twice for each-plugin. That doubles the work as well as the effort for community modules to support it.

Thus they created unplugin, a universal plugin interface, that now has its own community and expanded the scope to support Rollup, Esbuild, and potentially more in the future.


![Try making your projects universal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu5k76yu3f0vbvu3j0dr.png)


### [Qwik: Performance is a Human Design Issue](https://www.youtube.com/watch?v=bvSlEweRyjE) by [Manu Martinez-Almeida](https://twitter.com/manucorporat)

Manuel explains performance differences between frameworks thoroughly and concisely with great visuals. He shows how Qwik is the first O(1) framework with regards to hydration. I highly recommend watching the whole thing.


![Qwik is the first O(1) framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p6cchn2fz2puvibvceu.png)


![Hydration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85qb32kmfwp4i5ml5ddl.png)


![Astro's Partial Hydration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzwryyp73371q16qhuf9.png)


![React Server Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb3m7arxoa1qhksktsxi.png)



![Qwik's Resumability](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/426rc0pjdw49fxpkm2z7.png)

Qwik does not ship any JavaScript initially. Everything is static. When you click on an interactive component, then the browser will download the JavaScript. This is called [Resumability](https://qwik.builder.io/docs/concepts/resumable/).


![Chrome Dev Tools Network tab shows no Javascript downloaded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2x01pi4w8vi7depz1h1.png)


![Clicking a button triggers the download allowing for interactivity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1zkd8x8o2bzz84lhift.png)


### Conclusion

I’m definitely going to try out Qwik for its unique hydration approach. Also it’s re-rendering approach is interesting as well, somewhere between React and Solid - solving for performance and mental overhead. I recommend reading this [article about Qwik’s Signals](https://medium.com/@mprasanthk27/signals-in-solidjs-vs-qwik-js-df81872af3e4).

I’m also going to NextJS conference on 10.26.2023 and I’ll share what I learned from that as well. Follow me on [LinkedIn](https://www.linkedin.com/in/junsupark-swe/) or [DEV](https://dev.to/junsupark94) for more updates about web dev and full stack engineering!