AureliaJS Introduction – Master Building Blocks of Aurelia

0
3486
AureliaJS

The popularity of smartphones have shifted the focus from building websites and apps for desktops to websites and apps for smartphones. With such an emphasis on mobile, frameworks like Aurelia have become essential. There are also many changes that are expected to come to Aurelia’s this year, such as improvements to the platform’s user experience framework, as well as a rumored conversion to TypeScript.

AureliaJS is a JavaScript client framework for web development and its also used for mobile and desktop development. Aurelia helps us focus on business logic instead of the framework. Aurelia is a flexible and powerful open-source JavaScript library. In this article, we are going to learn how you can get started with Aurelia JS and create a simple “Hello World” app with CLI. Aurelia JS is the future web framework and ES6 is a primary syntax of Aurelia JS.

Before starting the project, you need to download a few things. Please check the prerequisites given below:

1) You can use the sublime text editor and visual studio code for editing the code. This editor is beneficial for editing JavaScript.

Download and install the visual studio code from “https://code.visualstudio.com/download”, while you can download and install sublime text editor from

https://www.sublimetext.com/download

2) You will also need NodeJS, which you can download and install from – “https://nodejs.org/en/
Aurelia Framework Installation

After complete, the installation of node js, open a command prompt as an administrator and go to project folder where you have to create the project.

Run the command below to install aurelia-cli globally in your system

npm install -g aurelia-cli

Advantages of AureliaJS:

1) Aurelia uses Microsoft’s Typescript Programming Language which is officially supported
2) Aurelia is compliant with the new JavaScript framework.

3) Aurelia is different from Angular and React frameworks and it has official products which are supported through the Durandal Inc.

4) Aurelia helps users learn this framework if a user has the previous experience with Angular and KnockOut.

5) Developers can easily contact Aurelia members and the Aurelia core team with the help of Github and developers can ask question, bugs and can give suggestions. And the developers can receive answer fast.

6) The user can do Customer training through Dhurandal

7) Aurelia Supports modern javascript, DOM API, and modern tooling. It also, provides full support for Babel and JavaScript

8) Aurelia JS is highly modularity for development

9) AureliaJS has a simple way of creating components which work in a variety of contexts like Customer Element, Routing, Dynamically composed UI, Navigation, Progressive enhancement, Navigation, model Dialogues, etc

Create an Application-

After installing the aurelia-cli through NPM, create a project with the name “helloworld” and run a command to create a project as per given below:
au new helloworld

To create an aurelia project, we need to follow the following steps given below:

Step 1: To select customize setup for the project, please check the question and enter option 3 as given below

Create an aurelia project

Would you like to use the default setup or customize your choices?

1. Default ESNext (Default)
A basic web-oriented setup with Babel and Webpack for modern JavaScript development.
2. Default TypeScript
A basic web-oriented setup with TypeScript and Webpack for modern JavaScript development.
3. Custom
Select loaders (requirejs/systemjs), bundlers (cli/webpack), transpilers, CSS pre-processors and more.

[Default ESNext]> 3

Step 2: select RequireJS module loader/bundler for the project as shown below

Which module loader / bundler would you like to use?

1. RequireJS (Default)
A file and module loader for JavaScript.
2. SystemJS
Dynamic ES module loader
3. Webpack
A powerful bundler

[RequireJS]> 1

Loader

Step 3: Use the Default template setup for the project and enter option 1

How would you like to setup your template?

1. Default (Default)
No markup processing.
2. Minimum Minification
Removes comments and whitespace between block level elements such as div, blockquote, p, header, footer
…etc
3. Maximum Minification
Removes comments, script & link element [type] attributes and all whitespace between all elements. Also remove
attribute quotes where possible. Collapses boolean attributes.

[Default]> 1

default template setup

Step 4: Check the above screenshot and select Default processor for the project
What CSS processor would you like to use?

1. None (Default)
Use standard CSS with no pre-processor.
2. Less
Extends the CSS language, adding features that allow variables, mixins, functions and many other
techniques.
3. Sass
A mature, stable, and powerful professional grade CSS extension.
4. Stylus
Expressive, dynamic and robust CSS.
5. PostCSS
A tool for transforming CSS with JavaScript.

[None]> 1

Step 5: Configure unit testing and select option 1

Would you like to configure unit testing?

1. Yes (Default)
Configure your app with Jasmine and Karma.
2. No
Skip testing. My code is always perfect anyway.

[Yes]> 1

configure unit testing

Step 6: Select Visual Studio Code for code editing as per shown in above screenshot

What is your default code editor?

1. Visual Studio Code (Default)
Code editing. Redefined. Free. Open source. Runs everywhere.
2. Atom
A hackable text editor for the 21st Century.
3. Sublime
A sophisticated text editor for code, markup and prose.
4. WebStorm
A lightweight yet powerful IDE, perfectly equipped for complex client-side development.
5. None of the Above
Do not configure any editor-specific options.

[Visual Studio Code]> 1

Step 7: Check the description of your project and create the project by selecting option 1

check description
Would you like to create this project?

1. Yes (Default)
Creates the project structure based on your selections.
2. Restart
Restarts the wizard, allowing you to make different selections.
3. Abort
Aborts the new project wizard.

[Yes]> 1

Step 8: Install project dependencies in your application and select option 1

Would you like to install the project dependencies?
1. Yes (Default)
Installs all server, client and tooling dependencies needed to build the project.
2. No
Completes the new project wizard without installing dependencies.
[Yes]> 1

Project dependency

Check the screenshot below you will see the HelloWorld project of Aurelia JS will be created and ready go to as given below:

Hello world project

Run a command to open project in Visual Studio Code

” code .”

Check “C:\project\helloworld\src\app.html ” file which includes all necessary parts and also includes a message which comes from “C:\project\helloworld\src\app.js” file.

In app.js file message represents “Hello World!”. You can change this message to anything you want.

Check the app.html file and app.js file

app.html file:

<template>
  <h1>${message}</h1>
</template>

App.js file:

export class App {
  constructor() {
    this.message = 'Hello World!';
  }
}

To run the project run command as per stated below and you will see project is running on “http://localhost:9000/”

Hello world

Hope this mini Hello World project has been helpful for you to learn the basics of Aurelia and understand what it is and how easy it is to start building apps in this amazing framework. If you want to take the next step and learn how to build a more complex app using AureliaJS, check out this article on building your own Aurelia Js User Manager App from scratch. If you have any questions or concerns regarding Aurelia, then you can drop us a message in the comments section down below!

Previous articleIntroduction to Web Application Messaging Protocol (WAMP)
Next articleBuilding a Decision Tree From Scratch

LEAVE A REPLY

Please enter your comment!
Please enter your name here