Two of my favourite additions to ECMAScript 2015 were the const and let keywords. Sadly, I see them being misused quite often on many public repositories and even in some projects I have worked on.
Const (constants) If Javascript is not the first language you have worked with, then you will be familiar with constants in other languages like Java or PHP. A constant is an immutable variable. An immutable variable means its value will always be the same, it never changes (hence why they’re called constants). Also worthy of note is like let block scoped variables, constants are block scoped as well.
If you are developing an Aurelia application, just so happen to be using Webpack and need to support Internet Explorer 10, then you will probably want the MutationObserver polyfill.
The polyfill is installed via the Github repository, so you need to make sure that you only install a release version which has the individual polyfill scripts for different Web Component features. At the time of publishing this was version 0.7.22.
As promised, I have open sourced my quick Aurelia CLI project Pokego.run which you can find here if you just want the code and don’t want to keep on reading.
I am open sourcing the work I have done on this because I want to see the Aurelia Javascript framework grow and I realise there are not a lot of apps out there for reference which are public using Aurelia. Consider this a helpful learning exercise.
I work a lot, so it was nice to get some downtime to play with the Aurelia CLI. Like many others of my generation, I have been caught up in the Pokemon Go hype. So I decided to build a simple app where you can plot where you have found Pokemon called: Pokego.run.
The idea stemmed from the question: what if you could determine with close accuracy what area has what Pokemon and eventually work out when they would appear.
I have been having a bit of fun using the Aurelia CLI. One of the downsides is if you want to use Autoprefixer and PostCSS with something like Stylus, Less or Sass, you can’t choose a preprocessor and use Autoprefixer.
This is easy enough to add in manually and gets you familiar with how the CLI handles task (which use Gulp).
Install development dependencies Go into your project directory and run the following in your terminal of choice.
Whilst working on a cool little Pokemon focused Aurelia app using the Aurelia CLI I encountered a scenario I didn’t immediately know the answer too. I wanted an object which represents my form elements and their values are bound to this object.
I then had a submit button which I wanted to only enable when all fields on the object had been filled out. At first I tried an @observable and couldn’t get it to work, then I had an epiphany: what about a computed getter?
In an application recently I need to display several confirmation checkboxes and once all of these checkboxes had been ticked, a submit button would become enabled to be clicked.
You might already know how to do this, but you can bind multiple checkboxes to an array, they’ll be added and removed when a checkbox is clicked.
In your HTML template view, you might have something simple like this:
${input.label} Then in your viewmodel, something like this:
Recently whilst helping out a client with an Aurelia TypeScript project, I encountered a situation where the latest development version of TypeScript 2.0 was being used, but some of the newer features like filesGlob support were not being picked up. Module resolution and other things were also an issue.
Turns out you can configure Visual Studio Code to use a local version of TypeScript through a setting directive inside of a project settings file.
One of the lesser known abilities of Aurelia is that every Aurelia element has an au property on it. This means if you query the DOM for an Aurelia element, it will have an au property which contains app and controller.
While this is really handy to know, in most cases if you are a Chrome user, then the Aurelia Context plugin for Chrome is probably a safer bet as it integrates into the Chrome developer tools.
Even though I primarily use Webpack for a massive Aurelia project I am working on, I am doing a fun internal project at work and decided to try out the Requirejs based Aurelia CLI. Not only is it fast, but incredibly easy to get a project setup from scratch without worrying about the messiness of using a skeleton.
One issue I encountered with trying to use Lodash with my Requirejs based project was simply importing it inside of my template wasn’t enough. It wasn’t being included in the bundle. Because Lodash in particular installed via Npm has no dist folder or real main entry, you need to tell the CLI where to find the right file.