JavaScript
Article

Full Stack JavaScript Development With MEAN

By Adam Bretz

JavaScript has come a long way since being released back in 1995. We've seen several major versions of the ECMAScript specification and the rise of single-page web applications, all powered by client side JavaScript frameworks. Initially, all JavaScript development and innovation was done in the browser because that was the only context that supported the language. As time passed, web developers started to realize that many of JavaScript's most useful features (that it's non-blocking, it's event-driven, that it's a familiar language for many) could be leveraged in environments other than the browser. This kick-started a second round of innovation in the JavaScript community that resulted in JavaScript running on servers and on databases.

Suddenly, knowing JavaScript didn't automatically pigeonhole you as a "front end web developer." If you know the language well, you can build servers and databases, in addition to front end user experiences. Now, for the first time, developers can build an entire web application using only JavaScript. This trend is often called things like "full stack JavaScript" or "pure JavaScript solutions." Combining four popular JavaScript technologies; MongoDB, Express, AngularJS, and Node.js to build web applications has become so popular, that it has become known as the "MEAN Stack."

MEAN Stack

  1. MongoDB – MongoDB is what's known as a NoSQL database. It can be thought of as a database of documents, rather than consisting of rows, columns, and tables. The primary use case is storing JSON data; a perfect fit when writing applications with JavaScript. What it may lack in relations and a draconian adherence to schema, it makes up for in speed, scalability, and ease-of-use.
  2. Express – Express is a thin web server framework designed to make building web servers with Node easier and more maintainable. It is an unopinionated framework which provides developers a high level of customizability but is "low-level" enough to still have access to the underlying Node framework it's built on. Express provides an easy to use request router, cookie management, a static file server, and many other HTTP building blocks needed to create enterprise-grade web servers.
  3. AngularJS – Angular is a feature-rich client side MVC JavaScript framework. It can be used to make robust and complex single-page web applications. It has built in two-way data binding and its own HTML-based templating language. It also has a feature called "directives" that allow you to extend HTML with new attributes, and even new elements. Angular is also highly testable, which may not be the most interesting facet of development, but it is often the most important and is frequently overlooked with client side code. Finally, it provides conventions and best practices to help developers structure client side solutions.
  4. Node – Node is a JavaScript runtime used to build server and networking applications. It provides all the JavaScript features found in the browser with additions for file and network I/O. It uses Google's V8 engine (the same one used in Google Chrome) to execute JavaScript. It also boasts a very active community of developers and ecosystem of Node modules (Express is one such module). While there have been other server side implementations of JavaScript, Node is, by far, the most successful in terms of development and adoption by both enthusiasts and large corporations as well.

If you are a fan of JavaScript, like I am, you should be excited by the prospect of building an entire web application using only JavaScript. The MEAN Stack is an extremely popular topic, and there is tons of information on the web out there for how to get started working with it. In fact, there is so much information, the thought of "getting started" might seem a little daunting.

That's why myself and Colin Ihrig wrote a book about it. In it, we discuss each of the four technologies that comprise the MEAN stack. We cover the most important features of each technology that will help you get up to speed and become productive very quickly. Explanations only go so far however. In addition to the many code examples, we will also walk through building a simple HR-style web application throughout the book. You'll learn a technology, see some code examples, and then walk through building a real system using the technology. At the end of the book, you'll have a functional web application that you can work on, and expand on your own with the information from the book.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Comments
walabbady

this is Great !
any good IDE (interface development environment) to work on ?
to easily drag and drop and code ? , to make apps faster ?

flyingace

I was disappointed that this wasn't a full article. It felt more like a pitch for the book linked to at the end.

arb

I use a mix of Atom and WebStorm. Atom is nice because it is small and lightweight. If I'm building something larger and complicated, I tend to use WebStorm because of the built in debugger and terminal.

arb

That's because it was a promotional article to coincide with the book release smile I was just trying to get people interested in the MEAN stack and maybe check out the book.

To reproduce the contents of the book in a series of articles would span many many SitePoint articles.

flyingace

You know, when I first read your reply, I found myself composing a reply from the back of my high horse all about how this was a site where articles are posted and shouldn't be just promotions for books and such and then I remembered that I hadn't paid dime one for any of these articles.

"Okay," I said to my horse, "you can let me down now." Because why shouldn't you be allowed to promote your book? I probably won't pick it up right away because I'm still going to have to do a bit more research before I have an opinion on whether MEAN is something I want to pursue, but I sincerely wish you the best of luck with it.

Pullo

Hi,

On the main site we have a weekly roundup of interesting news and articles from across the web.

I thought you might be interested to know that this week it features a bunch of articles/tutorials on the MEAN stack.

You can find it here: http://www.sitepoint.com/radar-week-code-quality-christmas-time/

zack_whipkey

Do you think the MongoDB will still be useful/current within the next few years with the recent addition of noSQL features in PostgreSQL that have reportedly outperformed Mongo? (see http://blogs.enterprisedb.com/2014/09/24/postgres-outperforms-mongodb-and-ushers-in-new-developer-reality/) . Personally, I don't see it going anywhere for a while but if the hybrid approach rings true and gains a community following, why not?

DavidT

Hello,

I have really enjoyed the book "Full Stack JavaScript Development With MEAN" so far. I am on chapter 9 now, and encountering a strange error when I run the application "Schema hasn't been registered for model 'Employee'".

Oddly enough, the populate_db script works. I was wondering if you have a more complete source code I could follow? I see the source code on GitHub, but the offerings are one file for each folder, and don't follow the project structure... I think if I look at that I could see why this error is occurring, and if I copied something incorrectly.

Thank you very much; I appreciate it!

arb

The error means you are trying to use the Employee Mongoose model before it's been registered by Mongoose. Without seeing what you have, it's really hard to guess what the issue is. Try using the linked code available and see if you can edit it to make it work for you. More than likely, you are just missing the code that registers this model.

DavidT

Thanks, I went through the application and found this:
var http = require('http');
var employeeService = require('./lib/employees');
require('./lib/connection');
var responder = require('./lib/responseGenerator');

It should have been this:

var http = require('http');
require('./lib/connection'); //Make sure connection comes BEFORE!! employeeService
var employeeService = require('./lib/employees');
var responder = require('./lib/responseGenerator');

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.