Aurelia is a modern, open source UI framework for web and mobile app development. It allows you to write clean, modular JavaScript. The framework follows simple conventions and is focused on web standards.
Aurelia provides core capabilities like dependency injection, templating, routing and pub/sub, so you don’t have to piece together a bunch of libraries in order to build an application. On top of this rich core, Aurelia also provides a number of additional plugins for internationalization, validation, modal dialogs, UI virtualization and much more.
You also don’t have to cobble together a bunch of different tools. Aurelia provides a CLI for generating and building projects, a browser plugin for debugging and a VS Code plugin as well. Yet, you’re not forced to use any of these as Aurelia is structured to enable you to swap out any detail, even down to the templating/binding engine, in order to guarantee maximum flexibility.
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.
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: 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> Official Plugins: These plugins aren’t part of the default configuration but are frequently used. Fetch (): Fetch plugin is used for handling HTTP requests. You can use some other AJAX library if you want. Animators (): This plugin offers a way of handling CSS animations. Animator-velocity (): this is Instead of CSS animations you can use Velocity animation library. This plugins enables to use Velocity inside Aurelia apps. Dialog (): This plugin offers highly customizable modal window. i18n (): It is the plugin for internalization and localization. Ui-virtualization (): this Virtualization is useful library for handling large performance heavy UI tasks. Validation (): this plugin when you need to validate your data. 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: 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))
What is Aurelia?
Why Aurelia?
What are the Features of Aurelia?
Explain Component Lifecycle of Aurelia?
What is Constructor () in Aurelia?
How to create custom elements in Aurelia?
What does <body Aurelia¬app=src/main> Signifies?
Can you explain Event aggregator?
Can you explain System.import('aurelia¬bootstrapper'); in Aurelia?
What are the Standard Plugins in Aurelia?
What are the aurelia advantages and limitations?
What is the significance of index.html in aurelia?
What are the Official Plugins?
Explain Value Converters in Aurelia?
Related posts:
- Angular 4 Interview Questions and Answers
- Backbone.JS Interview Questions and Answers
- ECMA Script Interview Questions & Answers
- Ember.js Interview Questions and Answers
- Ionic Interview Questions and Answers
- Knockout.js Interview Questions and Answers
- TypeScript Interview Questions and Answers
- Vue.js Interview Questions and Answers