A Practical Guide to Planning a MEAN Stack Application

This article is excerpted from Manning Press's "Mastering MEAN: Using Mongo, Express, Angular and Node, Second Edition". The second edition has been fully revised and updated to cover Angular 2, Node 6 and the latest mainstream JavaScript version ES2015 (ES6). This edition will walk you through learning how to develop web applications using the updated MEAN stack.

Key Points

• When planning a MEAN stack application, you must first conceive the screen you want without having to dig deep into what is on each page. Sketches at this stage help visualize the entire application and organize the screen into collections and processes.
• Divide the screen into a logical set. For example, screens at all processing locations can be combined together, while independent pages like "About Us" can be combined in a miscellaneous collection.
• Consider the architecture of the application, start with the API. Building APIs that interact with data is the basis of the architecture. Determine whether to provide HTML directly from the server or choose a single page application (SPA) based on the application's specific requirements.
• Architecture can be encapsulated in an Express project, making it easier to manage and deploy. However, it is crucial to properly organize your code to keep different parts of your application separate from each other so that it is easier to split it into separate projects when needed in the future.

Practical application planning: Loc8r

For ease of illustration, let's assume we are building a working application called Loc8r on the MEAN stack. Loc8r will list nearby places with WiFi where people can work. It will also show a map of facilities, opening hours, ratings and locations for each venue.

Advanced MEAN Stack Application Planning

The first step is to consider which screens are needed in the application. We will focus on separate page views and user journeys. We can do this at a high level without having to pay attention to the details on each page. It is best to sketch on paper or on a whiteboard at this stage, as it helps visualize the entire application. It also helps organize screens into collections and processes, as a good point of reference when building. Since there is no data attached behind the page or application logic, it is easy to add and delete parts, change the displayed content and location, and even change the number of pages required. It is very likely that we won't do it right for the first time; the key is to start iterating and improving until we are satisfied with the individual pages and the overall user process.

Screen Planning

Read Modern JavaScript Follow the ever-evolving JavaScript world! Read this book Read this book

Let's consider Loc8r. Our goals are as follows:

Loc8r will list nearby places with WiFi where people can work. It shows the facilities, opening hours, ratings and location maps of each venue. Visitors can submit ratings and comments.

From this we can learn some of the screens we need:

1. Screen listing nearby places
2. Screen showing details of a single place
3. Screen for adding comments about places

We may also want to tell the visitors what Loc8r is for and why we should add another screen to the list:

1. Screen for "About Us" information

Divide the screen into a collection

Next, we want to get the screen list and organize them to where they logically belong together. For example, the first three in the list are all related to position. The About page does not belong anywhere, it can be placed in the miscellaneous "Other" collection. Drawing a sketch will result similar to Figure 1.

Figure 1: Organize the application's separate screen into a logical collection.

Such a quick sketch is the first phase of planning, and we need to complete this phase before we start thinking about the architecture. This stage gives us the opportunity to view the basic page and consider the process. For example, Figure 1 shows the basic user journey in the Location collection, from the List page to the Details page, and then to the form where you add a comment.

Architecture Design

Loc8r looks simple, with only a few screens. But we still need to think about how to build its architecture, because we will transfer data from the database to the browser, allowing the user to interact with the data and allow the data to be sent back to the database.

Start with the API

Since the application will use the database and pass the data, we will start building the architecture from the parts we certainly need. Figure 2 shows the starting point, a REST API built using Express and Node.js to enable interaction with MongoDB databases.

Figure 2 Starting with the standard MEAN REST API, use MongoDB, Express, and Node.js.

Building APIs that interact with our data is the basis of the architecture. The more interesting and difficult question is: How do we build the architecture of our application?

Application Architecture Options

At this point, we need to look at the specific requirements of the application and how to combine the parts of the MEAN stack together to build the best solution. Do we need some special features of MongoDB, Express, Angular, or Node.js to change decisions? Do we want to serve HTML directly from the server, or is SPA a better option?

For Loc8r, there are no special or specific requirements, and whether it should be easily crawled by search engines depends on the business growth plan. If the goal is to bring organic traffic from search engines, then yes, it needs to be crawlable. If the goal is to promote the application as an application and drive usage in this way, search engine visibility seems less important.

We can immediately envision three possible application architectures, as shown in Figure 3:

1. Node.js and Express applications
2. Node.js and Express applications with Angular interaction
3. Angular SPA

With these three options in mind, which one is best for Loc8r?

Figure 3 Three options for building Loc8r applications, from server-side Express and Node.js applications to full client Angular SPA.

Select application architecture

There is no specific business requirement that drives us to prefer one architecture over another. Building all three architectures allows us to explore how each approach works and enable us to look at each technology in turn, building the application layer layer by layer.

We will build the schema in the order shown in Figure 3, starting with the Node.js and Express applications, then continue adding some Angular and refactoring it to Angular SPA. While this is not the way you usually build a website, it provides you with a great opportunity to learn all aspects of the MEAN stack.

Encapsulate everything in one Express project

The architecture diagram we've been looking at suggests that we will have separate Express applications for the API and application logic. This is entirely possible and is also a good choice for large projects. If we expect a lot of traffic, we might even want our main application and our API to be on different servers. The added benefit of this is that we can set more specific settings for each server and application that best suits their respective needs.

Another way is to keep it simple and concise and put everything in a single Express project. With this approach, we just need to worry about hosting and deploying an application, as well as managing a set of source code. This is what we will do with Loc8r, which gives us an Express project with some sub-apps. Figure 4 illustrates this approach.

Figure 4 Application architecture that encapsulates API and application logic in the same Express project.

When combining applications in this way, be sure to organize the code properly so that different parts of the application can be separated. In addition to making our code easier to maintain, it also makes it easier for us to split it into separate projects later on when we decide to take the right route. This is a key topic that we will continue to discuss in this book.

final product

As you can see, we will use all the layers of the MEAN stack to create Loc8r. We will also include Twitter Bootstrap to help us create a responsive layout. Figure 5 shows screenshots of some content that can be built.

Figure 5 Loc8r is a sample application. It displays different on different devices, displays the list of places and details of each place, and allows visitors to log in and leave comments.

Conclusion

This is all about this article. If you want to start putting these steps into practice, visit Manning’s website, where you can download the free first chapter of Mastering MEAN: Using Mongo, Express, Angular, and Node, Second Edition, or purchase the book. Otherwise, if you have any questions about what I have covered in this article, please post it in the comments below.

FAQs about Planning MEAN Stack Applications (FAQ)

What is the MEAN stack and why is it important in application development?

MEAN stack is a collection of JavaScript-based technologies used to develop web applications. MEAN is the acronym for MongoDB, ExpressJS, AngularJS, and Node.js. MongoDB is a NoSQL database, ExpressJS is a web application framework, AngularJS is a JavaScript framework, and Node.js is a server platform. The importance of the MEAN stack in application development lies in its efficiency and flexibility. It allows developers to write code for both server and client using JavaScript, enabling seamless integration and efficient data processing.

How does the architecture of the MEAN stack application work?

The architecture of MEAN stack applications is flexible and efficient. MongoDB (a NoSQL database) stores application data. ExpressJS running on Node.js server handles server-side functionality. AngularJS manages client (user-oriented) functionality. The entire application is written in JavaScript, allowing data to flow seamlessly from user interaction to server and database.

What are the benefits of using MEAN stack for application development?

MEAN stack provides many benefits for application development. Thanks to Node.js, it allows code reuse and high speed. MongoDB provides flexibility to store complex data, while AngularJS provides a clean way to add interactive features. ExpressJS simplifies the process of creating and managing server routing. Additionally, since everything is written in JavaScript, it simplifies and speeds up the development process.

How does MongoDB improve the efficiency of MEAN stack applications?

MongoDB is a NoSQL database that provides high performance, high availability and ease of scalability. It is based on the concept of collections and documents, rather than a traditional relational database using tables and rows. This makes MongoDB particularly good at handling large amounts of data and complex hierarchical data structures, which helps improve the efficiency of MEAN stack applications.

What role does AngularJS play in a MEAN stack application?

AngularJS is a powerful JavaScript framework for building applications in the MEAN stack. It allows developers to expand HTML vocabulary to create more expressive, readable, and faster development environments. AngularJS also provides data binding capabilities for HTML, enabling automatic synchronization of data between model and view components.

ExpressJS How to simplify server-side operations in MEAN stack applications?

ExpressJS is a minimal and flexible Node.js web application framework that provides a powerful set of features for both web and mobile applications. It simplifies server-side operations by providing a simple interface to build single-page, multi-page, and hybrid web applications. It also helps manage routing, requests, and views, and perform middleware operations.

How does Node.js enhance the performance of MEAN stack applications?

Node.js is a platform built on the Chrome-based JavaScript runtime for easy building fast and scalable web applications. It uses event-driven, non-blocking I/O models, making it lightweight and efficient, making it ideal for data-intensive real-time applications running across distributed devices. This enhances the performance of the MEAN stack application by allowing it to process multiple client requests simultaneously without lag.

What are the prerequisites for developing a MEAN stack application?

To develop a MEAN stack application, you need a basic understanding of JavaScript and HTML. You also need to know about NoSQL databases (especially MongoDB), as well as to understand client and server-side scripts. It is crucial to be familiar with AngularJS, ExpressJS, and Node.js. In addition, understanding JSON and AJAX technologies will be of great benefit.

How does MEAN stack compare to other full stack options?

The MEAN stack is entirely based on JavaScript and provides a seamless development process because the same language can be used on the client and server side. This is the main advantage of other full-stack options that require proficiency in multiple languages. Additionally, Node.js' non-blocking architecture makes MEAN stack applications fast and scalable, making it the first choice for real-time applications.

Can I use another database in the MEAN stack?

While MongoDB is the default database in the MEAN stack because it is compatible with JavaScript, other databases are available. However, this may require additional configuration and code tweaks, and seamless data flows known to the MEAN stack may be affected. Therefore, unless there is a specific need to use a different database, it is recommended to use MongoDB.

The above is the detailed content of A Practical Guide to Planning a MEAN Stack Application. For more information, please follow other related articles on the PHP Chinese website!