The “barbarian meets” series are a collection of articles that intend to introduce and explain useful libraries, frameworks, tools and technologies in simple and straightforward terms. These new series will focus on the brand new framework from Rob Eisenberg the maker of Durandal and Caliburn frameworks which brings all the goodness of ES6, ES7 and web standards to your toolbelt: Aurelia
Setting Up Your Development Environment
Let’s get started. First, you are going to need to do some installing, you’ll need node, npm and the jspm (the JS package manager for the ES6 module loader). I am going to take a little bit of time with this because even though I use node and npm on a daily basis, it took me a while and some frustration to get aurelia running on my pc and mac.
If you are using Windows, I will advice you to install node using chocolatey and the PowerShell terminal:
- Get chocolatey, the Windows package manager
- Open your PowerShell console (check out cmder if you haven’t seen it yet) and install node with chocolatey
If you are not very much into powershell you can use the installer that you can find at nodejs.org.
Node will install npm automatically into your system but it comes with a superold npm version. In order to update npm run this command:
Verify that you have the latest version by running
And that is not the version you want. By default there’s an annoying problem in windows when updating node/npm, you can get all the details here, but in summary node’s npm installation masks the updated version of npm. Just go to your node installation folder, usually
Program Files\node and remove
npm.cmd. After doing that you should see the right version:
Important: For those that already have node and npm in your machine you will need to update it to the very latest version. I couldn’t run
jspm because I was two minor releases behind with node (
0.10.34 as opposed to
0.10.36). So update to the latest version. If you are using chocolatey it will be as easy as
chocolatey update nodejs.install. (Note that you’ll need to remove
npm.cmd from the node installation folder since these files will be re-created after updating node).
3.Install jspm, the js package manager for ES6 modules:
If you have a mac:
- Get homebrew, the Mac package manager
- On your terminal (bash, zsh, etc)
1 2 3 4
Creating an App
The Get Started tutorial involves a lot of downloading files from the web which feels a little bit awkward if you have used yeoman in the past, but it takes you through the process of creating an app step by step which is pretty nice when you’re starting learning a new framework, and I can definitely recommend it just for this very purpose.
I do not know of any official yeoman generator but I have found out this unofficial one that you can use in the GitHubs (Kudos Zewa666!!). You can save a ton of time by using yeoman:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Additionally this generator comes with a subgenerator for creating view/viewModel pairs automatically:
1 2 3
My advice: follow the tutorial the first time to get your toes wet, and then use the generator when your start building something for real, or in any subsequent times.
The Development Experience
Finally! Now You can start writing something with Aurelia! Yahooooo!
I have started a couple of projects recently, one to dig into yeoman and one to learn more about web standards to get a Microsoft certification so I was pretty out of pet-project ideas to test aurelia with. But then I thought about one old dream of mine and having looked at the speech synthesis api recently I decided that it was time to build my very own Jarvis (if you are not familiar with Jarvis you might be with Siri or Cortana). And thus Athena – wait for it – An Artificial Thinking Human-like Noetic Assistant, for lack of a better name XDDD.
The code that you write with Aurelia looks pretty clean. In summary, you write view-viewModel pairs and the framework takes care of composing and binding them together at runtime (it feels like writing knockout components or Durandal). For instance, here we have an example for a basic user form mostly taken from aurelia.io:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
You can check Athena out on the Githubs and the latest version at www.barbarianmeetscoding.com/athena – note that it is yet veeery veeeeery bare yet.
Thoughts on Aurelia So Far
The experience I have had so far with Aurelia has been pretty ok, on one hand I had sort of a hard time setting it up which was a little bit frustrating (I think yeoman has spoiled me in this regard), but on the other hand it was great to write some ES6 and start getting comfy with it. Aurelia has been out in the public barely for a week so I am pretty sure that the aurelia team will soon smooth down the setting up of a project and make aurelia more approachable for everyone.
In the upcoming weeks I will continue writing athena and I’ll probably have much more to say about Aurelia. Until then, take care.
Want to Know More?
Here are some references you can take a look if you want to know some more: