Aurelia supports the element provided via the HTML Web Components specification, which allows you to define placeholders in your HTML that can be replaced.
A lot of examples around seem to wrap a slot with a DIV, perhaps a class. The issue with this approach is if you have a styled DIV wrapping a slot and that slot is empty, your DIV will still be affecting the space around it. This is where the ability to check if a user has provided a slot or not helps.
Recently in an Aurelia project, I was working with nested repeaters (3 levels deep). The problem was I needed to get the $index from the top level repeater (so, level one). Instinctively, I presumed that you could do this:
$parent.$parent.$parent.$index This does not work. The $parent variable only extends to the parent and cannot be chained.
I asked in the Aurelia team chat if anyone had a solution and thankfully core Aurelia developer Ashley Grant chimed in with a great solution that he learned from one of Rob’s intermediate training videos, that I had to share.
In your Aurelia applications, you might have two or more roots defining different entry points into your application. I personally create a public facing root which has public routes and an auth protected shell which has routes for logged in users only.
Let’s say for this example you have two roots: publicRoot and privateRoot. Your publicRoot view-model has your login/logout and other public routes, and your privateRoot view-model has routes for an administration panel.
sing both Aurelia and firebase together is exceptionally convenient for my workflow. When it comes to authentication, I have certain routes I want to protect.
The best way to add in authentication checks for routes in Aurelia is to create a router pipeline step. Specifically, an authorise pipeline step.
Because of the way Firebase uses a promise based callback for its auth state change event, we need a way to wait for Firebase to resolve its callback before checking.
If you’re using the latest and greatest Webpack plugin for Aurelia, there is a possibility if you use the element to dynamically render UI you will run into an issue where Webpack doesn’t know about the dynamic imports.
Specifically, I am talking about usage of that might look like the following:
This is due to the fact, they can’t be resolved beforehand and put into the bundle. Fortunately, there is an easy fix for all of this.
The flexibility of Aurelia means there are many ways to achieve a task. The default convention of view/view-model will meet your needs a lot of the time, but sometimes you might need a little more power.
You might already know of the ability to define views inline (inside of your view-models) using the inlineView decorator, allowing you to eschew view HTML files entirely. The InlineViewStrategy class offers similar functionality for a different purpose.
A few people have actually asked me this question, so I thought a helpful blog post for reference would finally answer the question: What’s the difference between static inject and @inject in Aurelia?
The answer will surprise you. Okay, not really. It’s a pretty clear-cut answer. There is no difference between either.
Back in the early days of Aurelia before support for decorators was added (we are talking early 2015 here), you did things a little more verbosely because support for decorators was non-existent.
As many of you know, I have been working on an in-progress book on Aurelia titled Aurelia For Real World Applications for quite a while now.
Good news! the book is finally nearing its release and I’ve actually started working on the example applications chapter (amongst the others still in progress). This is probably the most anticipated chapter of the entire book for many readers.
One of those applications is a Markdown Editor that you can see running here. Shortly, owners of the book will be able to obtain the source code to this application and numerous other apps.
In this article we won’t be detailing how to setup a new Webpack application, but how you can leverage code splitting to reduce the size of your application.
If you would like to know how to create a new Webpack application capable of supporting code splitting, this post has you covered.
This will be a rather quick post, no advanced concepts to learn or remember here.
What is code splitting? It’s a fancy term describing how you can break parts of your application into smaller Javascript bundles. Instead of having one massive Javascript file that contains your application and dependencies, you take parts of your app and split it into smaller files (sharing the load).
When it comes to frameworks and libraries, developers have never had so much choice. So understandably, it can be hard to convince a developer one option is better than the other.
Most front-end developers who have been around for at least 4 or 5 years most likely have the same backstory, going from jQuery to Angular, then possibly ReactJS shortly after.
Admittedly Aurelia isn’t supported by a mega-corp with endless troves of cash, but that doesn’t mean it isn’t worthy of being at the top. The Aurelia framework is backed by a company founded by Rob Eisenberg which funds itself through consulting, workshops and paid training materials.