Aurelia Tutorial for Beginners

What is Aurelia?

Aurelia is a modular client-side JavaScript framework developed by Rob Eisenberg under the ECMAScript 6. It is widely popular because of its simplicity and the use of futuristic tools like ES2016. This front-end framework is used for building browser, mobile, and desktop applications built on open web standards. Aurelia adopts the per-module approach to its architecture rather than being a comprehensive framework. Any piece of Aurelia is replaceable with a third-party dependency (or removed altogether). Aurelia web Framework Unlike other existing web frameworks, Aurelia's primary philosophy is to stand by official web standards and DOM API's, and this ensures better bare-metal performance as it sits closer to native API's and provides minimal abstraction. Aurelia's component model is based on HTML Templates, W3C Web Components, and ShadowDOM. Thus, enabling the code mirrors to a real web standard. Although Aurelia is a fully-featured single page web application framework, the performance learning curve is lower than existing competitive frameworks like Ember and Angular. Its templating syntax is inherent and shares numerous similarities with previous frameworks and libraries one might have worked with. A developer or company will opt Aurelia over other solutions because of the standards provided by Aurelia and also the feature of writing abstract framework-specific boilerplate code, supporting core capabilities like dependency injection, templating, routing and pub/sub, such that the developer doesn't have to fix together a bunch of libraries in order to build an application.

Features of Aurelia

  • Components – The components are the building blocks of Aurelia application framework. It is composed of JavaScript view-model pairs and HTML view.
  • Simple Testing- By combining modern JS modules with an unobtrusive approach, Aurelia makes unit testing as simple as testing vanilla JS.
  • Web Standards ? Aurelia is one of the cleanest modern frameworks which completely focuses on web standards without any need of unnecessary abstractions.
  • Extensible ? This framework offers a simple and extensible way to integrate with the other tools.
  • Commercial Support ? Aurelia provides enterprise and commercial support.
  • License ? It is an open-source framework licensed under MIT.
  • Effortless Coding with Conventions- Aurelia stands out as the only framework today that situates the code at the center of the developer’s application, rather than the framework.

Advantages of Aurelia

  • Aurelia provides clean coding. If the developer follows only the conventions of the framework, he/she can focus on their app without the framework getting in their way.
  • It is an easily extensible framework. One can add or delete any tools that the framework offers, and even one can add any other tools that aren't part of Aurelia's framework.
  • Aurelia's standards-based and unobtrusive style makes it very easy to work with. Thus, it saves a lot of time.
  • This framework is directed towards web standards will always stay up to date with modern concepts.
  • Aurelia doesn’t have the most significant community out there, but it is very agile, knowledgeable, and willing to help within short notice.
  • Aurelia Conventions helps the developers to focus on the code and business logic.

Lifecycle of Aurelia

Aurelia uses component lifecycle methods to control the component lifecycle. Given below in the systematic representation of Aurelia’s lifecycle with a detailed breakdown of each stage: Lifecycle of Aurelia web Framework This image is only for reference.
  • constructor() ? Constructor is a native method that is used for initializing an object created inside a JavaScript class. The constructor() method is called as the first method. If you don't call this method, the default constructor will be used.
  • created(owningView, myView) – The created() method is called once the view and view-model are created and connected to the controller. This method takes two parameters. The first parameter is the view where the component is declared (owningView). The second parameter is the component view called myView.
  • bind(bindingContext, overrideContext) ? After invoking the created(), the binding has started, and bind() method comes into play. It also consists of two parameters wherein the first parameter representing the binding context of the specified component. The second argument is overrideContext, which is used for adding additional contextual properties.
  • attached() ? Attached method is called once the component is attached to the DOM.
  • detached() ? This method is opposite to that of attached() method. It is called when the specified component is removed from the DOM.
  • unbind() ? The last lifecycle method is unbind(). It is invoked when the specified component is unbound.
The lifecycle methods are useful to have higher control over Aurelia’s component. It triggers some functionality at a certain point of component lifecycle.

Aurelia- Installation

Step 1 – To Download Aurelia Package Before downloading Aurelia package, let's create a folder on the desktop where the app will be placed.
C:\Users\username\Desktop>mkdir aureliaApp
Now we can download the package from the official Aurelia website. Step 2 - Install the Web Server For installing the web server from command prompt window, use the following command:
C:\Users\username\Desktop\aureliaApp>npm install http-server -g
Step 3 - Run Web Server To start the web server, you need to run the given below code in command prompt.
C:\Users\username\Desktop\aureliaApp>http-server -o -c-1
Folder Structure
  • package.json: It signifies the documentation of the pre-installed npm packages. It also represents the version of these packages and provides a straightforward way to add, delete, or modify the version. It also automatically installs all the packages when the application needs to be shared between users.
  • index.html: This is the by-default, first page of Aurelia app (same like HTML). It is a place where stylesheets and scripts are loaded.
  • config.js: It is a loader configuration file.
  • jspm_packages: This folder is the default directory for the SystemJS needed for loading modules.
  • Styles: This folder is the default styling directory of Aurelia app. You can always determine the place where you keep your styling files folder.
  • src: Src folder holds your all HTML and js files and thus, is a place where you spend a maximum of your development time.
Standard Plugins If you are using default configuration in Aurelia, standard plugins will be automatically available.
  • defaultBindingLanguage() ? This plugin offers a practical and straightforward way to connect the view with specified view-model. Even though Aurelia gives freedom of choosing another binding language, but it is usually recommended to use default binding language practice.
  • defaultResources() ? Default resources give us some primitive default constructs unlike if, compose, repeat, etc. One can even create these constructs on their own. Because they are so commonly used, Aurelia has automatically created it inside the default source library.
  • Router() – Router is used to transfer data packets between different computer networks. Hence, every application uses some routing. Thus, the Router is a part of the standard plugins.
  • History() – This plugin is used with the router.
  • eventAggregator() ? This plugin is used for the communication between cross-component. It handles subscribing and publishing to messages or channels inside the app.
Official Plugins These are a set of plugins that aren't distributed as a part of the default configuration but are used frequently. Each of the following plugins needs to be installed through jspm as well as plugged into Aurelia via the aurelia.use.plugin(...) API.
  • fetch() ? Fetch plugin handles the HTTP requests carried by the app.
  • animatorCSS() ? This plugin allows a way of handling CSS animations. The Animator is called whenever certain view operations are performed, such as adding or removing a view.
  • animator-velocity() ? This plugin provides an implementation of the Animator functionality. In Australia, the developers use the Velocity animation library instead of CSS animations. Hence, animator-velocity plugins enable the developers to use Velocity inside Aurelia apps.
  • dialog() ? The dialog plugin facilitates this behavior by creating a model from the view-model/view that you provide. This plugin allows a highly customizable modal window.
  • i18n() ? The aurelia-i18n plugin provides internationalization and localization to your app through the i18next library.
  • ui-virtualization() ? Virtualization library is used for handling high performance, unlike heavy UI tasks.
  • validation() ? This plugin is used when you need to validate your data. It allows changes to data to make sure the data matches preset validators.
The Aurelia Core Team officially maintains all plugins explained above. Also Read: Top 20 Aurelia Interview Questions and Answers