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

Installing Docker For Windows 10

I just started another day to write some code and Aurelia Framework caught my eyes. There are several ways in which we can install but using Node and Webpack seems neater way. Also, I’m in much favour for writing programs in Linux rather in Windows (Windows 10 is awesome though!). Previously install dual boot of linux in my system but just thinking, why the hell i need a dual boot if only i need just for programming. Ta-da! There is Docker ofcourse and recent version of them even provides Docker for Windows 10 directly. So, here we are today going to see and installing docker for windows 10.

Installing Docker for Windows 10

There are ways in which you can install Docker for Windows

Pre requirements

  1. 64 bit Windows 10 Pro, Enterprise and Education
  2. The Hyper-V package (Virtual machine!)

If you have passed requirement no 1, lets started on 2. (else use Docker toolbox) Even though according Docker, “The Docker for Windows installer will enable it for you, if needed.”.

You have to enable one more thing for “Hyper-V” first, else you will get the below error message after installing docker.

Hardware-assisted virtualization and data execution protection must be enabled in the BIOS

1. How to Enable Virtualization in Windows 10:

This is a tricky part for beginners, but very simple one. You have enable it BIOS screen.

  1. Restart your system
  2. Proceed to BIOS page (F2 for ASUS)
  3. Search for Virtualization Technology and enable it
  4. Save and reboot

Thats it. For the next step.

2. How to Enable Hyper-V:

You can either let Docker do this or you can do it yourself (It’s always useful to learn it manually!)

  1. Enter Turn windows features on or off in Search
  2. Scroll and see Hyper-V and check it!
  3. Restart again!
enabling-hyper-v-in-windows-10
enabling-hyper-v-in-windows-10

Finally, all our pre requirements has been completed. Now, lets see how to install Docker for Windows 10.

3. Installing Docker

  1. Download the stable Docker for Windows
  2. https://download.docker.com/win/stable/InstallDocker.msi
  3. Follow the simple Wizard and Hit finish.
  4. Thats it, as simple as that.

Now let’s verify whether Docker is installed, go to Powershell and type docker --version. Did you get the below

docker-in-windows-10
docker-for-windows

You have successfully installed Docker in Windows 10, awesome!!!

4. Installing Ubuntu on Docker for Windows.

Next stop, let’s install Ubuntu in Docker to achieve our final goal

In powershell, give following command
$ docker run -it ubuntu bash

docker-for-windows-10
docker-for-windows

This will install ubuntu Docker Image in our Virtual Machine.
Now you are root user root@014150a01c9f:/# i.e. you are inside the Ubuntu Virtual Machine!
Type cat /etc/*release, you got the Ubuntu 16.04

Thats it!! We have installed Ubuntu 16.04 in Windows 10 Machine!

Hopefully this will give you the way to harness the power of both Ubuntu and Windows in a single machine! Stay tuned for more about using Docker