I've always been skeptical of the JS community's mania for Babel plugins and compile-to-JS languages, and honestly, working with the Mastodon codebase and trying to shrink a 2.6MB JS bundle, I feel like my worst fears have been realized.

I've decomposed all of Mastodon's Babel presets into these plugins. If I remove a single one, I get some inscrutable error apparently caused by some other plugin in the pipeline. Feels like a big Jenga tower. 😞 #MastodonPerf

In my ideal world, we'd have two bundles:

1. ES6 without polyfills (for modern browsers)
2. ES5 fallback (using a "cut the mustard" test like fetch+Object.assign+etc.)

At this point I can't even figure out what the savings would be for #1 vs #2 because I can't get the codebase to compile *without* the Babel transforms. I wanted to try Rollup and/or Bublé too but those just feel off the table given all the JSX/spread/rest/decorators fanciness. Feeling like a JS curmudgeon here. #MastodonPerf

Like, in 99.9% of my JS projects I use vanilla ES5 and *maybe* ES6 modules, but only because then I can use Rollup to compile down to the smallest possible JS, which I then ship to consumers.

Performance is a top priority for me, and I just don't feel like syntactic sugar like arrow functions, template strings, const/let, etc. are so important that it's worth shipping a bunch of polyfills and transpiler bloat to my consumers. But I feel like I'm in the tiny minority on this one. #MastodonPerf

Anyway enough complaining. The goal here is to help make things better and not just tell these kids to get off my damned lawn. Back to reading about how Babel plugin order works and how to debug which plugin needs which other plugin. 😅 #MastodonPerf
OK, I take back what I said. I am a moron. The source of the error was Uglify, which of course doesn't support ES6. 🤦 I'm back on track, working on my "slimmer JS bundle for modern browsers" PR. #MastodonPerf
Actually I take back my take-back. Trying to string together Rollup and Browserify and Babel with about 20 different plugins to handle JSX correctly and I'm starting to get a taste of why backend folks smack-talk modern JS practices so much. Some of these things are configured in 3 different places and it's hard to tell which config is actually winning. I get an error message and it's impossible to tell which plugin/transform/package caused it. We've ruined JavaScript, folks. #MastodonPerf

@nolan I wish I could help in more practical terms than merely offering sympathy and thanks for your hard work.

I know what you mean about modern JS practices but I've had to go along with them as that's what is expected these days - firms are hiring either React or Angular devs, rather than JS devs...

@quirst @nolan Agreed. This framework obsession has come at great cost. It may make it cheaper for companies to develop web apps at the cost of hiring people who don't know or work on the fundamentals of the web.

Additionally, IMO, frameworks force devs to focus on the wrong things. It's "how do I make this work?" instead of "do I understand how this works?"