React Advanced

React Advanced Conference 2023

React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization.

React Forget Compiler - Understanding Idiomatic React

Joe Savona

Mofei Zhang

JS Nation

JSNation 2023

The Core of Turbopack Explained (Live Coding)

Tobias Koppers

React Day Berlin

React Day Berlin 2022

Bun’s builtin JSX transpiler, hot reloads on the server, JSX prop punning, macro api, automatic package installs, console.log JSX support, 4x faster serverside rendering and more make Bun the best runtime for building React apps

How Bun Makes Building React Apps Simpler & Faster

Jarred Sumner

Turbopack. Why? How? When? and the Vision...

DevOps.js

DevOps.js Conf 2022

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

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 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

Evan You

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

TS Congress

TypeScript Congress 2023

Have you ever installed a dependency, imported it just like the README instructs, and immediately been met with strange TypeScript errors about default imports, the output module format, or ESM/CommonJS interoperability? When everything works at runtime but TypeScript complains, you might wonder, is this a TypeScript bug? Or… are the types wrong? The JavaScript module and package publishing landscape is complicated. Nearly one third of the most popular types-included npm packages have some sort of module-related typings issue that can cause confusion for users. But things are starting to improve. In this talk, we’ll: - explore how we got here—why are things complicated? - develop a simple and accurate mental model for how TypeScript sees packages - see how the `arethetypeswrong` tool can help catch issues before publishing - look at trends in the `arethetypeswrong` data for popular packages over time - discuss next steps for making the typed package ecosystem better

Are the (module) types wrong?

Andrew Branch

Your first JavaScript tool might not be the next Babel or ESLint, but it can be built on them! Let's demystify the secret art of JavaScript tools, how they work, and how to build our own. We'll discover the opportunities in our everyday work to apply these techniques, writing our own ESLint rules to prevent mistakes and code transforms to make breaking changes easy to apply. We’ll walk through the fundamentals of working with an abstract syntax tree, and develop our understanding through a live-code. You will be amazed at what you can build, and together we’ll explore how to get started.

Start Building Your Own JavaScript Tools

Will Klein

React Summit

React Summit 2023

So CRA is no more and it probably was about time. The React docs suggest Next, Remix or Gatsby...but you're not ready yet for a full-blown React Meta-Framework and really just want pure React. Any alternatives? In this talk, I'm going to explore exactly that. We've got 7 minutes, so no slides, just code where we're going to set up a new React standalone application using Nx.

No CRA? What now?

Juri Strumpflohner

Monorepos is a hot topic in the TypeScript/JavaScript community these days, but getting a high performing monorepo setup from the ground up can be challenging. In this talk, we will see how Turborepo can help you to move your monorepo tasks at light speed.

Supercharging Your Dev Experience With Turborepo

Bruno Paulino

Emerging build tools such as Bun, ESBuild, SWC and Rome will transform how we work with React in the future. Let's take a look at their current state, look at what's needed to adopt them and predict how the landscape will evolve.

The State of React Tooling

Jonny Burger

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.

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete

Hussien Khayoon

Kahvi Patel

React Advanced Conference 2021

The talk will cover all the possibilities Babel Macro opens up and also gives an overview of Abstract Syntax Tree. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Magic with Babel Macro

Dhrubesh Deb Sharma

JSNation Live 2020

In this talk, I'd go through the Evolution of JavaScript Tooling and frontend build tools, Javascript itself and the future of them all. Also, Babel and other build tools, what they might most likely be in the future. Also, I'd talk about javascript itself as a language, it's present and it's future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools

Shedrack Akintayo

Panel Discussion: Next Gen Build Tools

Shawn Swyx Wang

Fred K. Schott

Sharone Zitzman

React Summit Remote Edition

React Summit Remote Edition 2021

If React runs on a server and no one is around to see it, does it still make a sound? In this talk, Fred explores the world of server-side optimizations: what's possible today and what does the future hold? Featuring a sneak peek at an exciting new, never-before-seen project from the Snowpack team to help you build faster sites with React! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Without JavaScript?

Using Rollbar in React

Jeff Hoffer

#build tools