I hope you are as excited as I am to build an e-commerce app using state-of-the-art technology like the MEAN stack with the help of this book. By the end of this book, you will not only know more about MEAN e-commerce apps but also about following the best practices. You will get familiar with concepts like Agile methodologies, sprint/iterations, continuous integration, Test Driven Development (TDD), and production deployment.
We are going to cover some ground in this first chapter, and then deepen our knowledge on each of the MEAN stack components. The topics that will be covered in this chapter are as follows:
Installing the MEAN components
Understanding the project structure
Previewing the final app built-in this book
Understanding the requirements for e-commerce applications
Asynchronous programming (evented non-blocking I/O) which is translated into high throughput and scalability
One single programming language across the whole project which is translated into fast paced development and is easy to learn
Vibrant community. NPM packages have grown faster than any other programming language community yet
CPU/thread-intensive apps: Applications that have to deal with heavy CPU usage and low I/O are not very well suited for NodeJS. Some examples of such applications are video encoding and artificial intelligence, which are probably better handled in C/C++. NodeJS supports C++ add-ons, so seamless integrations are an option.
In general, this is how SPAs (and the MEAN stack) work: when a client request is received from the user's browser, it hits the ExpressJS web server first. ExpressJS runs on top of the NodeJS platform, and it connects to the MongoDB database as needed. Finally, the client's request is answered with an AngularJS application. From that point on, all subsequent requests are made behind the scenes through AJAX to the ExpressJS API. AngularJS takes care of rendering any new data instantly and avoiding unnecessary full-page refreshes.
Now, let's go through each component individually.
NodeJS will be our server-side platform, and we will need it to run our web server, ExpressJS.
ExpressJS is a web framework for NodeJS. It is a very transparent webserver that not only allows us to build web applications but also to expose RESTful JSON APIs. Express is very modular, so we can process/modify any requests using something called middleware. There are middlewares to provide authentication, handling cookies, logging, error handling and other such functions.
MongoDB is an open source document-oriented database, one of the most popular in the NoSQL database world. It favors a JSON-like document structure rather than the more traditional table-based structures found in relational databases. Its query language is very powerful and expressive. Later in this book, we are going to compare the equivalent SQL queries to MongoDB queries.
MongoDB stores all the users' data, products, orders, and anything that needs to be persistent in the e-commerce application.
The node community has been very busy lately and has created more packages for it than any other existing platform. Not just packages but the core development too has been forked (for example, ioJS) and merged back to the main line. Since we are aiming for production, we are going with the current stable version v0.12. We are going to use NVM (Node Version Manager) to switch easily between versions when newer versions become stable.
If you are a Windows user, you can see the instruction on the NVM site at https://github.com/creationix/nvm.
*nix users, this is how you install NVM:
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.24.1/install.sh | bash $ source ~/.nvm/nvm.sh $ nvm install 0.12 $ nvm use 0.12
$ node -v # v0.12.7 $ npm -v # 2.11.3
npm install -g [email protected]
Note that we are downloading a specific version using
-g argument means that we are installing the package globally.
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Then you can install MongoDB:
brew update && brew install mongodb 3.0.2
sudo apt-get -y install mongodb=3.0.2
For other operating systems, follow the instructions given at the official site at https://www.mongodb.org/downloads.
meanjs. We are going to use the first one since it provides out-of-the-box functionality that is closer to our needs. Let's go ahead and install it:
# Install all the tools $ npm install -g [email protected] # Make a new directory 'meanshop' $ mkdir meanshop && cd $_ # Execute the AngularJS scaffold $ yo angular-fullstack meanshop
You will see a lot of things going on when you run the commands. But don't worry, we are going to explain all the magic in the next few chapters. For now, play along and get everything installed.
The command line has some kind of wizard that asks you about your preferences. The following are the ones that we are going to use throughout the examples in this book:
It takes a while, because it installs a number of packages for you. Take a look into
bower.json. Bower is another package manager like
npm but for the frontend libraries. After the installation is complete, you can run the example app with these commands:
# Build $ grunt # Preview the app in development mode $ grunt serve # Preview the app in production mode $ grunt serve:dist
You can find more information about Batarang at https://github.com/angular/angularjs-batarang.
Applications built with the
angular-fullstack generator have many files and directories. Some code goes into the client, some executes in the backend, and another portion is just needed for development, such as the tests suites. It's important to understand the layout to keep the code organized.
Yeoman generators are time savers. They are created and maintained by the community following the current best practices. It creates many directories and a lot of boilerplate code to get you started. It might be a bit overwhelming at first to see the number of (possibly) unknown files there. Do not panic, we are going to cover them here and in the next few chapters.
Review the directory structure that was created. There are three main directories:
meanshop ├── client │ ├── app - App specific components │ ├── assets - Custom assets: fonts, images, etc… │ └── components - Non-app specific/reusable components │ ├── e2e - Protractor end to end tests │ └── server ├── api - Apps server API ├── auth - Authentication handlers ├── components - App-wide/reusable components ├── config - App configuration │ └── local.env.js - Environment variables │ └── environment - Node environment configuration └── views - Server rendered views
Zooming into clients/app, we will find that each folder has the name of the component (main page, products page), and that inside each folder are all the files related to that component. For instance, if we look inside main, we will find the AngularJS files, CSS (scss), and HTML:
meanshop/client/app/main ├── main.js - Routes ├── main.controller.js - Controller ├── main.controller.spec.js - Test ├── main.html - View └── main.scss - Styles
Similarly, for our back-end, we have folders named after the components with all the related files inside. We will find NodeJS files, ExpressJS routes, SocketIO events, and mocha tests:
meanshop/server/api/thing ├── index.js - Routes ├── thing.controller.js - Controller ├── thing.model.js - Database model ├── thing.socket.js - Socket events └── thing.spec.js - Test
There are a number of tools used in this project that you might be already familiar with. If that's not the case, read the brief description given, and when needed. we will describe it more thoroughly.
EditorConfig: This is an IDE plugin, which loads the configuration from a file,
.editorconfig. For example, you can set
indent_size = 2, indents with spaces or tabs, and so on. It's a time saver and maintains consistency across multiple IDEs/teams.
AngularJS comes with package managers for third-party backend and frontend modules:
Bower: This is the frontend package manager that can be used to handle versions and dependencies of the libraries and assets used in a web project. The file
bower.jsoncontains the packages and versions to install, and the file
.bowerrccontains the path for the location where those packages need to be installed. The default directory is
Let's take a break from the terminal. In any project, before starting coding, we need to spend some time planning and visualizing what we are aiming for. That's exactly what we are going to do: draw some wireframes that walk us through the app. Our e-commerce app–MEANshop–will have three main sections:
There's no better way to learn new concepts and technologies than developing something useful with it. This is why we are building a realtime e-commerce application from scratch. However, there are many kinds of e-commerce apps. In the next section, we are going to delimit what we are going to do.
Even the largest applications that we see today started small and built their way up. The Minimum Viable Product (MVP) is the strict minimum that an application needs to work. In the e-commerce example, it will be the following:
Add products with their title, price, description, photo, and quantity
Guest checkout page for products
One payment integration (for example, PayPal)
This is the minimum requirement for getting an e-commerce site working. We are going to start with these, but by no means will we stop there. We will keep adding features as we go, and build a framework that will allow us to extend the functionality along with high quality.
We are going to capture our requirements for the e-commerce application with user stories. A user story is a brief description of a feature told from the perspective of a user, where he expresses his desire and benefit in the following format:
As a <role>, I want <desire> [so that <benefit>]
User stories and many other concepts were introduced with the Agile Manifesto. Learn more about this concept at https://en.wikipedia.org/wiki/Agile_software_development.
As a seller, I want to create products.
As a user, I want to see all the published products and their details when I click on them.
As a user, I want to search for a product so that I can find what I'm looking for quickly.
As a user, I want to have a category navigation menu so that I can narrow down the search results.
As a user, I want to have realtime information so that I can know immediately if a product just got sold out or became available.
As a user, I want to check out products as a guest user so that I can quickly purchase an item without registering.
As an admin, I want to manage user roles so that I can create new admins, sellers, and remove seller permissions.
As an admin, I want to manage all the products so that I can ban them if they are not appropriate.
As an admin, I want to see a summary of the activities and order statuses.
All these stories might seem verbose, but they are useful for capturing the requirements in a consistent way. They are also handy for developing test cases.
Learn more about user stories at https://en.wikipedia.org/wiki/User_story.
The technical requirements about deployment, scalability, and performance will be discussed in the final chapters.
In this chapter, we discussed the reasons for using the MEAN stack to build our e-commerce application, and got it installed. This is not just some kind of trend which some companies are migrating to. It gives a tremendous performance boost to the apps, and eases the learning curve using one main language for both, the frontend and the backend. We also described the file structure that we are going to use for organizing the code. Finally, we explored the features that the final app will have, and the way it's going to look and behave. In the next series of chapters, we are going to work with each piece of the MEAN stack individually. Later, we will start integrating all the components and make them work together. The next chapter will cover the most visible part: building the marketplace with AngularJS.