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