Suggestion on choosing build system

Best Practices
1

Hi All,

As Aurelia supports buch of build systems (loader and bundler), is there a significant difference when using one instead of the other.

Actually, when I started working with SPA, I used Aurelia with skeleton-navigation. Later I used dotnet-core with webpack like below

UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                    {
                        HotModuleReplacement = true
                    });

Because it seems like easy to understand, nowadays I use Fusebox loader mostly.

Requesting your suggestions on the bundler-loader choice significance in terms of development benefits and production benefits.

Thanks,
Praveen Gandhi P.

1 Like
2
  1. I tend to use the options provided by https://github.com/aurelia/cli only. (Doesn’t mean you can’t use outside loaders)
  2. With 1 being said, I have tried all loader / bundler options the CLI provided and eventually picked https://github.com/requirejs/alameda because it requires the LEAST amount of tinkering with aurelia.json. Webpack is not a bad choice either, but having to PAL.moduleName() everything is annoying.
  3. My main criteria for picking a loader / bundler so far has been to avoid having to tinker with aurelia.json for every new dependency. In Aurelia vNext, I’ve already seen that aurelia.json is not even there anymore. Therefore, it will be mostly just personal preference then, although webpack does have some advantages such as tree shaking capability, hot module reloading, etc.
3 Likes
3

Just a side note, the PLATFORM.moduleName() is going away and won’t be necessary anymore in Aurelia 2. That was mentioned by core team member somewhere in a Discourse article or in their GitHub, though I forgot where exactly, so I can’t link it.

I’m with WebPack since a while, I tried RequireJS long time ago and I think WebPack is better in importing not just JS/TS but also other file type like CSS/SCSS/LESS in your code. I haven’t used any other than WebPack in a while so I could be wrong now, JavaScript world is changing fast so.

EDIT

Here’s the link where it’s mentioned that PLATFORM.moduleName() is going away in Aurelia 2.

3 Likes
4

I use Aurelia in a lot of composite UI/micro-services projects and prefer requirejs because it is the easiest to get working with that pattern. I used to still wrap everything in PLATFORM.moduleName anyways so that I could swap build systems if I had a reason to but since I heard it is going away I’ve stopped.

Personally, I also feel more comfortable modifying gulp scripts than a webpack config. I’ve done many a deep dive into webpack but feel like I need a Ph.D to get everything I need out of it. Gulp may be a little slower sometimes but I know that I can get exactly what I want every time.

Once upon a time I wrote off Alameda but can’t recall the reason. I suggest some research on trade-offs if you’re down to just those two.

3 Likes
5

RollupJS looks better and better every time I see it being used. Here’s a short video that makes it look very easy: https://twitter.com/DasSurma/status/1161293821105364993.

3 Likes
6

I prefer RequireJS for older browsers and Alameda for newer. The reason I prefer it before webpack is that the resulting code is way easier to read in my eyes. That makes debugging easy and I don’t need / use sourcemaps. This also gives me a better knowledge of what is the transpiled result and what it means to the performance in terms of executed code etc.
I only recognized in an edge case a downside that I couldn’t used two aurelia applications on one page. Both had different sources and aurelia versions. The aurelia amd config doesn’t support contexts which means the one application loads sources from the other applications as they share the module context.
Anyhow that’s a very rare edge case and I still prefer alameda :slight_smile:

2 Likes