Using Phoenix Without Webpack

submited by
Style Pass
2021-05-27 18:30:06

Gravitating away from Javascript over the years, I’ve been exposed to many different programming paradigms and languages. One in particular is functional programming with Elixir, and building web apps with the Phoenix framework. Not only is Elixir a clean and well-designed language, Phoenix takes an HTML-over-the-wire approach similar to traditional frameworks like Django and Ruby on Rails, which I prefer over the client-side SPA/server-side API approach. Phoenix also has an amazing community behind it and doesn’t make you feel like pulling your hair out at 3am over cryptic build issues (unlike a popular JS framework that shall remain nameless).

However, the one complaint I have with Phoenix is it pushes you towards using Webpack as a build tool for static assets. No disrespect to the folks who use or maintain Webpack—it can be extremely powerful in the right situation—but it tends to run slow and have overcomplicated configuration. Handling the complicated build steps required for an SPA (which is where it shines) is unnecessary when everything happens server-side, so let’s see if we can consolidate our pipeline in a way that doesn’t rely on Webpack or NPM.

I’ve recently been intrigued with ESBuild, which is an extremely fast Javascript bundler built in Go. It does a really good job as a standalone replacement for Webpack+Babel. Paired with the tried and true SASS for CSS preprocessing, which is now built in Dart and doesn’t rely on Ruby, we can have a speedy little asset pipeline free of clunky Javascript tooling.

Leave a Comment