The Aurelia framework

Before we start working with Aurelia and learning this amazing framework, it is important to have it clear why you should choose Aurelia over other popular frameworks. For that reason, let's explore in detail what a JavaScript framework is and the key differentiator present in Aurelia.

What is a JavaScript framework?

In the last section, we were reviewing all concerns about JavaScript and how we can organize our packages using NPM and Yarn. Now, it's time to review some tools that will improve our development experience; it's time to talk about frameworks.

A framework can be described as a group of tools and methodologies organized to solve common problems in the project development. Those solutions are generic; each one was tested in different environments and allows you to reuse that functionality to save time and cost.

So, based on the previous explanation, we can define a JavaScript framework as a collection of components and libraries (in most cases, interdependent) to fill the needs of the application in browser clients. What are these needs? Let's check some of the most generic ones:

• Routing
• Data sending features and retrieval (XMLHttpRequest)
• Correct DOM management
• Managing and organizing your code in separated functionality
• Defining standard data flows for the application
• Defining lifecycle for some functionality

Why use a JavaScript framework?

In general, a JavaScript framework will help us do the following:

• Organizing your code
• Structuring it in a maintainable and ordered way
• Making separation of concerns
• Implementing tested solutions to the most common problems
• Working on a base structure that any developer can follow

More specifically, a JavaScript framework is particularly helpful for applications where much of the business logic will take place on the client side—routing, templating, first-pass model validation, table building and pagination—pretty much whatever you might have used the server for in the past, but now without the latency and overhead that additional HTTP calls would have incurred.

JavaScript framework comparison

One problem always has more than just one solution, and JavaScript developers know that. Before 2010, developers had very limited options to implement their functionality in their day-to-day work. The most popular option in these times was jQuery, used a lot nowadays too. Although jQuery was not a bad choice, but it has a great weakness. For example, if your project growth and your business code become more complex, jQuery will be really difficult to maintain, your concerns will be mixed, and you will be involved in one of the most common anti-patron—Spaghetti code.

In 2010, Google released one of the most popular JavaScript frameworks—Angular. Different from jQuery, Angular comes with a complete set of tools and a new way to organize the JavaScript code, introducing new concepts such as modules, components, routes, and templates. After Angular, many JavaScript frameworks were appearing; some of them became very popular for the company sponsoring them, such as Facebook with React.js, others gained fame by the adoption of the community, such as Meteor and Vue, and others are really new in the neighborhood.

As innovation is the essence of technology, one of the main engineers of Angular 2 project developed a new awesome framework called Aurelia, which, in just three years in the market, is becoming the new rock star in the neighborhood.

Why Aurelia?

Over the last years in our current day-to-day work, we were getting involved with a vast variety of JavaScript frameworks; the most popular was always Angular, but we learned that popularity is not synonymous with quality. For understanding purposes, we will check some of the most used frameworks nowadays and then make a little comparison with our battle horse, Aurelia.

Angular

The component-based framework uses Typescript as the main (and unique) JavaScript platform. Angular is a complete superset of libraries designed for all purposes of Single Page Applications (SPA), very useful for developing applications from scratch. You can link your templates and your Typescript code so you HTML is updated with values from your code and ready to react on user actions . You need to learn three basic concepts about this framework—directives, modules, and components. Each one involves another, and you need to register each component with one Module to make it available. JavaScript also has its own module system for managing collections of JavaScript objects. It's completely different and unrelated to Angular's module system. Angular has its own implementation to define service classes, routes, double data binding, HTTP requests, and so on, making this framework very heavyweight.

Technical information

• Size: 698 Kb
• Standard compliance: ES 2016 (TypeScript)
• Non-compliant: NG2 Markup and Dart
• Interoperability: Average

Dependency injection

The dependency injection framework requires more configuration. In contrast to Aurelia, Angular requires you to specify the HTML selector and template, increasing the file complexity. Aurelia will detect the template based on a name strategy:

@Injectable()
class Ticket { /* */ }

@Component({
  selector: 'ticket',
  providers: [Ticket],
  template: `...`
}) //Configuration code mixed with business class
export class Sale {
    constructor(private ticket: Ticket) {}

    public activate() {
        // do something...
        this.ticket.toast("Sale processed!");
    }
}

Component encapsulation

Angular components need more explicit configuration and some (in some cases confusing) characters in the template. You can put the template in a separate file, or for simpler components, you can include the template inline:

/* product-list.component.ts */
@Component({
    selector: 'product-list',
    template: `<div><product-detail *ngFor="let thing of things" [product]="product" /></div>`
})
export class ProductList {
    public products: Product[];
}

React.js

Different from Angular, React.js is a library that can be integrated with any JavaScript project. It is used for handling the view layer for the web applications and build reusable UI components. React is component based too, but it mixes the HTML code inside the JavaScript files, in JSX format. JSX is a React syntax very similar to XML format since you can manage your view layer and add some behavior defining some attributes as the state or properties of your component. Sounds a little confusing? Yes, you will need to learn how JSX works and read about some of the new concepts about the tool.

React.js has a great feature—server-side rendering. What does that mean? Common JavaScript frameworks let the render work to the client side, so the browser needs to interpret your JavaScript files and transform it to plain HTML files. It can take time depending on how much data will be displayed on the page. With React.js, you can configure your server to have all those pages processed in the server side, so the browser just needs to call the correct HTML file and of course, the loading time will be less.

Similar to Angular, React.js offers you a complete set of libraries to implement dynamic routing, data binding, HTTP requests, and other React implementations libraries such as Inferno.js, with a rendering algorithm more powerful and optimized.

One very important note! Aurelia now has its own server side rendering plugin. You can find more info there: https://aurelia.io/docs/ssr/introduction/

Technical information

• Size: 156 KB or 167 KB with plugins
• Standard compliance: ES 2015
• Non-compliant: JSX
• Interoperability: High friction

Dependency injection

There is no such dependency injection concept in React.js.

Component encapsulation

A component is one JS class. Do you want to include another component in your component? Just import it:

import {ProductDetail} from "./ProductDetail";

interface Props {
    products: Product[];
}
export class ProductList extends React.Component<Props, undefined> {
    render() {
        return <div>
            {this.props.products.map(th => <ProductDetail key={th.id} product={th} />)}
        </div>
    }
}

Aurelia

Aurelia is a new JavaScript framework created by one of the team members of Angular 2 project. Different from Angular, Aurelia is composed of a collection of libraries that work together using well-defined interfaces so that it’s completely modular. This means that a web application only needs to include the dependencies that it needs, not the complete bundle.

Aurelia's APIs are carefully designed to be consumed naturally by both today's and tomorrow's most useful web programming languages. Aurelia supports ES5, ES2015, ES2016, and Typescript, which are very helpful and give you high flexibility.

Furthermore, writing web applications using ES6 is not a new thing. In fact, there are many solutions out there that can allow you to write Angular apps using ES6 (you need to configure it manually and it's not included in the default Angular configuration).

You don't need to worry about special framework concepts or syntax; Aurelia is a convention over configuration framework, encouraging you to use good practices when developing applications, and it allows the developers to focus only on business code.

Technical information

• Size: 252 kb minimum, 302 kb with standard plugin
• Standard compliance: HTML, ES 2016, Web Components (including the Shadow DOM)
• Interoperability: Very interoperable

Dependency injection

All you need is the @autoinject annotation. The JS/HTML mapping is performed automatically by the framework:

class Ticket { /* class code, properties, methods... */ }

@inject
export class Sale {
    constructor( ticket ) {}

    public activate() {
        // do something...
        this.ticket.toast("Sale processed!");
    }
}

For Typescript users, the annotation names are very similar. Use @autoinject instead of @inject and don't forget to specify the visibility and type of object in the constructor : constructor(private ticket : Ticket)

Component encapsulation

Component encapsulation uses a separate template file that looks more or less like every other web templating language you've ever used. By convention, if your component class is in hello.ts, then its template is in hello.html and your component will be <hello/>:

<!-- product-list.html -->
<template>
    <require from="product-detail"/>
    <div>
        <product-detail repeat.for="product of products" product.bind="product"/>
    </div>
</template>
/* producty-list.js */
export class ProductList {
    public products[];
}

Each JavaScript framework has its own way of working, and we can explore more features about each one, but Aurelia has something special—you don't need to go far away from learning how the framework works, and in extreme cases, in their own way/syntax for developing. With Aurelia, you will feel like writing plain JavaScript and HTML code, highly maintainable, scalable, and focusing only on your business purposes.

Now it's time to start working with Aurelia. So, let's explore the Aurelia command line to start our trip. Keep reading!