Aurelia Framework

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.

  1. Focus on business logic, not on framework
  2. For users looking for fast development also providing a structured UI FRAMEWORK
  3. Written with next-generation EcmaScript. Integrates with Web Components.
  4. Similar to AngularJS, “Two-way” Binding
  5. 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

  1. NodeJS 4.x
  2. npm 3
  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

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!

4. After executing this command, you will be inside the container. lets check whether it is installed correctly with the $ aurelia

checking aurelia in windows
checking aurelia in windows

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)

  1. Now cd /Aurelia
  2. Run the command to create a new project au new --here
  3. 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)
  4. Now see the project directory, it’be created.
    aurelia-cli-new-project
    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.

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.

5. Dependency Injection: Just define a static method that returns what you want to be injected into the application!

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:

  1. http://blog.aurelia.io/2015/03/16/aurelia-and-angular-2-code-side-by-side/
  2. http://ilikekillnerds.com/2015/01/aurelia-vs-angularjs-round-one-fight/
  3. https://github.com/aurelia/framework/issues/74

Leave a Reply