The book "Stack MEAN. Mongo, Express, Angular, Node »

Typically, web development at all levels of the stack uses different programming languages. The MongoDB database, the Express and AngularJS frameworks, and the Node.js technology together form the MEAN stack - a powerful platform, at all levels of which only one language is used: JavaScript. The MEAN stack is attractive for developers and businesses because of its simplicity and cost effectiveness, and end users love MEAN applications for their speed and responsiveness.

JavaScript has reached maturity. Thanks to him, you can now create a web application from start to finish using just one programming language. The MEAN stack includes best-in-class technologies in this area. You get MongoDB as a database, Express as a web application server framework, AngularJS as a client framework, and Node as a server platform.

This book will introduce you to each of these technologies, as well as how to make them work together as a stack. Throughout this book, we create a working application, focusing on each technology in turn, observing how it fits into the overall architecture of the application. So this book is focused on practice, on the fact that you are comfortable with all the listed technologies and their sharing.

The concept “recommended solution” runs like a thread through the entire book. The publication is a kind of springboard for creating great applications using the MEAN stack, so we concentrate on developing good habits, the ability to do everything right and plan everything in advance.
')
This book does not teach how to use HTML, CSS, or basic JavaScript — it is assumed that the reader is already familiar with them. It includes a very brief summary of the Twitter Boo tstrap CSS framework. In addition, the bonus to it is an excellent application for JavaScript - its theory, recommended solutions, tips and glitches. It does not hurt to look there early.

Road map

This book invites you on a journey of 11 chapters.
Chapter 1 discusses the benefits of exploring the development of full-stack and analyzes the components of the MEAN stack.
Chapter 2 builds on the acquired knowledge of components and discusses how to use them together to create various things.
Chapter 3 introduces Express and helps you quickly master the creation and customization of a MEAN project.
Chapter 4 provides a deeper insight into Express by building a static version of the application.
Chapter 5 uses the existing knowledge about the application and uses MongoDB and Mongoose to design and build the required data model.
Chapter 6 covers the benefits and processes of creating a data API. We will create a REST API using Express, MongoDB and Mongoose.
Chapter 7 links the REST API to an application by getting it from our static Express application.
Chapter 8 is an introduction to the AngularJS stack: we will see how to use it in creating components for an existing web page, including how to access the REST API to get data.
Chapter 9 outlines the basics of creating single-page applications using Angular, demonstrating the development of a companionable scalable application that is easy to maintain.
Chapter 10 is based on the material in Chapter 9, and continues to develop a one-page application. It outlines some important concepts and increases the complexity of the Angular application.
Chapter 11 covers all parts of the MEAN stack, as it involves the addition of authentication to the application, allowing users to register and log into the application.

Excerpt from a book
2.3. Develop MEAN Flexible Architecture

If working with AngularJS is like owning a Porsche, then the rest of the stack corresponds to having an optional Audi RS6 in the garage. Many people will pay attention to the sports car in front of the house and will not notice the car in the garage. But if you still go into the garage and inquire, it turns out that under its hood is the Lamborghini V10 engine. This station wagon has much more to offer than it seems at first glance!

Using MongoDB, Express and Node.js together only to create an API REST is similar to using an Audi RS6 only to carry a child to school. Both they and he have excellent capabilities and will do this job very well, but they are capable of more.

We have already briefly discussed what can be obtained with these technologies in Chapter 1, but here are a few starting points.

- MongoDB can store and stream binary information.
- Node.js is especially good for real-time connections using web sockets.
- Express - web application framework with built-in application of templates,
routing and session management.

This is not a complete list, and I definitely can not consider all the possibilities of all these technologies in this book. I would need some books for this! All I can do is to give a simple example and show how you can put together pieces of the MEAN stack to design the best solution.

2.3.1. Requirements for the blog engine

Take a look at the blog engine idea that is already familiar to us and see how you can best design the MEAN stack to create it.

The blog engine usually consists of two parts. This is a public-oriented interface, which provides readers with articles that, hopefully, will be resold and distributed over the Internet. The blog engine also has an admin interface, which blog owners include to write new articles and manage their blogs. Some of the main characteristics of these two parts are shown in fig. 2.2.


Looking at the lists in fig. 2.2, it is easy to see a high level of conflict between the characteristics of these two parts. You need a rich content and a weakly interactive environment for blog articles and a rich, highly interactive environment for an administrative interface. Blog articles should be fast-loading — to reduce bounce rates, while the administrative area should respond quickly to user input and the data entered by it. Finally, users usually linger on a blog entry for a short time, but may want to share it with others, while the administrative interface is not accessible and an individual user can work in it for a long time.

Considering the potential SPA problems discussed earlier and looking at the characteristics of blog entries, you can find quite a few coincidences. It is likely that with this in mind you decide not to use the SPA to give your blog entries to readers. At the same time, the SPA is great for an administrative interface.

So what to do? Perhaps the most important thing is to keep blog readers — if their impressions of your blog were negative, they simply will not return and will not share entries. If the blog does not attract, the blogger will simply stop writing to it or switch to another platform. Again, a slow and poorly responsive administrative interface will cause blog owners to “run away from the ship.” How can you ensure that everyone is happy, and the blog engine was in business?

2.3.2. Blog Engine Architecture

The answer is that you do not need to look for one solution for all occasions. Let you have two applications. You have public-oriented content that you need to deliver directly from the server, and an interactive, non-public administrative interface that you want to run as a SPA. Let's look at each of these applications separately, starting with the administrative interface.

Administrative Interface: SPA at AngularJS

We have already discussed that a SPA based on AngularJS would be ideal for an administrative interface. So the architecture of this part of the engine will look very familiar: API REST, built on MongoDB, Express and Node.js, with a single-page application on AngularJS in the interface part. Figure 2.3 shows how it will look.

Blog entries: what to do?

If you think about blog entries, then everything turns out to be somewhat more complicated.

Imagine the MEAN stack only as a one-page application on AngularJS, accessing the REST API, and you’ll be fools. You can in any case create an interface part in the form of a SPA, since you want to use JavaScript and the MEAN stack. But this is not the best solution. You may find that the MEAN stack is simply not suitable for this case, and choose a different technology stack. But you do not need this! You just need a solid javascript.

So take a closer look at the MEAN stack and think about all its components. You know that Express is a web application framework. You know that Express can use template engines to create HTML code on the server. You know that Express can use URL routing and MVC patterns. You should think: is it the answer in Express?

Blog entries: use Express

In this blog script, delivering HTML code and content directly from the server is exactly what you need. Express does this especially well, even from the very beginning it provides a choice of template engines. HTML content will require data from the database, so you will use the REST API again (we will take a closer look at why this is the best approach in the next subsection). The basis of such an architecture is shown in fig. 2.4.


You get an approach in which you can use the MEAN stack, or at least part of it, to deliver database-based content directly from the server to the browser. But this is not the end. The MEAN stack is even more flexible.

Blog entries: use stack better

You've seen the Express app delivering blog content to visitors. If you need visitors to enter the site, perhaps to add comments to articles, you need to track user sessions. To do this, you can use MongoDB with your application on Express.

You can also display some data dynamically next to your blog posts, such as related posts or a search field with auto-completion, ahead of keyboard input. They can be implemented using AngularJS. Remember: AngularJS is not only for the SPA, it can also be used to add some interactive data to a page that would otherwise be static. Figure 2.5 shows how these optional MEAN parts are added to the blog component architecture.


Now you can organize the interaction of an application that provides content to visitors and is based on the full MEAN stack with your REST API.

Blog Engine: Hybrid Architecture

At this stage, we have two separate applications using the REST API. If you plan a little, it can be a generic REST API used by both parts of the application. The integrity of the architecture with one API REST, interacting with two applications of the client part, is shown in Fig. 2.6.


This is a simple example of demonstrating the connectivity of various parts of the MEAN stack into different architectures to meet the requirements that a project places to you. Possible options are limited only by your knowledge of the components and ingenuity with their combination. There is no one correct architecture for the MEAN stack.

»More information about the book can be found on the publisher's website.
» Table of Contents
» Excerpt

For Habrozhiteley 25% coupon discount - Stack