Hands-On Full Stack Web Development with Aurelia

In most of the scripting languages, the type is associated with the value, not with the variable itself. What it means? JavaScript and other languages such as Python, called weakly typed, does not need to specify which kind of data we will use to store in the variable. JavaScript has many ways to ensure the correct type of an object, including duck typing.

Let’s look at an example:

1.  var age = 26;
2.  age = "twenty-six";
3.  age = false;

In the preceding code, the defined variables accept any data type, because data types will be evaluated at runtime, so, for example, the age variable in line 1 will be an integer, will become a string in line 2 and, finally, Boolean. Sounds tricky? Don't worry, think of the variable as an empty vial without a label. You can put anything you want, cookies, milk, or salt. What you will store in the vial? Depending of your needs, if you want to make a breakfast, milk should be the better option. The only thing you must keep in mind, is remember what is containing this vial! We would hate to confuse salt with sweet.

If we need to ensure that the value belongs to some specific type, we can use the typeof operator to retrieve the data type of a given variable. Let's have a look at them:

JavaScript objects are based on associative arrays, improved with the prototyping inclusion. The properties and values can be changed at runtime. Another common way to create objects is using the JavaScript Object Notation (JSON) or using functions.

Let's see how an object created by JavaScript code looks, and its JSON representation:

// Let's create the person object
function Person(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
}
var diego = new Person("Diego", "Arguelles", 27);

//JSON representation of the same object
{
    firstName: "Diego",
    lastName: "Arguelles",
    age: 27
}

A function is an object inside itself. They have properties, methods, and can include inner functions. It's a way to encapsulate a functionality you want to reuse in more than one place in your application; you just need to write the function name instead of all the code inside that, just like the following example:

function sum(numberA, numberB){
return numberA + numberB
}
sum(4,5) //9
sum(5,2) //7
sum(sum(5,1),9) //15

JavaScript uses prototypes instead of classes for inheritance. It is possible to emulate all OOP characteristics using just prototypes:

function Person(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
}

var diego = new Person('Diego', 'Arguelles', 26)
diego.nationality = 'Peruvian'
console.log(diego) 
// Person {firstName: "Diego", lastName: "Arguelles", age: 26, nationality: "Peruvian"}

Person.prototype.career = 'Engineering'
console.log(diego.career) // Engineering

That being said, what is exactly a prototype? Different from objects, one prototype does not have a closed structure. In objects, we define standard properties and we just have these properties for work, since JavaScript is not completely an object-oriented language, we have the advantage to add, remove, or change properties and values of our prototypes depending on our needs.

We can modify prototype attributes at runtime. Note that even if you can modify any prototype, you should only modify yours. If you modify standard prototypes (for example, the  array prototype) you will encounter very weird bugs in your application.

Events allow you to add the real interaction on your web page. JavaScript allows you to attach event handlers on your HTML pages and execute custom code when they are triggered. For example, the given code will display an alert when the user clicks on your web page body:

document.querySelector('body').onclick = function() {
alert('You clicked the page body!!!');
}

This version arrives with significant changes in the language syntax. Let's review the new features and compare with the ES5 syntax.

In ES5, to make a near representation of an object in JavaScript, we commonly type something like this:

function Person(name, age) {
this.name = name;
this.age   = age;
}
Person.prototype.sayHi = function() {
return 'Hi, my name is ' + this.name + ' and i have ' + this.age + ' years old';
}

var Erikson = new Person('Erikson', 26);
Erikson.sayHi(); // 'Hi, my name is Erikson and i have 26 years old'

If we want to improve our code, maybe we can do some refactoring, as follows:

function Person(name, age) {
this.name = name;
this.age   = age;

this.sayHi = function () {
return 'Hi, my name is ' + this.name + ' and i have ' + this.age + ' years old';
    }
}

That's how Object-Oriented Programming (OOP) is done on JavaScript these days, but for programmers with previous experience on Java or PHP, that syntax result is a little difficult to understand, because they are not dealing with real objects, they are dealing directly with the prototypes. ES6 introduces a new syntax to declare objects:

class Person {

// Contructor define properties for our object representartion
constructor(name, age) {
this.name = name;
this.age = age;
    }
// Class method
sayHi() {
return 'Hi, my name is ' + this.name + ' and i have ' + this.age + ' years old';
    }
}
var Erikson = new Person('Erikson', 26);
Erikson.sayHi() // Hi , my name is Erikson and I have 26 years old

As you can see, now, the syntax is more readable and understandable, and we can extend from another class, just like other languages, such as Java:

class Developer extends Person {

constructor(name, age, role){
super(name, age)
this.role = role;
    }
sayHi(){
return super.sayHi() + ' and i am a ' + this.role
    }
}
var Erikson = new Person('Erikson', 26, 'Javascript developer');
Erikson.sayHi() // 'Hi, my name is Erikson and i have 26 years old and i am a Javascript developer'

Also, of course, we can use encapsulation principles to manipulate our object properties. Similar to Java, we can define mutator methods to get the property value or set some value to a property:

class Person {

constructor(name, age) {
this.name = name;
this.age = age;
    }
get checkName() {
return this.name;
    }
set giveName(newName) {
this.name = newName;
    }
}
var Erikson = new Person('Erikson', 26);
Erikson.checkName() // returns Erikson
Erikson.giveName('Hazis')
Erikson.checkName() // returns Hazis

Having these kind of methods does not avoid the fact that you can still be using the JavaScript native syntax to change the values or add properties at runtime. You will still be able to do the following:

Erikson.name = 'Diego'
Erikson.name // Returns Diego

Like other languages, ES6 allows static methods using the static modifier:

class Example {
    static returnMessage(){
return 'From static method'
}
}
let staticMessage = Example.returnMessage() // From static method

Do you note something? In the last example, we used let instead of var to declare a variable. ES6 has two new ways of defining a variable: let is the direct replacement of var, and const will be used if we are declaring a constant. Can we still use var instead of the new ES6 declaration syntax? Yes, but let's imagine that you are an experienced developer and have two trainees under your supervision. In your code, you can define something like this:

var PI = 3.1416

Also, of course, we do not want this value changed, for any reason. As this is still a var, any trainee developer is able to change the value, directly or indirectly (from a method call, assignation error, bad comparison syntax, and so on), so we are exposed to get errors on our application. To prevent these kind of scenarios, const would be a more accurate modifier for this variable.

Does ES6 only improve syntax for objects' declaration? No. At this moment, we only focused on our class definition syntax, because it will be the core of all applications, just like OOP. Now, we will check other improvements that we are pretty sure you will find very useful in your day-to-day work.

var data = ['Ronaldo', 'Messi', 'Maradona'];
data.forEach(function (elem) {
console.log(elem)
});

var data = ['Ronaldo', 'Messi', 'Maradona'];
data.forEach(elem => {
console.log(elem);
});

// We could transform this
let sum = function(num) {
return num + num;
};
// Into just this
let sum = (num) => num + num;

let string1 = "JavaScript";
let string2 = "awesome";
let string3 = string1 + " " + string2

let string1 = "JavaScript";
let string2 = "awesome";
let string3 = `${string1} ${string2}`

var [a, b] = ["hello", "world"];
console.log(a); // "hello"
console.log(b); // "world"

var obj = { name: "Diego", lastName: "Arguelles" };
var { name, lastName } = obj;
console.log(name); // "Diego"

var foo = function() {
return ["175", "75"];
};
var [height, weight] = foo();
console.log(height); //175
console.log(weight); //75

The first thing you need to do to start using NPM is download Node.js. Node is an asynchronous event-driven JavaScript runtime. It is not a new language or a new syntax; it's just the platform where you can write JavaScript code outside the browser and Node.js will use the power of Google's V8 JavaScript Engine to execute it.

If you're using OS X or Windows, the best way to install Node.js is to use one of the installers from theNode.js download page.

If you're using Linux, you can use your package manager or check the download page to see whether there's a more recent version that works with your system.

To check whether you have a previous version installed, run the following command:

$ node –v

The Node Package Manager (NPM) is a complete tool created to help developers share, maintain, and reuse JavaScript code bundled in packages with other developers to reuse it on their own applications. NPM is made up of three distinct components:

NPM website

This website serves as the primary tool for users to discover packages; you’ll find something like this:

This page describes all the features of the package you want to download, a brief documentation about it, the GitHub URL, and instructions to import them into your project.

Like all the command-line tools, it is important to understand the options provided by NPM. The NPM CLI is a powerful tool that will help us in the development cycle of our project.

$ npm install npm@latest -g

$ npm install <package-name>

$ ls node_modules

npm install <package-name>@<version>

$ npm init

$ npm init --yes

{
"name": "my_package",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/package_owner/my_package.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/package_owner/my_package/issues"
},
"homepage": "https://github.com/package_owner/my_package"
}

$ npm install <package_name> --save

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:

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

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.

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.

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.

@Injectable()
classTicket { /* */ }

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

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

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

import {ProductDetail} from"./ProductDetail";

interfaceProps {
    products:Product[];
}
exportclassProductListextendsReact.Component<Props, undefined> {
    render() {
        return <div>
            {this.props.products.map(th=> <ProductDetailkey={th.id} product={th} />)}
        </div>
    }
}

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

@injectexportclassSale {
constructor( ticket ) {}

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

<!-- product-list.html -->
<template>
    <requirefrom="product-detail"/>
    <div>
        <product-detailrepeat.for="product of products"product.bind="product"/>
    </div>
</template>

/* producty-list.js */exportclassProductList {
    public products[];
}

Installing the CLI is not a big deal if you have installed Node.js in the previous section. We just need to open your favorite Terminal and execute the following command, and if you are using a Unix-based operating system, remember to add sudo before the command if you have permission issues:

npm install -g aurelia-cli

The preceding command will install the Aurelia CLI as a global executable command-line tool. This allows us to use the CLI with the au command as any other command of our operative system Terminal, for example, the dir command.

After the installation is complete, execute the following command:

au help

This should return the following output that displays the CLI help. As you can see, this command has two main options:

Now that we are sure that it is working as we expected, let's learn how to get the most out of it.

This is one of the most important options. As its name says, it will create a new Aurelia application with a well-defined application folder structure and all the initial configuration files in just three steps.

Execute the following command and replace my-app with your application's name:

au new my-app

When the Aurelia CLI wizard is running, we will select the following options to create our application:

Once you answer the last question, the CLI will install all the dependencies and once everything is complete, you will see the following output in your Terminal window:

Next, we will look into the run option. This option allows us to run our application, and it provides us with an option to create a productive development environment by specifying the --watch option, which configures a watcher to detect changes in our source code and update our browser automatically. This cool feature is known as browser-sync or auto-refresh.

The run command also allows us to specify the environment where we want to execute our application; these are the default environments: dev, stage, and prod. By default, the CLI will run our application using the dev environment. Use the --env flag to change it.

For example, let's get into our application (cd command) and execute the following command:

cd my-app
au run --watch --env prod

The following is the output that has two URLs where we can see our application up and running:

Open the http://localhost:9000 URL in your favorite web browser, and you should see the following:

Now, let's test how auto-refresh works, remember that this feature is enabled by adding the --watch option in the au run command.

Open the app.js file located in the src folder and change the 'Hello World!' string to 'Hola Mundo!':

export class App {
  constructor() {
    this.message = 'Hola Mundo!';
  }
}

Save it and go back to your browser; the CLI will detect the change you made in the app.js file and will refresh your browser automatically.

To be more productive, you can use two displays—the first with your application running in the browser and the second with your source code editor.

Of course, testing is an important skill all developers need to have. We have a complete chapter to talk about testing and discuss TDD, unit testing, and end-to-end testing.

The test command comes with the --watch and the --env flags. Use the watch option to tell the CLI to detect changes in the test folder and execute the tests again.

In order to run tests, the CLI uses Karma, which is a test runner technology that is configured to use Jasmine testing framework to write all our testing files that should be saved into thetestfolder.

For example, the preceding command will run theapp.sec.jsfile located in thetest/unitfolder:

au test --watch --env stage

The following is the output that has executed one test successfully:

Now is the time to deploy our application, but before we do this, we need to compress and minify our Aurelia code. Aurelia CLI provides us with the build option to generate these ready-to-deploy files that contain all our application code.

As you might want to build your application for different environments (dev, stage, or prod), this build option comes along with the --env flag. For example, execute the following command in your project:

au build --env prod

The following is a sample output of my-app project:

As the output shows, there are two main files generated: app-bundle.js, which contains our application logic and vendor-bundle.js, which contains third-party dependencies. These two files are generated into the scripts folder in our root application folder.

If you want to run your application and check whether everything is okay with the bundles you recently created, let's install the http-server module using npm. Run the following command in your Terminal:

npm install -g http-server

Now, create a dist folder in your application root folder and copy the index.html page and the scripts folder that contain our bundles.

For the last step, get into the dist folder in your Terminal and run the following command:

cd dist
http-server

This command will expose some four URLs where the web server is running; copy the first URL and open it on your web browser, and you should see your application up and running:

Aurelia, like many JavaScript frameworks, allows you to create reusable components that help you avoid writing duplicated code, reuse your component in multiple parts of your app, and also export them as plugins to reuse them in other projects.

Aurelia allows you to generate the reusable pieces of code utilizing the following templates:

These templates are all located in our project root folder in the aurelia_project/generators folder. For example, the following command generates a custom Aurelia element:

au generate element my-reusable-element

The source code will be generated in the src/resources/{type} folder depending on the type you selected.

Each type will be discussed in the following chapters, so don't feel bad if you don't understand the differences between them. Keep reading my friend! :)

The app we will develop is the Football World Cup app. We will use an awesome UI framework called Materialize, which, by default, will help us create a responsive web application, so our users can open this app in their mobile and desktop browser with an adaptable user interface.

Although this is a simple application, we will cover the most important concepts of Aurelia that you will find in a real production application. We will improve this app along with the book. Listed are the features we will develop for this app:

So, let's start exploring the features that this application delivers to our users.

Matches explorer

This feature is related to the matches in the entire competition. The users will be able to perform the following actions:

• List the Matches activity
• Create a new Match, which requires admin

Listing the matches

The user will see the list of matches represented as cards. A calendar is shown to the user to navigate and see the matches scheduled per day. The mock-up is shown here:

Creating a new Match

To create a new Match, an admin account is required. Once the user is authenticated, they can schedule a new Match by selecting the teams and the time. The mock-up is shown as follows:

Teams explorer

This feature is related to the matches in the entire competition. The users will be able to perform the following actions:

• List the Teams
• Create a new Team, which requires admin

Listing the teams

The user will see the list of teams represented as cards. The mock-up is as follows:

Creating a new team

To create a new Team, an admin account is required. Once the user is authenticated, they can create a new team. The mock-up is this:

News

This feature is related to the news. The users will be able to perform the following actions:

• List the News
• Create a New item, which requires admin

Listing the News

The user will see the list of news represented as cards. The mock-up is as shown:

Create a New

To create a New, an admin account is required. Once the user is authenticated, they can create a New. The mock-up is this:

Social authentication

The user will be able to sign in using their Google or Facebook account. The mock-up is this:

Now that we have an idea of the application we will develop, let's continue creating the initial application project.

Let's start creating our application. If you remember our last section about the Aurelia CLI, we need to use it again to create a new application, so open your favorite Terminal tool and execute the following command:

au new worldcup-app

Enter the following input in the Terminal:

Now, you will see the main structure of your application on the console:

Project Configuration
    Name: worldcup-app
    Platform: Web
    Bundler: Aurelia-CLI
    Loader: RequireJS
    Transpiler: Babel
    Markup Processor: None
    CSS Processor: Sass
    Unit Test Runner: Karma
    Editor: WebStorm

This is a custom setup. Our project will be composed with the following features:

Once everything is done, open the worldcup-app folder with your favorite editor.

The Aurelia CLI will generate the source code with its base structure, which has everything configured and ready to start writing our application's source code.

The following screenshot shows the root application folder:

Let's start talking about the aurelia_project folder, which contains the main aurelia.json configuration file with all the settings about the dependencies, blunder, build target, loaders, testing run-time tool such as Karma, testing framework, and more. You will modify this file frequently to specify new dependencies our application needs to use.

The next element in the aurelia_folder is the environments folder, which contains three files: dev.json, stage.json, and prod.json. These files contain values depending on the environment you are running on. Do you remember the --env flag in the run option? The CLI will use one of these files to configure our app's environmental values.

The remaining two folders are generators and tasks. They are used to generate Aurelia custom reusable components and to declare gulp tasks, respectively.

The scripts folder contains the bundles generated after we execute the au build command.

As you might guess, the src folder contains our application source code, followed by the test folder, which contains our source code to test our project.

Like many JavaScript frameworks such as Angular and React, Aurelia needs a place in the index.html page to mount the application. This place is known as the entry point. Open the index.html file, and you should see something similar to the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body aurelia-app="main">
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>

Aurelia requires an HTML element to load our application. By default, the application is loaded in the body element; we know this because this element uses the aurelia-app attribute, which is used to specify the main JavaScript script file that contains all the configuration for our application, and as you note, by default, Aurelia is configured to use the main file. The following is the content of themain.jsfile:

import environment from './environment';

export function configure(aurelia) {
aurelia.use
.standardConfiguration()
    .feature('resources');

if (environment.debug) {
    aurelia.use.developmentLogging();
  }

if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

aurelia.start().then(() => aurelia.setRoot());
}

Let's analyze this file; the first line imports the environment variables from the environment.js file located in the root folder. When you specify the --flag{env} option, the CLI looks for the {env}.json file in the aurelia_project folder and copies its content into the environment.js file.

This file also exports a single configure function, which receives as a parameter the aurelia object that you use to override default configurations and add any code you wish before the app is launched. For example, you can tell Aurelia that you want to declare components as global (features), configure internationalization to manage different languages, and so on.

Once the aurelia object is configured, the last line of code will render our application into the root HTML element, which has the aurelia-app attribute in the index.html page. By default, it renders the app.js component into the root element. Of course, we can override the default values by passing the element you wish to render as the first parameter and the HTML element where you wish to render the app as a second parameter:

 aurelia.start().then(() => aurelia.setRoot('my-component', document.getElementById('my-div')));

We will be modifying this file along the way; the most important thing to remember is that this file is processed before the app is rendered and apart from the Aurelia.json file, this is the second most important file. The following diagram explains the bootstrapping process:

Now you know how the bootstrapping process works. Let's understand how you can create reusable components.

In the last section, we saw that Aurelia requires a component to mount as the root of our entire application and by default, it was the app component. Now let's explore this component.

A component is composed of two files, the first written in JavaScript that contains the component's view model and the second one is the markup template written in HTML. They must have the same filename to help the view model resolve its view template. The component's view model is a JavaScript file, which exports a class that contains the component's attributes and functions. For example, this is the content of the app.js component:

export class App {
constructor() {
this.message = 'Hello World!';
  }
}

The App class declares a constructor that initializes the message property. Properties can be declared into the constructor or can be defined outside of it. Consider this example:

export class App {
  message = 'Hello World!';
}

To use the properties defined in our app.js view model, we need an HTML template with the same filename. Open the app.html file to see its content:

<template>
<h1>${message}</h1>
</template>

The first thing to note is that the message property declared in the view model is present, but in order to bind the value, we have to use the ${}string interpolation operator. Finally, when Aurelia renders the component in the web page, the ${message} declaration will be replaced by 'Hello World!'.

We can extend our components by adding functions that can be called from the template. For example, let's declare the changeMessage() function:

export class App {

constructor() {
this.message = 'Hello World!';
  }

changeMessage() {
    this.message = 'World-Cup App';
  }

}

From the preceding code, you can see how declaring a function is a simple; we use the same syntax of the contructor declaration. If you want to use the properties declared in the App class, you have to use the this reserved word to access any property or function.

Now it is time to invoke our changeMessage function. First, we will create a button in our template in the app.html file and declare a trigger to the click event of the button. Open the app.html file and apply the following changes:

<template>
<h1>${message}</h1>
<button click.trigger="changeMessage()">Change</button>
</template>

The first thing to note here is that we don't use the default HTML onclick event; instead, we use the click event with no on at the start of the event name. This convention is used only for the Aurelia templating engine. So, we say that we want to invoke the changeMessage() functions by binding this function to the click event using the trigger binding mechanism.

Launch your app by executing the au run command in your Terminal, and test this out. When you click on the Change button, you should see how the message is changed from 'Hello World!' to 'World-Cup' App. The h1 HTML element is changed because we have previously declared and bound the ${message} property into its content.

Binding is a big concept we will cover in next chapters in a more detailed way. So, keep reading my friend, it just starting.