Getting Started with Aurelia

Rajnilari2015
Posted by in Aurelia category on for Beginner level | Points: 250 | Views : 689 red flag
Rating: 5 out of 5  
 2 vote(s)

Aurelia is a modern, open source client side JavaScript framework for web and mobile application development. It emphasis on simple conventions and ES6/ES7 support. It is written using ECMAScript 2016. Using Aurelia, we can build applications using modules, classes, decorators etc.
In this article, we will introduce with Aurelia setup and a simple "Hello World" program using the framework.


 Download source code for Getting Started with Aurelia

Introduction

From the official site

Aurelia is a next generation UI framework. Whether you're building apps for the browser, mobile or desktop, Aurelia can enable you to not only create amazing UI, but do it in a way that is maintainable, testable and extensible.

Aurelia is a modern, open source client side JavaScript framework for web and mobile application development. It emphasis on simple conventions and ES6/ES7 support. It is written using ECMAScript 2016. Using Aurelia, we can build applications using modules, classes, decorators etc.

In this article, we will introduce with Aurelia setup and a simple "Hello World" program using the framework.

Aurelia - Project Setup

Create a folder say AureliaExperiment at your favorite location.

Then download the basic Aurelia project setup zipped file from here.

Extract the Zipped file and copy it under AureliaExperiment folder. It looks as under

Open the index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app="src/main">
    <script src="scripts/system.js"></script>
    <script src="scripts/config-typescript.js"></script>
    <script src="scripts/aurelia-core.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

It is default page of the app like in most of the HTML based apps. This is where scripts and style sheets are loaded.And we can also configure the programming language selection.

Let's adjust our programming language. The default is pointing to TypeScript.

<script src="scripts/config-typescript.js"></script>

However, we will choose ESNext. So we need to change that to

<script src="scripts/config-esnext.js"></script>

So our index.html will now look like

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app="src/main">
    <script src="scripts/system.js"></script>
    <script src="scripts/config-esnext.js"></script>
    <script src="scripts/aurelia-core.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

The scripts/system.js is a modern JavaScript module loader. Since Aurelia itself is written as modules, it encourages to create code in a modular fashion. To use modules in ES 2016, we need a loader for understanding modular code. That is the purpose of SystemJS. It locates modules, understands their dependencies and ensures that everything is properly loaded at runtime.

The aurelia-core.min.js is the core Aurelia needed for using the framework itself.

SystemJS.import('aurelia-bootstrapper') tag needs some attention. The SystemJS module loader provided the SystemJS object. Its has a method import which tells the loader to load/import a module aurelia-bootstrapper which resides in the aurelia-core.min.js. Using this module, Aurelia load the framework, configure and run the application.

On the body tag, there's an aurelia-app attribute targeting to src/main. This tells Aurelia's bootstrapper to load the app view-model and it's view and also the host HTML element where the application will be rendered.

Inside the src folder we keep the HTML and js files.

Straight to Experiment

Now, let us first create the app.js file inside the src folder and write the below

app.js
---------
export class App{  
  constructor() {
    this.sayHelloFromAurelia = "Welcome to the world of Aurelia, the next generation UI framework";
    this.RNATeamSays = "This simple experiment on Aurelia is done by RNA Team";
  }
}

It is the model. The sayHelloFromAurelia and RNATeamSays are the properties that we will bind to our view. The Constructor method is used for initializing object created inside a class.

Now, let us create the view which is app.html file inside the src folder and write the below

app.html
--------
<template>
   <h1>${sayHelloFromAurelia}</h1>
   <p>${RNATeamSays}</p>
</template>

The sayHelloFromAurelia and RNATeamSays properties are bound to the HTML template by using ${sayHelloFromAurelia} and ${RNATeamSays} syntax. It is the one way binding.

Now create the main.js file inside the src folder

main.js
---------
export function configure(aurelia) {
  aurelia.use.basicConfiguration();
  aurelia.start().then(() => aurelia.setRoot());
}

This tells Aurelia to configure itself by exporting a configure method using the basicConfiguration. The setRoot method is the root of the UI component tree that Aurelia needs to render.

Run the application

1. First way

Open the index.html file in Firefox

2. Second way

First install web server from command prompt window.

npm install http-server -g

like

C:\AureliaExperiment>npm install http-server -g

and then start the web server

http-server -o -c-1

The result

Reference

What is Aurelia?

Conclusion

Aurelia looks promising. It will be the next generation UI and provides lot's of new features and capabilities for the next generation web and mobile applications. Hope this will be useful. Thanks for reading. Zipped file attached.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)