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.
Introduced in TypeScript 2.4 is support for the ECMAScript dynamic imports feature. If you didn’t see the announcement or read it properly, you’re probably here because you’re getting the following error.
In my case I use Webpack and I was trying to add in some dynamic import goodness and getting this error: Dynamic import cannot be used when targeting ECMAScript 2015 modules.
You’re probably thinking, this is crazy considering dynamic imports are an ECMAScript feature, not a TypeScript one. The tell is in the error, if your module is set to es2015 you’re targeting ES6 and dynamic imports are a feature not due for release until ECMAScript 2018.
Admittedly, Google’s developer event IO has grown to be quite interesting the last couple of years. This year (2017) I was excited to see what would be announced in the world of Firebase.
I’ve been using Firebase on and off for the last couple of years. Recently, I’ve found a renewed sense of excitement in using Firebase again (especially after cloud functions were released).
A few of the new features are more mobile-oriented, Firebase likes to focus on mobile developers and applications but it has value for all platforms.
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.
Kind of a strange post from what I usually post, but the last few months I have been addicted to entering online competitions.
The fact I have won a few great prizes in just a few months probably helps. I won a runner up prize which was an LG television and then I won a Weber Baby Q Titanium barbecue. I also scored a free double pass to see the movie Office Christmas Party complete with free drink and popcorn. The movie wasn’t that great, but it was a night out for me and my wife.
Firebase Cloud Functions are great, but there might come a time where you need CORS support. This can be enabled easily by using the CORS middleware.
The documentation does detail part of the process, but it doesn’t mention you need to install the cors package and also specify origin: true as a configuration option. If you’re new to Node.js, this might catch you off guard.
Go into your functions directory in your application and in your terminal: npm install cors --save this will add the CORS middleware package to your package.json.
Because Firebase is a NoSQL JSON data store, you might have noticed that when you get some data from Firebase that it is an object. If the title wasn’t obvious enough, we are talking about using Firebase Realtime Database in a web application.
Take the following example:
firebase.database().ref('/posts').on('value', function(snapshot) { console.log(snapshot.val()); }); Let’s imagine that we have 20 posts in our database. You’ll get back an object containing keys and objects for all of our imaginary posts.
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.
Most of the time when you’re looping over an array of elements, you’ll do it sequentially. However, I recently needed to iterate through an array of objects in reverse just using a plain old for loop.
This will not be a highly informative or groundbreaking post but, I thought I’d share this in case someone wants to solve the same problem and might be confused with the many different ways you can loop over an array in reverse.