JS Nation

JSNation 2024

This talk is a ten-year retrospective into the growth of the Vue.js framework as an open-source project. It highlights the challenges faced by open-source developers, the importance of finding balance and managing scope, and the collaborative nature of the Vue community. The talk also discusses the development of Vite as a build tool and the vision for a unified JavaScript toolchain. It emphasizes the need for community alignment, contributions, and testing, while acknowledging the challenges of bad actors in the open-source community.

In this talk, Evan takes a look back at his open source journey, starting from hobby projects to today leading two of the most influential projects in the JavaScript ecosystem today: Vue and Vite. We will discuss the ups and downs during this journey, and also touch a bit on the future of the two projects.

10 Years of Independent OSS: A Retrospective

Evan You

DevOps.js

DevOps.js Conf 2022

Welcome to vidBuild, a tool that optimizes your application for production by offering fast hodgemodule replacement and support for various technologies. The build process in vidBuild involves optimizing and minifying assets, bundling JS and CSS, and generating chunks for dynamic imports. The pipeline in vidBuild includes plugins for alias, resolution, CSS modules, and asset handling. Vid is a complete build tool with a flexible plugin system and support from a vibrant community. Vite's plugin API is compatible with Rollup, and Vite aims for simplicity while pushing complexity to the plugin system.

Vite unbundled ESM dev server and fast HMR are game-changing for DX. But Vite also shines when building your production applications.This talk will dive into how the main pieces fit together to bundle and minify your code:<ul><li>Vite build as an opinionated Rollup setup.</li><li>How esbuild is used as a fast TS and JSX transpile and a minifier.</li><li>The production plugins pipeline.</li></ul>Modern frameworks (Nuxt, SvelteKit, Astro, among others) have chosen Vite, augmenting the DX and optimizations for their target use case.We'll discover Vite as a polished and extendable toolkit to craft optimized modern apps. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Inner Workings of Vite Build

Matias Capeletto

Vue.js Live Conference

Vue.js London Live 2021

Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.

Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.

Welcome to Nuxt 3

Alexandre Chopin

React Finland

React Finland 2021

<div><div>For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony. So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks. It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript. Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!</div></div><div><div> </div></div> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Eternal Sunshine of the Zero Build Pipeline

m4dz 

JSNation Live

JSNation Live 2021

Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.

Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.

Vite: Rethinking Frontend Tooling

React Advanced

React Advanced 2023

Microfrontends is an architecture used by big companies to split monolithic frontend applications into manageable parts. Maintaining a consistent look and feel across different microfrontends is a challenge. Sharing styles can be done through Vanilla CSS, CSS modules, or CSS in JS. JavaScript variables can be used in styles, but readability and runtime overhead are considerations. Sharing state in microfrontends can be achieved through custom events, broadcast channels, shared state managers, or custom PubSub implementations. Module federation with Vite allows for client composition and sharing dependencies. Configuration is similar to Webpack, and future work includes working on the QUIC framework.

From my experience one of the hardest things is to share information between microfrontends, so in this talk I would like to explain various ways on how to share a design system to ensure uniformity to the application. Another difficult thing is sharing dependencies, fortunately with module federation it can be done, but how can I use different versions of the same library and how does it work behind the scenes? I'm the creator of module-federation/vite library, with React and this library, I'd like to show you how you can achieve these results by configuring everything correctly.

Micro-Frontends With React & Vite Module Federation

Giorgio Boa

Vue.js London 2023

The Talk discusses the migration of a large frontend view application from Vue 2 to Vue 3. The strategy involves converting components to the Composition API, switching from Vuex to Pinea, and overcoming challenges with Vite configuration. The migration process includes selecting components based on the product roadmap, improving type safety, and reducing boilerplate. The results of the migration include improved type checking, faster tests, and a safer codebase.

Vue 3 is amazing, but a lot of us are still stuck on a Vue 2 monolith. Some of us are stuck even more due to technology choices made before Vue 3 was even on the roadmap. Let's outline the process of migrating a large project to Vue 3 and Vite. Techniques we can employ to get some benefits sooner, process we can apply to get things done more quickly. Things we can do to get it done eventually.

Migrating a 1000 Class Components App to Vue 3

Nikola Begedin

React Advanced 2021

VIT is a build tool that solves the problem of slow feedback loop speed by leveraging native support for ES modules in modern browsers. It allows you to write code as native ES modules and handles the parsing and serving of modules for you. VIT supports JavaScript, CSS, SAS, React, TypeScript, and TSX out of the box. It also allows for quick migration from CRA to VIT and can be used as a middleware in an existing Node.js server to enable server-side rendering.

How will we build web apps in the future? Let's learn how esbuild and bundlers like Vite built on top of it work to see how it can speed up our dev workflows. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vite - The Next Generation Frontend Tooling

Devlin Duldulao

Vue School offers free training material, workshops, and consulting services. Vite is a game-changer for Vue and web development, significantly improving the development experience. It leverages the browser's native ES modules feature and uses ESBuild. Vite's dev server is much faster than other bundlers. Vite provides a blazing fast development environment for various frameworks and supports server-side rendering and static site generation. Vite is ready for production and likely to be used by Vue CLI in the future.

In this talk you will learn what Vite is, why it is so great, and why you want to use it ASAP. You will also learn how to use Vite with Vue.js or React, and what Vitepress is and how to use it.Alex Kyriakidis, founder of Vue School, will also answer the most frequently asked questions around Vite, including production use, Vite and test runners, what it means for Nuxt, and many more. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Vite Changes the Game for Vue and Web Developers

Alex Kyriakidis

The Talk discussed new ways of using Vue, including the introduction of the composition API and the script setup syntax. The Vite tooling was highlighted for its performance improvements and developer experience enhancements. Components auto-importing through Vite plugin components was introduced as a way to improve code splitting and eliminate manual registration. The use of Vite plugins, Unplugin, and Vue 2 support were also discussed. The Talk mentioned that Nuxt 3 will include many of these features.

Brief intro to the new features of Vue 3 and Vite, then focus on how those features / mindset affect the way we think of tooling and DX. Which leads to my Vitesse project and several unplugins that enhance the Vue developer experience even further (will do some short demos in between). Finally, introduce the ways to use those new features in the existing Vue 2 apps today and make the migrations easier. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

New Ways to Vue

Anthony Fu

François will introduce ViteShot, a new open-source tool that can generate screenshots of HTML/CSS components within seconds, so you can be confident that your UI looks exactly the way it's supposed to. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#vite