#build tools

Subscribe
Build tools are programs that automate the process of creating a software application. They are used to compile source code, run tests, package applications, and deploy them into production environments. Build tools help developers save time by automating the process of building an application from its source code. In JavaScript development, build tools like Grunt, Gulp, Webpack, and Browserify can be used to automate tasks such as minifying code, running unit tests, and compiling Sass or Less files.
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.
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.
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.
Turbopack. Why? How? When? and the Vision...
React Day Berlin 2022React Day Berlin 2022
32 min
Turbopack. Why? How? When? and the Vision...
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.
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.
The Eternal Sunshine of the Zero Build Pipeline
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
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!
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.
Gain Performance! Take Your Run Time to Build Time
React Summit US 2024React Summit US 2024
12 min
Gain Performance! Take Your Run Time to Build Time
Hi everyone! I'm Rohit, a founding engineer at Tria. We are working on bringing the world to Web3 using names. My talk is about gaining performance and taking runtime to build time. There is an upward trend in libraries towards build time optimization, especially in React. Build time optimization improves performance, reduces bundle size, and provides more predictable software. Babel is a free and open source JavaScript transpiler that allows leveraging latest JavaScript features and moving computationally heavy logic from runtime to build time. Building a Babel plugin involves checking for a style prop inside an HTML tag and searching for aliases or token values. The visitor pattern is used to define the JSX type of node and access its path and attributes. The plugin can be customized for different utilities by defining aliases and tokens in a config file. Helpful resources for understanding and building custom Babel plugins include the Babel handbook, Babel docs, astexplorer.net, and the speaker's Twitter account.
Porting Turborepo to Rust
JSNation US 2024JSNation US 2024
25 min
Porting Turborepo to Rust
Everybody loves talking about Rewriting in Rust, but rewrites are hard. It’s far too easy to fall into second system effect, shipping delays, and end up losing all your users. How can you move to Rust while still shipping features and keeping your users happy? Easy, instead of rewriting, port! In this talk, we’ll go over how we ported Turborepo from Go to Rust using three different strategies: a Rust shim that wrapped the existing Go code; a Rust-Go-Rust sandwich to incrementally port dependencies; and finally a completely parallel Rust implementation. We’ll talk about why we chose these strategies, how we went about implementing them, and how we shipped them to users.
JS on the Big Screen: Making TV Apps
JSNation 2024JSNation 2024
22 min
JS on the Big Screen: Making TV Apps
JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.
Biome, Toolchain of the Web
Node Congress 2024Node Congress 2024
19 min
Biome, Toolchain of the Web
Biome is a toolchain for web projects that provides formatting and analysis. It offers high-quality diagnostics and is compatible with Prettier. Biome's analyzer includes over 200 unique lint roles and provides informative error messages. Pion, a part of Biome, aims to be fast and efficient, outperforming other tools. Biome is exploring type inference and plug-in support, and has plans to revamp its configuration in version two.
Building Reliable Backends with Durable Execution
Node Congress 2024Node Congress 2024
21 min
Building Reliable Backends with Durable Execution
This Talk explores the paradigm of message queues for reliable backend execution. It highlights the benefits of message queues, such as guaranteed delivery and offloading of long-running processes. The drawbacks of using queues are discussed, including the complexity of managing infrastructure and applications. The solution of using a reliability layer called Ingest is presented, which allows for non-blocking background tasks and provides a dashboard for monitoring and managing jobs. The Talk also emphasizes the importance of reliability in building software systems and introduces the expanding scope and functionality of Ingest.
Micro-Frontends With React & Vite Module Federation
React Advanced 2023React Advanced 2023
20 min
Micro-Frontends With React & Vite Module Federation
Top Content
Watch video: Micro-Frontends With React & Vite Module Federation
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.
Are the (module) types wrong?
TypeScript Congress 2023TypeScript Congress 2023
30 min
Are the (module) types wrong?
This Talk discusses module system complexities and terminology, TypeScript and Node disagreements, and fixing TypeScript errors with the Helmet package. It also explores module resolution and type disagreements, challenges with TypeScript and Node support, and the need for improvements in popular packages.
Start Building Your Own JavaScript Tools
JSNation 2023JSNation 2023
22 min
Start Building Your Own JavaScript Tools
[♪ music ♪ by The Illuminati plays)] I see a common thread across any project I work on. Different developers are making the same mistake and we have preferred ways of doing things. Preventing mistakes and sharing best practices are great reasons to look at tools like linters and in particular ESLint. Let's write our first rule together. We're just scratching the surface of building our own tools, which can have a massive impact on improving the developer experience.
No CRA? What now?
React Summit 2023React Summit 2023
7 min
No CRA? What now?
Watch video: No CRA? What now?
React docs suggest using production-grade frameworks like Remix, Next.js, or Gatsby. But if you want to start with a simple pure React app, you can use Vite or Parcel as generic bundlers. Nx provides facilities to set up a workspace similar to Create React app with modern features. You can modularize and scale your project using Nx libraries. Consider upgrading to a Monorepo structure and adding Next.js or Remix applications. Migration strategies are available for existing React apps.
Supercharging Your Dev Experience With Turborepo
React Day Berlin 2022React Day Berlin 2022
26 min
Supercharging Your Dev Experience With Turborepo
Top Content
This Talk explores the benefits of using TuberApple, a tool for supercharging the development experience. It highlights the advantages of monorepos, such as code reuse, shared standards, improved team collaboration, and atomic changes. TuberApple, specifically Tuburepo, offers efficient task execution through caching and optimized scheduling. It simplifies monorepo development by allowing parallel execution of tasks and seamless coordination of changes. Tubo, another tool within TuberApple, enables smart task execution, declaring task dependencies, and efficient caching in monorepos.
The State of React Tooling
React Day Berlin 2022React Day Berlin 2022
29 min
The State of React Tooling
The Talk discusses over 20 JavaScript tools commonly used by developers, including transpilers and bundlers. It highlights the pros and cons of various tools such as Sucrase, Babel, SWC, and ESBuild. The importance of TypeScript, linters like eslint, and the emergence of new tools like Rome are also mentioned. The Talk delves into the future of JavaScript, the challenges of bundling UI libraries, and the corporate era of JavaScript libraries with the backing of companies.
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
WorkshopFree
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.
Magic with Babel Macro
React Advanced 2021React Advanced 2021
20 min
Magic with Babel Macro
Babel macros allow for code transformation without multiple plugins, providing a solution to the downsides of regular Babel plugins. Understanding AST is crucial for developers working with transpilers, and exploring its structure and representations can help derive code. Babel started as a transpiler but has evolved into a tool for live code transformation. Babel macros are supported in various React-based frameworks and can be used for track translation and CSS to React Native macros. However, macros have limitations, such as being synchronous and evaluated at compile time.
Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools
JSNation Live 2020JSNation Live 2020
11 min
Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools
Today's Talk covers the evolution and future of Javascript tooling, including dependency management, transpiling, bundling, minifying, and module management. Webpack has grown in popularity and offers features like hot module replacement and code splitting. Other build tools like Rollup, Parcel, Snowpack, and ESBuild are also discussed. The Talk explores browser import and bundling-free approaches, and emphasizes the dynamic nature of the JavaScript ecosystem with evolving tools and project-specific trade-offs.
React Without JavaScript?
React Summit Remote Edition 2021React Summit Remote Edition 2021
26 min
React Without JavaScript?
This is a talk about the language of web development and how it influences what we can build. It introduces Astro, a method for building faster websites with less client-side JavaScript. Astro brings together the power of JavaScript and the speed of HTML. It explains how to mix scripting and markup using a frontmatter script. Astro allows you to use React components in an Astro application, generating server-side markup. It offers opt-in interactivity with JavaScript and an HTML-first output.
Using Rollbar in React
React Summit Remote Edition 2021React Summit Remote Edition 2021
8 min
Using Rollbar in React
Rollbar is a leader in continuous code improvement, offering industry-leading grouping technology and real-time performance to turn error messages into actionable items. The new Rollbar for React SDK introduces a new way to initialize Rollbar using the Provider component and an error boundary for automatically capturing and logging React errors. The Rollbar React SDK provides multiple ways to set the rollbar context and customize its behavior. Attendees are encouraged to provide feedback on the Rollbar React SDK source code and sign up for an extended trial period using the provided URL and promo code.