Mastering MEAN Stack: Build full stack applications using MongoDB, Express.js, Angular, and Node.js (English Edition)

CHAPTER 1

Fundamentals of Full Stack Development and the MEAN Stack

Welcome to the exciting world of full stack development. This book will be divided into three parts. The first part will make the user understand what full stack development is and what the MEAN stack is. The second part will explore the installation of the different MEAN stack components, the creation of the front-end using Angular, adding Node.js and connecting with Angular, and the addition of the MongoDB (NOSQL) database. This part will take care of the Create, Read, and Delete part of CRUD. The third part will cover the Update part of CRUD and routing, image upload, and pagination. The fourth part will cover adding authentication, authorization, error handling, optimization, and deployment. It is going to be a very exciting journey, so let’s get started and understand what full stack development all is about. We will then understand the fundamentals of the MEAN stack.

This chapter will focus on the concept of full stack development, its importance and how the MEAN stack is a quick way to develop such applications. We will understand why the MEAN stack is so irresistible for developers. We will also see a glimpse of the application that we will be developing. Understand how the MEAN stack helps in fast, efficient, and scalable development. We will understand the difference between the traditional multi-threaded web server and the single-threaded Node web server, learn what blocking/non-blocking code is, and understand the Express framework. We move on to MongoDB as the database for our stack and eventually, we look at the Angular frontend framework which will be used in designing the face of our application. We will look at what TypeScript is and look at the use of Bootstrap. We will introduce Git as our version control system. We will look at AWS as our hosting service. We will then look at how the different MEAN components interact with each other. We will get introduced to Docker and Kubernetes and understand their role in deploying MEAN applications.

Structure

This chapter will predominantly focus on the following topics:

What is full stack development?

Introduction to the MEAN stack

Our sample application

Introduction to Node.js

Introduction to Express.js

Introduction to MongoDB

Introduction to Angular

Introduction to Typescript and Bootstrap

Introduction to Git as a version control system

Interaction between components of the MEAN stack

Introduction to Docker and Kubernetes as deployment tools

Objectives

After reading this chapter, the readers will understand what full stack development all is about. They will also get introduced to frameworks that support full stack development. They will understand what the MEAN stack is, and they will also get a glimpse of the sample application that we will be building throughout this book. They will learn about the underlying components of the MEAN stack and understand how the various components interact together. They will get introduced to Docker and Kubernetes and see how Docker simplified the build and deployment process.

What is full stack development?

Full stack development refers to the development of both frontend (client-side) and backend (server-side) parts of a web application. It is the art of designing complete web applications or websites. It comprises the development of frontend, backend, and database.

Full stack development can consist of the development of whole web applications using components like HTML, CSS, Java/JavaScript/Python, and a database of choice. JavaScript offers two major choices when it comes to designing web applications which are: The MEAN stack and the MERN stack. These stacks comprise frameworks and libraries.

Using full stack development, developers can design complete end-to-end applications. Such applications typically have 3 parts which are frontend, backend, and database. Let’s see each of these in a nutshell. We will be expanding on each of these throughout the book.

Frontend

What we call the frontend here is the visible part of the web application or website which is responsible for providing user experience. The user interacts directly with this part of the application.

The frontend languages can be any one of the following:

HyperText Markup Language (HTML): HTML is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext is used to establish a link between the web pages. The text within the tag is defined by the Markup language and this defines the structure of a web page.

Cascading Style Sheets (CSS): CSS is a language that simplifies the process of making web pages attractive. CSS helps to apply styles to web pages and CSS aids to do this independent of the HTML for each page.

JavaScript: JavaScript is a scripting language which is used to make the site interactive for the user.

The frontend frameworks and libraries can be any of the following:

Angular: Angular is an open-source front-end framework, written in JavaScript, mainly used to develop single-page web applications (SPAs). It converts static HTML to dynamic HTML. It is available to be used and changed by anyone. It extends HTML attributes with directives where data is attached with HTML.

ReactJS: React is a declarative JavaScript library created by Facebook for building user interfaces. ReactJS is an open-source, front-end library responsible for the front- end of the application.

Bootstrap: Bootstrap is a free and open-source collection to create responsive websites and web applications. It is the most popular framework for developing responsive websites which are very popular nowadays in the mobile world.

Backend

What we refer to as backend here is the server-side development of a web application or website which focuses on the functionality of the website. It is also responsible for managing the database through queries and APIs using client-side commands.

The backend languages can be any one of the following:

Java: Java is one of the most popular and extensively used programming languages and platforms known for its high scalability. Moreover, Java components are easily available.

Python: The Python programming language allows the developer to work quickly and integrate systems efficiently.

JavaScript: JavaScript can be used as a back-end programming language in addition to its being a front-end programming language.

The backend frameworks and libraries can be any of the following:

Express: Express.js, or Express, is a back-end web application framework for Node.js, which is free and open-source software under the MIT License. It is specifically designed for building web applications and APIs. It is one of the popular frameworks for node.js among developers.

Django: Django is a high-level web framework built in Python that encourages rapid development and clean, pragmatic design. It takes care of many of the problems of web development so that the developer can focus on writing her app without starting from scratch. It’s free and open-source software.

Spring: The Spring framework is an application framework and inversion of control (IOC) container designed for the Java platform. The core features of the framework can be used by any Java application, but extensions are available for building web applications on top of the Java EE platform.

Database

A database is a collection of data that is interrelated which helps in easy and efficient retrieval, insertion, and deletion of data. Data in a database is organized in the form of tables, views, schemas, reports, and so on.

Few of the popular databases used in full stack development are MongoDB, Oracle, MySQL, etc. Let’s take a brief look at these:

MongoDB: MongoDB is the most popular NoSQL database used in the MEAN and MERN stacks. It is an open-source document-based database. The term NoSQL means ‘non-relational’. This means that MongoDB isn’t based on the relational database structure and provides a totally different mechanism for the storage and retrieval of data.

Oracle: Oracle database is the collection of data that is interrelated. The purpose of this database is to store and retrieve information based on a SQL query.

MySQL: MySQL is a relational database management system like Oracle which is Open Source. An interesting fact about its name is that it is a combination of My, the name of co-founder Michael Widenius's daughter, and SQL, the abbreviation for Structured Query Language.

Introduction to the MEAN stack

MEAN (MongoDB, Express.js, Angular (or Angular), and Node.js) is a free and open-source JavaScript software stack for developing dynamic websites and web applications. Since all components of the MEAN stack support code written in JavaScript, MEAN applications can be written in a single language for both server-side and client-side execution environments.

The MEAN stack is often compared to other popular web development stacks such as the LAMP stack, the components of the MEAN stack are higher-level and include a web application presentation layer. An important thing to note is that the MEAN stack does not include an operating system layer.

The acronym MEAN was created by Valeri Karpov. He put forward the term in a 2013 blog post. The logo concept was initially created by Austin Anderson for the original MEAN stack LinkedIn group. This logo is a collection of the first letter of each component of the MEAN acronym.

Our sample application

We will build a blogging application which will have features such as:

A user can sign-up for the blogging application.

A user can log in to the system.

The logged-in user can create a blog.

The user who created the blog can modify and delete the blog.

Other users can view the