FYI: Phoenix drops webpack and npm for esbuild

The Phoenix Framework is the go-to web framework for Elixir developers. A recent PR was merged that replaces the use of node, npm, and webpack with esbuild. For those new to esbuild, it is written in Go so it compiles to native code and runs really f

Fly.io logo
Fly.io
•
Mark Ericksen
•4 min read•intermediate•
--
•View Original
ElixiresbuildJavaScriptRedis

Overview

The article discusses the Phoenix Framework's transition from using Node.js, npm, and webpack to esbuild for asset management. This change aims to simplify the development experience for Elixir developers by reducing dependency issues and improving build reliability.

What You'll Learn

1

How to leverage esbuild for asset management in Phoenix applications

2

Why the Phoenix Framework moved away from Node.js and webpack

3

When to consider using esbuild for JavaScript bundling

Key Questions Answered

What prompted the Phoenix Framework to switch from webpack and npm to esbuild?
The Phoenix Framework switched to esbuild due to significant issues with npm and webpack, which accounted for 591 and 79 issues respectively out of 2,034 total issues. This change aims to alleviate the burden on new users and ensure long-term reproducible builds.
What are the benefits of using esbuild for Phoenix developers?
esbuild is written in Go, compiles to native code, and runs faster than previous tools. It simplifies the asset management process, providing a seamless experience for newcomers and a reliable build system for long-term projects.
How does the change to esbuild impact existing Phoenix projects?
Existing Phoenix projects can still use their customized setups with webpack or other tools. The transition to esbuild does not prevent developers from integrating their preferred asset processing tools.

Key Statistics & Figures

Total issues related to npm
591
Out of 2,034 total issues in the Phoenix project.
Percentage of issues related to JavaScript packaging
30%
Approximately 30% of reported Phoenix issues were related to JavaScript packaging.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
Esbuild
Used for JavaScript bundling and asset management in the Phoenix Framework.
Backend
Node.js
Previously used for asset management before the transition to esbuild.
Tools
Npm
Previously used for package management before the transition to esbuild.
Frontend
Webpack
Previously used for JavaScript bundling before the transition to esbuild.

Key Actionable Insights

1
Transitioning to esbuild can significantly reduce the complexity of managing JavaScript dependencies in Phoenix applications.
By adopting esbuild, teams can streamline their build processes and minimize issues related to npm and webpack, which have historically caused many headaches for developers.
2
New users of the Phoenix Framework will benefit from a more straightforward setup process with esbuild.
This change allows newcomers to start building applications without the steep learning curve associated with Node.js and npm, making it easier to onboard new developers.

Common Pitfalls

1
Relying on Node.js and npm can lead to broken builds due to dependency issues.
Many developers have faced challenges with broken JavaScript build pipelines, especially when dependencies are updated. Transitioning to esbuild aims to mitigate these issues.