English versionEN

Is Bun 'Actually' Faster?

Packt Book Practical Enterprise React Co-author

The JavaScript ecosystem has evolved significantly, with Bun.js marking a notable milestone. Built from the ground up in Zig, Bun.js is an all-in-one JavaScript runtime featuring an integrated package manager, bundler, test runner, and Nodejs-compatible environment designed for the growing demands of edge computing and server-side applications. My presentation will explore Bun.js's foundational principles, highlighting its performance benchmarks against traditional runtimes like Node.js, seamless TypeScript support, zero-configuration framework, and innovative features such as built-in hot reloading and efficient file operations.

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

FAQ

Bun's bundler enables efficient loading, code compatibility, and framework functionality in JavaScript applications, supporting features like file system routing and server components.

Bun uses the JavaScript Core engine from Apple, which outperforms the V8 engine in many cases, leading to faster startup times on Linux compared to Node.js.

Bun's efficiency can reduce CPU usage, leading to lower electricity consumption and helping to slow down global warming by requiring less computational power.

You can visit the official Bun and ZigLang websites for more information, as well as explore additional resources like the public benchmarking demo repo mentioned in the presentation.

Bun's package manager offers commands like install, add, remove, update, link, and supports global cache, workspaces, lifecycle scripts, overrides, and resolutions.

Bun's test runner is built-in and Jest-compatible, allowing tests to be written in JavaScript or TypeScript. It runs tests significantly faster than other popular test runners like Vtest and Jest.

Bun is a modern JavaScript runtime built for speed and ease of use. It includes tools like a package manager, bundler, test runner, and runtime.

You can install Bun by running the command 'npm install -g bun' or by downloading the binary from the official website and following the installation instructions.

Bun was built on top of Zig due to Zig's readability, ease of understanding, and ability to write performant code, which enhances Bun's performance, stability, and compatibility.

Yes, benchmarks indicate that Bun is faster than other JavaScript runtimes such as Yarn, NPM, and Webpack, with specific tests showing Bun running significantly faster in various scenarios.

Devlin Duldulao

24 min

28 Oct, 2024

Comments

Video Summary and Transcription

Welcome to React Advanced London. Today's agenda: what is bun? Features, benchmark, demo, key takeaways. Bun provides a better developer experience, faster CI, and decreased app file size. Building bun on top of Zig prioritizes performance, stability, and compatibility. Install bun with npm or download the binary from the official website. Bun is a comprehensive development toolkit with a fast and efficient package manager. Learn how to benchmark CLI commands using Hyperfine with flags. Compare different package managers. Bond is fast and provides a few features in its package manager: install, add, remove, update, link. Test the bond test runner against vtest and jest using hyperfine. Discover the features supported by the test runner and the importance of bundling in JavaScript applications. Learn about the main.js code, the performance comparison of different bundlers, and the features offered by Bun, including loaders and macros. Explore macros in Bonn and how to optimize the code by including the type macro. Discover the benefits of Bonn, such as reducing CPU usage and fast installation of node dependencies.

Available in Español: ¿Es Bun 'Realmente' Más Rápido?

Video transcription and chapters available for users with access.

Available in other languages:

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

React's Most Useful Types

React Day Berlin 2023

21 min

React's Most Useful Types

Top Content

Watch video: React's Most Useful Types

Matt Pocock

Independent

Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.

typescript react element vs component react fc react with typescript

TypeScript and React: Secrets of a Happy Marriage

React Advanced 2022

21 min

TypeScript and React: Secrets of a Happy Marriage

Top Content

Matt Pocock

Independent

React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

react best practices typescript

Making Magic: Building a TypeScript-First Framework

TypeScript Congress 2023

31 min

Making Magic: Building a TypeScript-First Framework

Top Content

Daniel Roe

Daniel leads the Nuxt core team.

Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.

typescript frameworks vue nuxt.js deep dive builders and founders

Stop Writing Your Routes

Vue.js London 2023

30 min

Stop Writing Your Routes

Eduardo San Martin Morote

Vue.js Core Team

Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.

typescript vue 3 typescript libraries

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

Rethinking Bundling Strategies

React Day Berlin 2023

32 min

Rethinking Bundling Strategies

Watch video: Rethinking Bundling Strategies

Tobias Koppers

Webpack and Turbopack Creator

The talk discusses rethinking bundling strategies, focusing on challenges such as long-term caching and improving the state of Next.js and Webpack. It explores handling immutable caching and content hashes, optimizing asset references and page manifests, and addressing issues with client-side navigation and long-term caching. The talk also covers tree shaking and optimization, optimizing module fragments and code placement, and the usage and relationship of TurboPack with Webpack. Additionally, it touches on customizing configuration and hash risks, barrel imports and code splitting, and entry points and chunking heuristics.

tool building

Workshops on related topic

React, TypeScript, and TDD

React Advanced 2021

174 min

React, TypeScript, and TDD

Top Content

Featured WorkshopFree

Paul Everitt

ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.

react best practices typescript devtools web development test driven development react

Mastering advanced concepts in TypeScript

React Summit US 2023

132 min

Mastering advanced concepts in TypeScript

Top Content

Featured WorkshopFree

Jiri Lojda

TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.

typescript devtools typescript libraries

Deep TypeScript Tips & Tricks

Node Congress 2024

83 min

Deep TypeScript Tips & Tricks

Top Content

Featured Workshop

Josh Goldberg

TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.

typescript

Best Practices and Advanced TypeScript Tips for React Developers

React Advanced 2022

148 min

Best Practices and Advanced TypeScript Tips for React Developers

Top Content

Featured Workshop

Maurice de Beijer

Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.

react typescript react with typescript best practices

Building Your Own Custom Type System

React Summit 2024

38 min

Building Your Own Custom Type System

Featured Workshop

Kunal Dubey

I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side.

typescript

Frictionless Development With Unified Type System

JSNation 2024

113 min

Frictionless Development With Unified Type System

Featured Workshop

Ejiro Asiuwhu

Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana!
Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into:
- Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.

typescript