AngularJS is one of the coolest front end frameworks I’ve ever used, but it doesn’t hurt to try more Frameworks. One Em is Aurelia, a actually simple JavaScript framework or say framework of tomorrow. (Just like AngularJS). Below aurelia for beginners provides an insight of how to install and also know the difference between AngularJS and Aurelia.
Getting started with Aurelia for Beginners
Why aurelia is awesome? Because of the few below stuffs which makes it easier to run and understand at the same time, it still gives the power to write very simple code. So, anyone can easily write a Aurelia code.
- Focus on business logic, not on framework
- For users looking for fast development also providing a structured UI FRAMEWORK
- Written with next-generation EcmaScript. Integrates with Web Components.
- Similar to AngularJS, “Two-way” Binding
- Can be written using ES5, ES 2015, ES 2016 and TypeScript
Installation
There are lots of way to install Aurelia, you can use Yeoman, Webpack or simple Aurelia-CLI
Pre-requirements
- NodeJS 4.x
- npm 3
- npm aurelia-cli
To make it less dependent on machine installation (Ubuntu/Windows), lets install aurelia in Docker. So, it can run in any machine! Cool!!
Installing Aurelia on Docker for Windows
1. Create a Dockerfile with below content
1 2 3 4 5 6 7 |
From ubuntu # You can use alpine if you want to FROM node RUN npm install aurelia-cli -g # replace this with your application's default port EXPOSE 8888 |
2. Now run docker build -t aurelia/cli
3. Now you have the Docker image lets create a container
for this image and bash into it!
1 2 3 |
docker run --name aurelio_container -it -v W:\Projects\Aurelia:/Aurelia aurelio /bin/bash -v `W:\Projects\Aurelia` is your project directory |
4. After executing this command, you will be inside the container
. lets check whether it is installed correctly with the $ aurelia

Starting your project
Using the in-built Aurelia CLI
command lets create a project. (Since you previously ran docker run command, you’ll be inside the container now)
- Now
cd /Aurelia
- Run the command to create a new project
au new --here
- The wizard you can keep hitting enter (unless you want to modify the default value. I’ve choose
Sublime Text
editor instead of VS Code) - Now see the project directory, it’be created.
aurelia-cli-new-project 5. Finally after confirmation you have created a project successfully (with everything you needed for awesome in a jiffy)
Aurelia Vs. Angularjs
Now we’ve created a project, you can simple create a todo example and try it http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start/1 (skipping the setup part)
1. Syntax: No weird symbols or abstract naming, just similar syntax to what you can already find within Javascript itself.
1 2 |
<input type="text" value.bind="firstName"> <a href.bind="url">Aurelia</a> |
2. ES6 Support: You write web applications using ES6 syntax and not have to worry about ES5 support because the included build system and configuration. With AngularJS, you’ve to learn its abstractions; directives, controllers, services, factories
3. Pluggable & Modular: Framework that can be decoupled to the point where you can use parts of Aurelia in other applications/Node.js modules.
4. Templating in Aurelia: Utilises the W3C HTML Imports specification for importing HTML templates and logic.
1 2 3 4 5 6 7 8 9 |
<template> <import from='./nav-bar'></import> <nav-bar router.bind="router"></nav-bar> <div class="page-host"> <router-view></router-view> </div> </template> |
5. Dependency Injection: Just define a static method that returns what you want to be injected into the application!
1 2 3 4 5 6 7 8 |
import {HttpClient} from 'aurelia-http-client'; export class CustomerDetail{ static inject() { return [HttpClient]; } constructor(http){ this.http = http; } } |
Overall Aurelia seems and better than AngularJs in terms of simplicity with power matching to AngularJS. But, there is one question goes in the mind of most of the UI Developers, why another UI Framework? We just learnt and starting using AngularJS and now another?
Well, Aurelia is created long back and thing is that, there is always going to be tons of ‘yet another framework’ whether is PHP or UI or whatever, you can either stick to what you like or learn something new. And there are so many “new”, so might good and provide tons of new features and browser support or some might now. So before trying a new Framework your application, it’s better know the ups and downs of a framework and its support. Both Aurelia and AngularJS are great frontend framework! But, comparatively with Aurelia, AngularJS is very well know and has tons of support over the web.
Well, thats it. Thank you for reading!
References: