Yet another UI Framework — Aurelia For Beginners

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

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

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!

docker run --name aurelio_container -it -v W:\Projects\Aurelia:/Aurelia aurelio /bin/bash

-v `W:\Projects\Aurelia` is your project directory

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.

<input type="text" value.bind="firstName"> 
<a href.bind="url">Aurelia</a>

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.

<template>
  <import from='./nav-bar'></import>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

<nav-bar router.bind="router"></nav-bar>

<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!

import {HttpClient} from 'aurelia-http-client';

export class CustomerDetail{
    static inject() { return [HttpClient]; }
    constructor(http){
        this.http = http;
    }
}

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:

Yet another UI Framework — Aurelia For beginners