My gripes with the HA frontend

Slow dev workflow

The frontend uses Webpack. This means that a lot has to be rebuilt every time that something changes. There's also no HMR, so you have to manually reload the page. This makes dev slower.

Solution

Vite - has a dev server with a faster feedback loop.

Slow build workflow

The build workflow takes 15 minutes. Imagine I'm trying to change something in the build workflow - I only get to try out 3 changes every hour, not an enjoyable experience.

Solution

1. Make the prebuild steps run in parallel, be cached, preprepared, etc

2. Switch to Vite for faster JS building (Rollup is fast and Rolldown is going to be even faster)

3. Build with Brotli instead of Zopfli

Some argue that we should stick with Zopfli because gzip has better browser support. Here's a diagram to demonstrate that we can implement Brotli without worrying about this.

99% of browsers recieve Brotli

Get better compression than Zopfli

7 year old browsers recieve Gzip

Get decent on-the-fly compression

This is standard and fast - a chunk can be gzipped in around 10ms

Slow load times

Big bundles make loading slow. Why are the bundles big though?

Webpack is one reason - modules are all or nothing, meaning a whole file may be loaded even if you only needed part of it. Switching to Vite will fix this as it uses Rollup.

MWC is another. When we finally switch to only material-web, this will likely help decrease our bundle sizes.

The Intl polyfills are another cause, as these add a base size to all entry points.

Solution

Switch to Vite, switch to material-web, and switch to a custom message formatter.

The way that packages are managed

In my opinion, the frontend has too many dependencies. Some of these were added in just so a card could work. Others were added in so an alternative way of frontend development works.

Here's a visualization of the dependencies. I didn't make this a grid because the human mind tends to underestimate the number of objects in a grid.

scroll horizontally

This makes it take a long time to install packages whenever you make a new dev environment.

Solution

Small packages can be inlined or replaced with vanilla JS implementations.

Ecosystems with large packages (like formatjs or MWC) can be moved to other ecosystems.

Ecosystems not really needed (like WDS) can be removed.

I also don't like yarn, I like pnpm more (it does symlinks and feels faster), but that's just a matter of preference.

Have I tried to fix these?

Yes. I've tried to make a version of the HA frontend using Vite with varying success, and I've tried to get some changes merged in. I couldn't do much with Vite since the code base has a lot of complexity, and many of the changes I tried to get merged sadly got rejected.