Panel Discussion: Next Gen Build Tools

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

FAQ

Next gen build tools generally adopt new emerging standards like native ES modules and dynamic imports, try to leverage as much native capabilities as possible, and incorporate tools written in languages other than JavaScript to serve the purpose of build tools.

Next gen build tools focus on leveraging native browser capabilities and emerging standards, reducing reliance on extensive external tooling. They aim for more streamlined, efficient processes that integrate more closely with modern web development practices.

Webpack remains a powerful tool with unique features like module federation, but it has tight coupling with its plugins and pipelines, which can make switching to other build tools challenging for projects deeply integrated with Webpack.

Both Vite and Snowpack provide fast development experiences by using native ES modules with hot module replacement. Vite is more opinionated, providing a pre-configured build setup, while Snowpack offers more flexibility in choosing different bundling options for production.

The major challenge is network overhead, even with advances like HTTP/2 and HTTP/3. These protocols improve multiplexing but still cannot match the efficiency of bundled code, especially during initial page loads.

While Angular is tightly integrated with Webpack, making it difficult to switch without redesigning for bundler agnosticism, it's unlikely to replace Webpack soon due to its deep integration and features like module federation.

The panelists include Evan Yeo, creator of Vue.js and Vite; Sean aka Suik Suang, head of developer experience at Temporal I.O and the author of Coding Career Handbook; and Fred K. Schott, the author of Snowpack and Astro.

Shawn Swyx Wang
Shawn Swyx Wang
Fred K. Schott
Fred K. Schott
Evan You
Evan You
Sharone Zitzman
Sharone Zitzman
38 min
10 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Excited to be at JS Nation with a panel of experts discussing next-gen build tools like Astro and Rome, browser-native technologies, and simplified tooling. The evolution of DevTools with next-gen build tools like Snowpack and V8, focusing on individual file builds. Vue's production focus, Roam as an all-in-one tooling solution, opinionated vs. configurable build tools, challenges in tooling development, browser module loading challenges, performance optimization with VIT vs. Snowpack, high-performance tools like ES Build and Bazel, and Angular's potential switch from Webpack.

1. Introduction to Next Gen Build Tools

Short description:

I'm super happy to be here with the Git Nation team again in this excellent event of JS Nation. I am privileged and honored to be here with this excellent panel of experts. Congrats to all the winners. I'm really excited to be here. Let's start with Evan. VT is considered a next gen build tool. Existing old gen tools like Webpack can incorporate some characteristics of next gen tools. Trends include adoption of new emergent standards and leveraging more from the platform itself.

Hey there, I'm super happy to be here and to be with the Git Nation team again in this excellent event of JS Nation. And I am even more privileged and honored to be here with this excellent panel of experts Evan Yo, creator of Vue.js and Veet? Is that how you pronounce it? Veet or Veet? Veet. Veet. Veet, right, okay, so I wasn't sure about that. That's French. Yes, that's why I asked, I assumed it might be French, but then you know, the American in me wasn't 100% sure. Sean, aka SWICS, head of developer experience at Temporal.io and the author of Coding Career Hello. Hey, hey, hey. And Fred K. Schott, a Snopak author and who apparently had a very exciting launch yesterday. Just yesterday? Yep, just yesterday. That's good for you. Congratulations, and also hot on the heels of the Open Source Awards which are near and dear to my heart as a cloud native and open source IELT community lead. So that's exciting. Congrats to all the winners. I'm really excited to be here. I think this is going to be a really great session. So folks don't forget to drop your questions for our panelists. They're here now with us and you really want to hear their expert opinions on the next gen build tools. So I guess the million dollar question for all of you, and we'll let each and every one of you, first also introduce yourselves or give us a little bit of background about why you would know a lot about next gen build tools, but also what makes a tool, a next gen build tool versus just a regular old build tool. So let's start with Evan.

Sure. So I'm Evan. I work on Vue.js and VT and I guess VT is considered a next gen build tool. That's kind of the slogan, but honestly, like if I were asked to say, define what really makes it next gen, I don't think there is a very clear or definitive line. Like, we can, I think, you know, existing so-called old gen tools like Webpack, given proper redesign or improvements, can incorporate some of the characteristics of next gen tools. So I don't think it's a very definitive like this is always going to be old, this is always going to be new. In terms of technology, it's always going to be a shifting landscape. But I guess, in general, I think some of the trends I personally been seeing is adoption of these new emergent standards, leveraging more from the platform itself like native VS modules, native dynamic imports. There are some interesting stuff that is going on in the standards body, like new URL import meta, import.meta to URL, you can use that.

1. Introduction to Panel Discussion

Short description:

Excited to be at JS Nation with a panel of experts including Evan Yeo, Sean, and Fred K. Schott. The discussion focuses on next gen build tools and the evolving landscape of technology standards like native VS modules and CSS imports.

Hey there, I'm super happy to be here and to be with the Git Nation team again and this excellent event of JS Nation and I'm even more privileged and honored to be here with this excellent panel of experts. Evan Yeo, creator of Vue.js and Veet, I wasn't sure about that. Yes, that's why I asked. I assumed it might be French but then you know the American in me wasn't 100% sure. Sean aka Suik Suang, head of developer experience at Temporal I.O and the author of Coding Career Handbook, say hello. Hey, hey, hey. And Fred K. Schott, Snowpack author and who apparently had a very exciting launch yesterday, just yesterday. Yep, just yesterday. Good for you, congratulations. And also hot on the heels of the Open Source Awards, which are near and dear to my heart, as the Cloud Native and Open Source IEL community lead, so that's exciting. Congrats to all the winners. I'm really excited to be here. I think this is going to be a really great session.

So folks, don't forget to drop your questions for our panelists. They're here now with us and you really want to hear their expert opinions on next gen build tools. So I guess the million dollar question for all of you and let each and every one of you first also introduce yourselves or give us a little bit of background about why you would know a lot about next gen build tools but also what makes a tool a next gen build tool versus just a regular old build tool. So let's start with Evan. Sure. So I'm Evan. I work on Vue.js and Vite. And I guess Vite is considered a next gen build tool. That's kind of the slogan. But honestly, if I were asked to define what really makes it next gen, I don't think there is a very clear or definitive line. I think existing so-called old gen tools like Webpack, given proper redesign or improvements, can incorporate some of the characteristics of next gen tools. So I don't think it's a very definitive like this is always going to be old, this is always going to be new, right? In terms of technology, it's always going to be a shifting landscape. But I guess, in general, I think some of the trends I've personally been seeing is adoption of these new emerging standards, leveraging from the platform itself, like native VS modules, native dynamic imports. There are some interesting stuff that's going on in this standards body, like new URL or import meta, like import dot meta to URL, you can use that. And also like, I think there are ongoing work trying to standardize CSS imports as well. So a lot of interesting stuff there.

Hey there, I'm super happy to be here and to be with the Git Nation team again and this excellent event of JS Nation and I'm even more privileged and honored to be here with this excellent panel of experts. Evan Yeo, creator of Vue.js and Veet, I wasn't sure about that. Yes, that's why I asked. I assumed it might be French but then you know the American in me wasn't 100% sure. Sean aka Suik Suang, head of developer experience at Temporal I.O and the author of Coding Career Handbook, say hello. Hey, hey, hey. And Fred K. Schott, Snowpack author and who apparently had a very exciting launch yesterday, just yesterday. Yep, just yesterday. Good for you, congratulations. And also hot on the heels of the Open Source Awards, which are near and dear to my heart, as the Cloud Native and Open Source IEL community lead, so that's exciting. Congrats to all the winners. I'm really excited to be here. I think this is going to be a really great session. So folks, don't forget to drop your questions for our panelists. They're here now with us and you really want to hear their expert opinions on next gen build tools.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vite: Rethinking Frontend Tooling
JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
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.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Turbopack. Why? How? When? and the Vision...
React Day Berlin 2022React Day Berlin 2022
32 min
Turbopack. Why? How? When? and the Vision...
Top Content
The Talk discusses TurboPack, a successor to Webpack, aiming to create a framework-independent, flexible, and extensible tool for the open-source community. It addresses performance challenges by integrating SWC into Next.js. The challenges with Next.js and Webpack include orchestration issues, backward compatibility constraints, and cache invalidation problems. TurboEngine and TurboPack provide constant performance in incremental builds, leveraging Rust's predictable performance and parallelism. The Talk also covers topics like dependency tracking, task graphs, cache invalidation, lazy asset graphs, and the integration of TurboPack with Next.js. The future plans involve reconfiguring Webpack and TurboEngine, moving computations to the cloud, providing insights into builds, and facilitating migration and integration with JavaScript projects.
How Bun Makes Building React Apps Simpler & Faster
React Day Berlin 2022React Day Berlin 2022
9 min
How Bun Makes Building React Apps Simpler & Faster
BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.
The Core of Turbopack Explained (Live Coding)
JSNation 2023JSNation 2023
29 min
The Core of Turbopack Explained (Live Coding)
Tobias Koppers introduces TurboPack and TurboEngine, addressing the limitations of Webpack. He demonstrates live coding to showcase the optimization of cache validation and build efficiency. The talk covers adding logging and memorization, optimizing execution and tracking dependencies, implementing invalidation and watcher, and storing and deleting invalidators. It also discusses incremental compilation, integration with other monorepo tools, error display, and the possibility of a plugin system for Toolpag. Lastly, the comparison with Bunn's Builder is mentioned.
The Inner Workings of Vite Build
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Inner Workings of Vite Build
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.

Workshops on related topic

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
Workshop
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.