In the continued week that is Aurelia Week, the team have been drip releasing tasty little morsels of Javascript framework goodness.
The biggest thing to happen to Aurelia thus far is the release of actual documentation. For months many die-hards (myself included) have been using the limited already provided docs, scouring Github source code and pestering the team on their Gitter chat channel (which I encourage you to join).
The team have created an Aurelia powered documentation application that allows for seamless browsing of the many Aurelia dependencies and their code. It also have various examples and info on how to do things with parts of the framework you probably never knew existed.
Yes, this is really happening.
Aurelia has officially put out its first beta release dubbed beta 1. Just a little over a week ago the team put out a pre-beta release and now we have our hands on an official beta as promised.
As an added bonus, the Aurelia team has also beaten the Angular 2 team to the punch and released to beta first, even though Angular 2 has been in development considerably longer. It goes to show a small agile team can do great things (like release faster).
The calm before the awesome storm? Rob and the rest of the Aurelia team have put out a pre-beta release which is action packed with a heap of new features, API refinements and tonnes of bug fixes.
The reason for a pre-beta is due to the fact Aurelia relies on Babel for its tooling and the recent release of Babel broke some things in Aurelia, so while those issues are being addressed the team wanted to put out a release with some of the latest bugfixes and additions to the framework.
If you’re like me, you’ve worked with Angular a lot or you are currently working with Angular and over time you have grown accustomed to its very concepts; controllers, directives, factories, providers and services. In Aurelia those concepts can exist, but not in the way you think.
If you’re thinking of porting over an Angular 1.x application to Aurelia, below we will touch upon various concepts to make the transition as easy and seamless as possible.
One source of confusion when working with AJAX requests and Aurelia is whether you should use the aurelia-http-client or aurelia-fetch-client both achieve similar things. However at the time of writing this no official documentation that exists for using the Fetch Client or explains how to use it.
I have been using the Fetch client since it debuted and realised others wanting to migrate to the Fetch client might find this post useful.
So you’ve decided it’s time to join the future and port your existing Angular application to Aurelia. Your first port of call was probably the documentation and chances are you probably got confused, because Aurelia lacks the concept of a “directive” – don’t be discouraged my friend, there is light at the end of the tunnel.
The concept of directives do exist in Aurelia, however they go by the names: Custom Attribute and Custom Element. In Angular 1.x, a directive can both be a custom attribute and a custom element. It is a confusing concept that fortunately has been removed in Angular 2.
As much as I love working with Aurelia, the documentation can be confusing for newcomers to the framework (forgivable considering it is so new and evolving). The purpose of this post is to quickly touch upon ViewModel methods that get called at various parts of the ViewModel activation process.
The two methods I have found myself using the most are attached and detached as sadly a project I am working on still uses jQuery libraries like Select2 for creating custom styled dropdowns.
One of my favourites parts of Aurelia is the compose element which allows you to dynamically render UI into the DOM. It is especially handy in situations where you want to dynamically render ViewModels inside of a loop like widgets or other dynamically composed elements.
Containerless One of the lesser known features of the compose element is the ability to specify a containerless attribute on the element. By default if you use the compose element your page will feature the element with the rendered contents inside.
There comes a time in most applications where you will want to loop through an array of data on the front-end. In Aurelia we have the repeat.for attribute which allows us to use Aurelia’s repeater functionality in our view templates.
Lets run through some examples and common scenarios when working with the repeater functionality.
Accessing the first item in the loop Sometimes you want to style the first element differently or do something with the data, using the $first conditional variable, we can determine whether or not the current item is the first in our loop of items. This value will either be true or false, making it a great candidate for the if functionality for conditionally showing items.
Unknown to some is the Aurelia router supports events. Using the Event Aggregator dependency in Aurelia, we can actually listen to various events fired via the router. All events can be subscribed to using the Event Aggregator dependency and the subscribe method.
It is worth noting that you don’t always need to use the Event Aggregator, sometimes a router pipeline step is all that is needed to hook into a certain aspect of the router flow and in some cases, this might be the desired choice.