Enhancing Django with Aurelia

1

Hi, I put together a little example of a Django application that uses Aurelia to enhance a page. This is not an SPA, it’s using Django templates and the aurelia.enhance() feature.

The readme is setup as a tutorial. It starts from scratch and tries to cater to Django developers curious about Aurelia, or Aurelia developer curious about Django.

TLDR: If you already know about both and are stuggling trying to get Django and Aurelia to work together, just looks at the changes in the aurelia.json, main.ts and the django home.html template.

There are some clumsy bits, contrived, where aurelia pops values back intos a Django form before submitting the form. This could be more elegantly done by adding custom attributes to the input fields in django and enabling real binding in aurelia. This would make the setup more complicated though, and I wanted to keep it as simple as possible. It’s not really highlighting the best parts of Aurelia or Django. It is demontrating where to draw the border ( or a border, there are other possibilities ) between the two. Django is doing validation and Page management, Aurelia is handling a single UI component.

Feel free to ask me if you have any quertions, or post a ticket in gitlab if you have trouble recreating the project.

10 Likes
2

It looks like a very good start. I didn’t know about aurelia.enhance().

  • Did you already used this in production?
  • Is the size of the JS bundle acceptable? I mean that although it will be bigger than a React app because Aurelia is a bigger framework, is it small enough it is worth not building an SPA? It’s actually my main concern with enhancing a page with Aurelia.
1 Like
3

I didn’t go into detail about getting the build size smaller. By default its around 1.6 mb in the project in the link above. If you remove some of the default aurelia modules in the main.ts file like this:

export function configure(aurelia: Aurelia) {
    aurelia.use
       .defaultBindingLanguage()
       .defaultResources()
       .feature('resources');
   aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

   aurelia.start().then(() => aurelia.enhance());
}

That removes some things that you dont generally need for a non-SPA app, routing, history, eventaggregator (in this case). That will bring the vendor-bundle down to 660KB.

By using django-compressor with the default settings you’ll reduce that to 550KB

By configuring django-compressor to gzip the static files you get the whole thing down to 115 KB. I find that quite acceptable.

I’m using the Aurelia CLI build in bundler, you might get more milage out of the webpack bundler. I find webpack difficult to configure though, so I generally stay away from it.

2 Likes
4

I did some tests on a test app. I had to add <base href="/"> for the app-bundle to load on pages that are not home (/).

Did you manage to enable live reloading? I see it is on your extra todos.

1 Like
5

I just added the bit about live reloading to the end of the readme.

I haven’t needed to add the base tag on this project. I’m not using the router in this project. I’m letting Django do all the page loading the routing work. I’m assuming you have a test project with routing setup.

It’s simpler if all the routing is handled by Aurelia or all by Django. It’s possible to let them both react to routing, but that will create code duplication that needs to be carefully considered.

2 Likes
6

It works perfectly. Thanks!

1 Like