Name: Full Stack JavaScript Development with MEAN
Rating: 4.2 (104 reviews)

Work across the entire development stack in JavaScript. We'll introduce you to MongoDB, Express, AngularJS and Node.js, and give you practical examples, modules and skills to build, test and deploy with MEAN.

Full Stack JavaScript Development with MEAN

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

AngularJS is an open-source JavaScript framework, maintained by Google, to enhance web apps

AngularJS

What if everything you already know about front-end JavaScript could be applied to your back-end coding? Welcome to Node.js.

Node.JS

Full Stack JavaScript Development with MEAN 

Preface

Web programming is a task that takes years to truly understand. Part of the complexity comes from the sheer number of moving parts. Effective programmers need at least a basic understanding of many topics, including networking, protocols, security, databases, server-side development, and client-side development, amongst others. For many years, this also included working with a medley of programming languages.

Introduction

To date, there have been over ten different server-side implementations of JavaScript. While Node.js is the most successful, it is far from being the first. Engineers have spent considerable time and effort trying to make JavaScript run on a web server—but why? What is it about JavaScript that makes it so well-suited to being a server-side language? Ultimately, it boils down to two factors: familiarity and non-blocking asynchronous I/O.

Node.js Introduction

As we discussed in Chapters 1 and 2 , one of the keys to the success of Node is the wide array of modules that are available to developers. There are open-source modules on GitHub for the majority of problems developers face when building a web server. Then there are modules available for social authentication, validation, and even server frameworks such as ExpressJS and Hapi. Not every module is massive and complicated, though; there are simple modules for coloring console text, formatting dates and times, and cloning JavaScript objects.

Modules and npm

A language’s programming model defines how developers write code, and can make or break a language. Since Node is just JavaScript, the rules of the language are the same; however, Node does adhere to a number of additional conventions that make code consistent across its core and third-party modules. In Chapter 2 , you learned how to create a simple HTTP server in Node. The goal of this chapter is to help you better understand the code structure of that server so you can extend it to other Node applications.

Node’s Programming Model

In Chapter 3 , you learned about Node’s module system and the require() function. Then, Chapter 4 taught you how to write code in the Node way. Along the way, you’ve also seen a few examples that used the http and fs core modules. This chapter brings all the previously discussed material together, explaining how to use some of Node’s core modules in detail. Before we start, it’s worth pointing out that we’ll only scratch the surface of the Node core—it’s far too large to cover in a single chapter; however, after completing this chapter, you should have adequate knowledge to understand the Node documentation.

Core Modules

We’ve covered everything you need to dive into creating a real Node server in the preceding chapters. This chapter will focus on building a subset of the Node server for the human resources application we’re using to demonstrate the MEAN stack.

Building the Node Server

Almost all web applications depend on some sort of database for persisting information. Databases are primarily either relational or NoSQL. Relational databases, the de facto standard for years, are identified by their use of SQL. The NoSQL family of databases, as their name suggests, do not use SQL, and have risen to prominence in recent years, mainly due to the perceived ease of use and speed. The MongoDB documentation provides a very good comparison of (Mongo-specific) NoSQL commands to SQL. The next three chapters will discuss MongoDB, one of the most popular NoSQL databases, while relational databases will be explored in Chapter 10 .

MongoDB Introduction

The previous chapter covered the basics of MongoDB: what it is, how to set it up, and how it can be useful. We’ll assume that by this point you have a MongoDB instance up and running somewhere. We’re going to use the instance we’ve created, but you should create your own so that you have the freedom to experiment on your own. If you’re yet to do so, you can create a free MongoDB instance at MongoLab.

Interacting with MongoDB Using Mongoose

In Chapter 6 , we began work on our example human resources application. At the time, Node was unfortunately the only technology that had been introduced, so the application in Chapter 6 only consisted of a Node HTTP server returning hard-coded employee data from a JSON file. Now that we have a good understanding of MongoDB and the Mongoose module, we can update the example application to use a database.

Using MongoDB and Mongoose in Our Sample App

MongoDB is a fantastic technology, but it is far from being the only option when it comes to adding a data store to your applications. There are a number of NoSQL alternatives such as Redis , CouchDB , and Cassandra . Alternatively, you could turn to a relational database management system such as MySQL, Oracle , or SQL Server . Using a relational database will require you to understand SQL, but picking up the basics of SQL is relatively easy. This chapter explores MySQL as a free, relational alternative to MongoDB. Technically, this deviates from the MEAN stack, but we feel strongly about exploring popular and viable alternatives.

Alternatives to Mongo

We touched on Express earlier, but now we’re going to really dive into it. Express is a Node module that provides a thin web application framework around the core Node modules discussed in Chapter 5 . As of this writing, it is the most starred module on the npm registry.

Introduction to Express

In the previous chapter, we generated our first Express application. At the time of writing, Express was in version 4 so that’s the version this book will be discussing. The Express generator gives developers a great place to start building a new web server. It provides a few simple routes, Jade templating integration, cookie and body parsing, and static file serving. In this chapter, we’ll cover the important files and concepts of the generated Express application. This will give you a strong understanding of the architecture of the Express ecosystem, as well as the interactions in many of the framework’s moving parts.

Architecture of an Express Application

This chapter revisits the example Human Resources application that was started in Chapter 6 and continued in Chapter 9 . Up to this point, we've created a Node application that communicates with a MongoDB store. We used Node's http module to write a custom implementation for a router. Now that we have the more powerful Express router at our disposal, we're going to replace our http code.

Using Express in Our App

With a language as popular as JavaScript, there are bound to be differences in opinion on how to solve any problem— from something as simple as loop optimization to the more complex, such as the best way to simulate classical object-oriented inheritance. The passion and drive to perform tasks the best way followed JavaScript enthusiasts into the Node community, and is evident when looking at the available web server frameworks. A few quick Google searches and you’ll see that the list of available frameworks is quite large, while a search for “framework http” on npm nets you page after page of various web server frameworks. There are far too many options to name here without doing any of them a disservice.

Alternative Server Frameworks

The final MEAN technology that we’re going to explore is AngularJS. Angular is a front-end framework used for creating single-page applications (SPAs). Like the other MEAN technologies, Angular is open source and can be used freely in your applications.

AngularJS Overview

In programming, data binding is the automatic synchronization of data is between a program’s data layer and the associated view layer. Think back to some of the database code in this book. We would execute a query in the database, collect the result in a variable, and then send the JSON to the requesting client. If we take this one more logical step, that JSON would be used by the display layer to show the database results to the user. This can be thought of as one-way data binding; the data from the database is bound to the view we display to the user. For our purposes, our application is going to be a web page and the view is going to be HTML.

Data Binding

This chapter continues our exploration of Angular’s core principles. Specifically, this chapter focuses on directives, which are what allow Angular to extend HTML syntax. Angular ships with a number of built-in directives, but developers can also define custom directives to suit their application’s needs. This chapter will explain how to use directives, as well as how you can create your own.

Angular Directives

Controllers create a framework to promote code reusability and testability. They are the basic building blocks of an Angular application. In previous chapters, we covered data binding and directives. We briefly touched on Angular controllers at the end of Chapter 16 . In this chapter, we’re going to cover controllers in greater detail. We’ll discuss what they are and what purpose they serve; we will then cover some syntax issues, best practices, and examples.

Controllers

In Chapter 18 , we demonstrated how to make Ajax requests to our Express server and load the results into $scope to display the results. That’s great for a single-page website, but most applications span more than a single page. In Listing 18-2, what if we wanted to add a new screen that could be used to edit an employee? The application needs to change pages and display a new view, but we want to use the benefits of an Ajax request and not lose all of our JavaScript state and static files in the browser’s memory. We also want that page to be bookmarkable, so the page has to be stateless.

Client-side Routing

Throughout Chapters 6, 9, and 13, we’ve created a reasonably straightfoward human resources application API using Node, MongoDB, and Express respectively. In this chapter, we’re going to create the front end of our application using Angular. The result will be a full-blown MEAN application. This chapter contains a considerable amount of code as it ties the rest of the application together, but we’ll do our best to explain it clearly.

Angular in Our App

In the examples we’ve shown in many of the Angular chapters, all the JavaScript code lies in a single file. There are several benefits of working with a single file. The browser only needs to download one file containing all of our JavaScript, and can reuse a cached version everywhere on the site. It also reduces download order issues because everything is contained in a single file with the code in the proper, logical order. The entire block of code can be wrapped in a function expression that keeps the contents out of the global namespace. Finally, minification can reduce the browser download size, sometimes as much as 80%. The downside of working with a single file is the maintenance, especially when working within a team. Each developer would be editing the same file, leading to conflicts in the source control; furthermore, locating specific code to change or fix for bugs can be very difficult in a ten-thousand-line file.

Task Runners

Unfortunately, bugs are a part of life when writing software, no matter what language you’re working with. Debugging , as the name suggests, is the process of tracking down bugs and fixing them. The process of debugging can be as simple as adding console.log() calls to your code to verify that certain variables hold expected values. But for more involved bugs, you’ll want to use a debugger. Debuggers are extremely successful at tracking down bugs, as they allow you to step through an application line by line, inspecting (and modifying) variable values.

Debugging

No one would debate that writing tests for software is valuable. There are arguments about which testing methodology might be better or more comprehensive, but there’s one fact that all developers can agree on: any production code should have comprehensive tests. In well-tested software, the amount of test code written often exceeds the amount of functional code. Tests provide a safety net to optimize, refactor, and upgrade the code without fear of introducing unexpected bugs. Good tests can also help developers discover issues before the code is deployed into production. In modern web applications that combine multiple frameworks and libraries, proper testing is the most reliable way to ensure everything continues to run smoothly.

Full Stack JavaScript Development with MEAN

About the course

Authors

Course Outline

Reviews
4.2

Full Stack JavaScript Development with MEAN

About the course

Authors

Course Outline

Reviews 4.2

Reviews
4.2