Aurelia Interview Questions and Answers

Aurelia is a collection of Modern JavaScript modules, which when used together, function as a powerful platform for building browser, desktop and mobile applications, and all open source and built on open web standards(Aurelia doc says). Or Aurelia is a client side JavaScript framework with an emphasis on simple conventions and ES6/ES7 support. The ES6/ES7 support is transpired for you so it’s compatible with today’s browsers. The tag line on the official Aurelia website reads “Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity.”

It is Next gen JS framework written with ES6 and ES7 and Integrates with Web Components. No external dependencies except polyfills.Aurelia uses ES2016. ES2016 introduces a better way to code JavaScript using object-oriented techniques, modules, arrow syntax (think lambdas and LINQ in C#), collections, and promises just name a few of the features. Aurelia is already built using these features in ES6.Performance; It seems to really scream on the client. It can use Typescript, but it’s not tied to it.

• Modern Architecture (MVVM)
• Two-Way Databinding
• Extensible HTML
• Routing & UI Composition
• ES6/ES7 transpiled support
• Fully covered testing support
• Broad Language Support
• Advanced client side router via Durandeljs
• Jspm for package management

All components have a well-defined lifecycle. Below is a list of methods you can implement on your view-model in order to hook into the component lifecycle:

Constructor (): Constructor method is used for initializing an object created with a class. The view-model’s constructor is called first.

Created (owningView: View, myView: View): If the view-model implements the created callback it is invoked next. At this point in time, the view has also been created and both the view-model and the view are connected to their controller. The created callback will receive the instance of the “owningView”. This is the view that the component is declared inside of. If the component itself has a view, this will be passed second.

Attached (): Next, the component is attached to the DOM. If the view-model has an attached callback, it will be invoked at this time.

Detached (): This method is called when the View is detached from the DOM.The component may be removed from the DOM. If/When this happens, and if the view-model has a detached callback, this is when it will be invoked.

Bind (bindingContext: Object, overrideContext: Object): this method happens after binding occurs, but before the DOM attachment. This is where the Databinding engine binds the contents of the View.

Unbind (): After a component is detached, it’s usually unbound. If your view-model has the unbind callback, it will be invoked during this process.

Constructor method is used for initializing object created with a class. This method is called first. If we don’t specify this method, the default constructor will be used.

For example

export class App

{

constructor()

{

this.counter = 1;

}

}

Here we are initializing teh counter property to 1 inside the constructor. Later we can use this in the view and display the value as 1 like

${counter}

Aurelia offers a way to add components dynamically. You can reuse single component on different parts of your app without need for including HTML multiple times.

Step 1 – Create custom component
Let’s create new components directory inside src folder.
C:UsersusernameDesktopaureliaAppsrc>mkdir components
Inside this directory we will create custom-component.html. This component will be inserted later on our HTML page.
custom-component.html
This is some text from dynamic component…

Step 2 – Create main component
We will create simple component in app.js. It will be used to render header and footer text on screen.
app.js
export class MyComponent
{
header = “This is Header”;
content = “This is content”;
}

Step 3 – Add custom component
Inside our app.html file, we need to require the custom-component.html to be able to insert it dynamically. Once we do that, we can add new element custom-component.
app.html
${header}
${content}

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.

Event aggregator should be used when your events need to be attached to more listeners or when you need to observe some functionality of your app and wait for the data update. Aurelia event aggregator has three methods. The publish method will fire off events and can be used by multiple subscribers. For subscribing to an event, we can use the subscribe method. And finally, we can use the dispose method to detach the subscribers.

This is simple example of using event delegation with Aurelia framework. Our view will have a button with click.delegate event attached.

app.html

Once the button is clicked, myFunction() will be called.

app.js

export class App

{

myFunction()

{

console.log(‘The function is triggered…’);

The System JS module loader provided the SystemJS object. It 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.

Standard Plugins: If you are using default configuration, standard set of plugins will be available.

defaultBindingLanguage():This plugin that offers an easy way to connect view-model with view. You already saw one way data-binding syntax (${someValue}). Even though you could use some other binding language, it is recommended practice to use default binding language.

defaultResources() :Default resourses gives us some primitive constructs like if, repeat, compose etc. You can even build these constructs on your own, but since they are so commonly used, Aurelia already created it inside this library.

Router (): Most of the applications use some kind of routing. That is why Router is a part of the standard plugins. You can check more about routing in one of our next chapters.

History (): History plugin is usually used together with router.

EventAggregator (): this plugin is used for cross component communication. It handles publishing and subscribing to messages or channels inside your app.

Pros:

• Aurelia is very clean. If you follow the frameworks conventions, you can focus on your app without the framework getting on your way.
• It is also easily extensible. You can add or remove any tools that the framework offers and you can also add any other tools that aren’t part of the framework.
• Aurelia is very easy to work with. It is directed towards developer’s experience. This will save you lots of time and headaches on the road.
• The framework itself is directed towards web standards so you will always stay up to date with modern concepts.
• Aurelia don’t have the largest community out there, but it is very agile, knowledgeable and willing to help in the short notice.

Cons:
There are no major limitations. Framework is powerfull and easy to work with. Someone could think that smaller community might Couse some problems on the road, but we didn’t have those kind of issues. And fewer job opportunities.

In Aurelia,index.html is deafult page of the app like in most of the HTML based apps. It is a place where scripts and stylesheets are loaded.It looks as under

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

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>

A value converter is a class whose responsibility is to convert view-model values into values that are appropriate to display in the view and vice versa. Most commonly you’ll be creating value converters that translate model data to a format suitable for the view; however, there are situations where you’ll need to convert data from the view to a format expected by the view-model, typically when using two-way binding with input elements.
If you’ve used value converters in other languages such as Xaml, you’ll find Aurelia value converters are quite similar, although with a few notable improvements:

• The Aurelia ValueConverter interface uses toView and fromView methods, which make it quite clear which direction the data is flowing. This is in contrast to Xaml’s IValueConverter, which uses Convert and ConvertBack.
• In Aurelia, converter parameters can be data-bound. This is something that was missing in Xaml and enables more advanced binding scenarios.
• Aurelia value converter methods can accept multiple parameters.
• Multiple value converters can be composed using pipes (|).

Aurelia value converter can have a class field named signals, which accepts an array of string that will be used to manually trigger updating the view. This is to handle the situations where the value converter relies on variables that are defined outside of Aurelia application, such as language, locale etc.(Aurelia Docs))