Aurelia – My Experiences, Part 1

Here are some rough notes I have on my experiences so far with Aurelia. I have posted some of my (ridiculously) naive code on GitHub.

I have used the skeleton project as a template for my research. At first I was trying to use the Aurelia CLI to generate a project. But it was not working for me. I suspect there are two forces at work here. First, I have no idea what I am doing. Without a better understanding of all the moving parts, I had better let someone else do all that for me. Second, the CLI is fairly new and it is possible that it isn’t quite producing the results I require for my research.

Once I got the skeleton project up and running, I added it to GitHub. This is my first project using GitHub and it is pretty straightforward. As a side note, I have no idea if I can have other folks edit this repository or if it is just me. Would a ‘pull request’ mechanism be the only way to handle such things? A problem for another day.

I got most of the role manager functionality working (the role manager is a simple UI to create roles and map permissions to roles. I have built it once or twice using other technologies). The logic used to bind to the view from the view model is pretty powerful. I would estimate that I used less code to achieve the same results, compared to the Razor view, MVC and jQuery logic when it was first developed.

Integration with the webAPI calls was more challenging that I thought. I hadn’t created an ASP.NET Core WebAPI project before. Nor had I attempted to use EF6 in such a setup. It took some time to review the samples, tutorials and library documentation. But I got it to work eventually. What I thought would take an hour took more like four.

I spent a lot of time attempting to integrate a 3rd party plugin called aurelia-configuration. I couldn’t get it to work. I was using the sample project a coworker provided me and I attempted to mimic what he had accomplished. However, I couldn’t get the DI to work. It was always undefined/null when I injected the Configure class into my view model. I noticed that the version was different between the two projects. In the sample, the version was 1.0.11, and in mine I got the latest version 1.0.13. I downgraded to the v1.0.11 and it all started working.

I had some trouble understanding the routing at first. But after some trial and error I was able to get it to work.

I used Twitter Bootstrap because I was familiar with the syntax. One less new thing to work about. It worked well, no problems. But trying alternative frameworks (like Materialize CSS) will be on my list of things to research.

Using the HTTP service was straightforward. Not too different than the $.ajax routines in jQuery. I reused the progress bar concept for the ‘spinner’ when calling the webAPI. It worked okay, but I decided to incorporate my own just to see what that would require. Basically the same, just a different icon used for the spinner.

I need to find a means to disable the page while the data is loading. Not sure about that one yet.

I created a reusable component called dual-select. It mimics the dual select box we wrote on a non-SPA application. Creating a reusable component wasn’t too difficult. However, I suspect it is not following some established patterns and it is missing some functionality to make it more bulletproof.

Now I’m going to tackle a simple pageable table. Wish me luck!