The Superpower of Asts: How We Saved 16% on Our Bundle Size

This talk is confirmed. The time of the talk will be announced soon.

The recording will be published after editing. Multipass and Full ticket holders have early access.

Discover the untapped potential of Abstract Syntax Trees (ASTs) in this transformative session. Learn how we achieved a remarkable 16% reduction in our bundle size by inlining constant objects directly into the referencing code, eliminating the need for large files in the output. This method even outperforms Terser's tree shaking used by Webpack.

We will cover:

* Introduction to ASTs: What they are and why they’re invaluable.
* Overcoming AST Challenges: How to navigate the difficulties of working with ASTs.
* Best Practices: Proven techniques for effective AST utilization.
* Avoiding Pitfalls: A secret tip to prevent common mistakes.

ASTs are everywhere, and their applications are vast. This session will empower you with the knowledge and confidence to transform your code, revealing when and how to use ASTs for remarkable results.

Join me for an inspiring journey into the world of ASTs and unlock their potential to revolutionize your coding practices!

This talk has been presented at React Day Berlin 2024, check out the latest edition of this React Conference.

build tools tooling

Omri Lavi

Video transcription, chapters and summary will be available later.

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 2021

31 min

Vite: Rethinking Frontend Tooling

Top Content

Evan You

Vue.js & Vite Creator

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.

build tools vite

React Compiler - Understanding Idiomatic React (React Forget)

React Advanced Conference 2023

33 min

React Compiler - Understanding Idiomatic React (React Forget)

Top Content

Watch video: React Compiler - Understanding Idiomatic React (React Forget)

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.

react build tools builders and founders react 19 react forget

The Future of Performance Tooling

JSNation 2022

21 min

The Future of Performance Tooling

Top Content

Addy Osmani

Engineering Leader Working on Google Chrome

Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

performance tooling devtools

How Bun Makes Building React Apps Simpler & Faster

React Day Berlin 2022

9 min

How Bun Makes Building React Apps Simpler & Faster

Jarred Sumner

Creator of Bun.

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.

performance build tools builders and founders js runtimes bun bun react

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

React Day Berlin 2022

32 min

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

Tobias Koppers

Webpack and Turbopack Creator

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.

build tools builders and founders turbopack

The Core of Turbopack Explained (Live Coding)

JSNation 2023

29 min

The Core of Turbopack Explained (Live Coding)

Tobias Koppers

Webpack and Turbopack Creator

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.

build tools bundler builders and founders turbopack

Workshops on related topic

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete

React Day Berlin 2022

86 min

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete

Top Content

WorkshopFree

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.

build tools javascript

Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay

JSNation 2023

44 min

Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay

WorkshopFree

Ryan Albrecht

You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.
Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).

tooling error monitoring debug