Book Image

MEAN Web Development - Second Edition

By : Amos Q. Haviv
Book Image

MEAN Web Development - Second Edition

By: Amos Q. Haviv

Overview of this book

The MEAN stack is a collection of the most popular modern tools for web development that helps you build fast, robust, and maintainable web applications. Starting with the MEAN core frameworks, this pragmatic guide will explain the key concepts of each framework, how to set them up properly, and how to use popular modules to connect it all together. By following the real-world examples shown in this tutorial, you will scaffold your MEAN application architecture, add an authentication layer, and develop an MVC structure to support your project development. You will learn the best practices of maintaining clear and simple code and will see how to avoid common pitfalls. Finally, you will walk through the different tools and frameworks that will help expedite your daily development cycles. Watch how your application development grows by learning from the only guide that is solely orientated towards building a full, end-to-end, real-time application using the MEAN stack!
Table of Contents (18 chapters)
MEAN Web Development Second Edition
About the Author
About the Reviewer

Introduction to ECMAScript 2015

After years of work, the ES6 specification was released on June 2015. It presented the biggest advancements in JavaScript since ES5 and introduced several features into the language that will completely transform the way we JavaScript developers write code. It would be ambitious to describe all the improvements made by ES2015. Instead, let's try to work through the basic features we'll use in the next chapters.


Modules are now a supported language-level feature. They allow developers to wrap their component in a Module pattern, and export and import modules inside their code. The implementation is very similar to the CommonJS module implementation described in the previous chapters, although ES2015 modules also support asynchronous loading. The basic keywords for working with ES2015 modules are export and import. Let's look at a simple example. Suppose you have a file named lib.js that contains the following code:

export function halfOf(x) {
    return x / 2;

So, in your main.js file, you can use the following code:

import halfOf from 'lib';

However, modules can be much more fun. For instance, let's say our lib.js file looks like this:

export function halfOf(x) {
    return x / 2;
export function multiply(x, y) {
    return x * y;

In your main file, use the following code:

import {halfOf, multiply} from 'lib';
console.log(multiply(21, 2));

ES2015 modules also support default export values. So, for instance, let's say you have file named doSomething.js that contains the following code:

export default function () { 
    console.log('I did something')

You'll be able to use it as follows in your main.js file:

import doSomething from 'doSomething';

It is important to remember that the default import should identify their entities using the module name.

Another important thing to remember is that modules export bindings and not values. So for instance, let's say you have a validator.js file that looks like this:

export let flag = false;
export function touch() {
    flag = true;

You also have a main.js file that looks like this:

import { flag, touch } from 'validator';

The first output would be false, and the second would be true. Now that we have a basic understanding of modules, let's move to classes.


The long debate about classes versus prototypes came to a conclusion that classes in ES2015 are basically just a syntactic sugar over the prototype-based inheritance. Classes are easy-to-use patterns that support instance and static members, constructors, and super calls. Here is an example:

class Vehicle {
    constructor(wheels) {
        this.wheels = wheels;
    toString() {
        return '(' + this.wheels + ')';

class Car extends Vehicle {
    constructor(color) {
        this.color = color;
    toString() {
        return super.toString() + ' colored:  ' + this.color;

let car = new Car('blue');

console.log(car instanceof Car); 
console.log(car instanceof Vehicle); 

In this example, the Car class extends the Vehicle class. Thus, the output is as follows:

 (4) in blue

Arrow functions

Arrows are functions shorthand by the => syntax. For people familiar with other languages such as C# and Java 8, they might look familiar. However, arrows are also very helpful because they share the same lexical this as their scope. They are mainly used in two forms. One is using an expression body:

const squares = => n * n); 

Another form is using a statement body:

numbers.forEach(n => {
  if (n % 2 === 0) evens.push(n);

An example of using the shared lexical would be:

const author = {
  fullName: "Bob Alice",
  books: [],
  printBooks() {
     this.books.forEach(book => console.log(book + ' by ' + this.fullName));

If used as a regular function, this would be the book object and not the author.

Let and Const

Let and Const are new keywords used for symbol declaration. Let is almost identical to the var keyword, so it'll behave the same as global and function variables. However, let behaves differently inside a block. For instance, look at the following code:

function iterateVar() {
  for(var i = 0; i < 10; i++) {


function iterateLet() {
  for(let i = 0; i < 10; i++) {

The first function will print i after the loop, but the second one will throw an error, since i is defined by let.

The const keyword forces single assignment. So, this code will throw an error as well:

const me = 1
me = 2

Default, Rest, and Spread

Default, Rest, and Spread are three new features related to functions parameters. The default feature allows you to set a default value to the function parameter:

function add(x, y = 0) {
    return x + y;

In this example, the value of y will be set to 0 if a value is not passed or is set to undefined.

The Rest feature allows you to pass an array as trailing arguments as follows:

function userFriends(user, ...friends) {
  console.log(user + ' has ' + friends.length + ' friends');
userFriends('User', 'Bob', 'Alice');

The Spread feature turns an array into a call argument:

function userTopFriends(firstFriend, secondFriend, thirdFriends) {

userTopFriends(...['Alice', 'Bob', 'Michelle']);


Going into modern web development, ES2015 will become a viable part of your daily programming sessions. What is shown here is the tip of the iceberg, and it is strongly recommended that you continue to investigate it deeper. However, for the purposes of this book, it will suffice.