Book Image

Hands-On Full Stack Web Development with Aurelia

By : Diego Argüelles Rojas, Erikson Murrugarra
Book Image

Hands-On Full Stack Web Development with Aurelia

By: Diego Argüelles Rojas, Erikson Murrugarra

Overview of this book

Hands-On Full Stack Web Development with Aurelia begins with a review of basic JavaScript concepts and the structure of an Aurelia application generated with the Aurelia-CLI tool. You will learn how to create interesting and intuitive application using the Aurelia-Materialize plugin, which implements the material design approach. Once you fully configure a FIFA World Cup 2018 app, you'll start creating the initial components through TDD practices and then develop backend services to process and store all the user data. This book lets you explore the NoSQL model and implement it using one of the most popular NoSQL databases, MongoDB, with some exciting libraries to make the experience effortless. You'll also be able to add some advanced behavior to your components, from managing the lifecycle properly to using dynamic binding, field validations, and the custom service layer. You will integrate your application with Google OAuth Service and learn best practices to secure your applications. Furthermore, you'll write UI Testing scripts to create high-quality Aurelia Apps and explore the most used tools to run end-to-end tests. In the concluding chapters, you'll be able to deploy your application to the Cloud and Docker containers. By the end of this book, you will have learned how to create rich applications using best practices and modern approaches.
Table of Contents (19 chapters)
Title Page
Copyright and Credits
Dedication
Packt Upsell
Foreword
Contributors
Preface
Index

JavaScript fundamentals


JavaScript is a programming language used to add custom behavior to your web page by executing code in your web browser side (commonly named client side). So, this allows us to create rich dynamic projects such as games, execute custom code in response to events when the user presses some button, apply dynamic effects to our web page elements, form data validation, and so on.

JavaScript as a single language is very flexible, and there is a big community of developers writing and unlocking additional functionality, big companies working on new libraries and of course, we as empowered developers ready to get all these features and make the web awesome.

There are a few basic characteristics of JavaScript:

  • Dynamic typing
  • Object oriented
  • Functional
  • Prototyped
  • Event handling

Dynamic typing

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.

Note

Why duck?Well, James Whitcomb did a humorous inference explaining the deductive thinking about it—"If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck"

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:

  • typeof"Diego": This will return string
  • typeoffalse: This will return boolean
  • typeof "Diego" == boolean: This will return false

Note

The typeof operator is very useful, but keep in mind it only gives primary types (number, string, boolean or object). Different from other similar operators such instanceof of Java, typeof won't return the object type.

Object oriented

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
}

Functional

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

Prototyped

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 handling

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!!!');
}