Primers - MEAN Machine - A beginner's practical guide to the JavaScript stack (2015)

MEAN Machine - A beginner's practical guide to the JavaScript stack (2015)

Primers

Let’s take a quick look at the technologies we’ll be using. Remember, this book is meant to teach you how all these pieces work together, so we won’t be diving into the most advanced techniques and concepts of each (though we will be going pretty far). We will provide links to more resources to further your knowledge for each topic in each section.

MongoDB

MongoDB, named from the word “humongous”, is an open-source NoSQL database that stores documents in JSON-style format. It is the leading NoSQL database based on the number of Google searches, job postings and job site (Indeed.com) trends.

Mongo vs. MYSQL

LAMP, which uses MYSQL, has been the leading stack for several years now. MYSQL is classified as a relational database.


Relational database Data is stored in tables that hold not only the data, but also its relationship to other information in the database. —

Document Databases

MongoDB, on the other hand, is classified as a non-relational database, or more specifically a document-oriented database. This means that you define your data structure however you want. You get the data-modeling options to match your application and its performance requirements. You can easily take complex objects and insert them into your database using JSON, XML, BSON, or many other similar formats that are better suited to your application. You can even store PDF documents in certain document databases if the use case ever arises.


Document-oriented Database A type of NoSQL database which stores and retrieves data in a semi- structured document (as opposed to tables in relational databases). —

Data modeling in MongoDB is extremely flexible. One way to store data is by creating separate documents and creating references to connect information. You can see below our Elf Info Document contains basic information which we can reference with the Elf Address Document.

Elf Info json { id: "1234", name: "holly", age: "400", type: "high-elf" }

Elf Address Book json { elven_id: "1234", city: "rivendell", state: "middle-earth" }

Another method is to embed the Elf Address straight into the Elf Info document so that now you only have one document for each Elf, which allows for less write operations to update information about an Elf as well as faster performance (assuming your document doesn’t grow too large).

1 {

2 id: "1234",

3 name: "holly",

4 age: "400",

5 type: "high-elf",

6 address: {

7 city: "rivendell",

8 state: "middle-earth"

9 }

10 }

Once you begin storing information about multiple elves, each of their documents can be classified together as one Elf Info Collection. A collection is just a group of related documents. In this case they will all have the same fields with different values.

CAP Theorem There is a concept known as CAP or Brewer’s theorem which states that distributed network systems can only provide two of the three following functionalities at the same time:

· Consistency: All nodes in your application are available to each other and showing the same data at the same time

· Availability: All nodes are available to read and write

· Partition Tolerance: Even if part of the system fails, your application will continue to operate

There has been some confusion about how to interpret this, so Brewer later pointed out that it really comes down to consistency vs. availability. Just looking at the definitions alone, it becomes apparent that these are mutually exclusive concepts. Let’s say you allow all nodes to be availablefor reading and writing at all times. A real world example of where this would be important is in a banking application. For the sake of example, let’s pretend overdraft fees and all that fun stuff doesn’t exist. The bank needs to know your exact account balance at all times. If you have $100 in your account and you withdraw $100, you’re of course left with $0. Because all nodes are available to read and write, there’s a chance that another debit could go through in the tiny fraction of time that your account balance still reads $100. So then once the account balance updates you will actually be in the negative because the second debit was allowed through even though it should have been denied. This is why consistency is more important in the case of this banking application.

The cost of consistency is giving up some availability. As soon as you withdrew money in the previous example, there should have been some locks put into place preventing the account balance to be read as $100. If your application is unable to read every node at every second, then it may appear down or unavailable to some users. Some applications favor availability and performance over consistency, which is where a lot of document-oriented databases shine.

MongoDB, by default, favors consistency over availability, but still allows you to tweak some settings to give you more support in either direction. Read-write locks are scoped to each database, so each node within a database will always see the most up-to-date data. Because MongoDB supports sharding, once your database begins to grow, your data may partition into multiple databases (or shards) across several servers. Each shard will be an independent database, together forming one collection of databases. This allows for faster queries because you only need to access the shard that contains that information rather than the entire database. It can also, however, cause inconsistency from shard to shard for a short period of time after a write. This is called eventual consistency and is a common compromise between consistency and availability.

Main Features

· Agile and Scalable

· Document-Oriented Storage - JSON-style documents with dynamic schemas offer simplicity and power.

· Full Index Support - Index on any attribute, just like you’re used to.

· Replication & High Availability - Mirror across LANs and WANs for scale and peace of mind.

· Auto-Sharding - Scale horizontally without compromising functionality.

· Querying - Rich, document-based queries.

· Fast In-Place Updates - Atomic modifiers for contention-free performance.

· Map/Reduce - Flexible aggregation and data processing.

· GridFS - Store files of any size without complicating your stack.

Node.js

Node is built on Google Chrome’s V8 JavaScript runtime and sits as the server-side platform in your MEAN application. So what does that mean? In a LAMP stack you have your web server (Apache, Nginx, etc.) running with the server-side scripting language (PHP, Perl, Python) to create a dynamic website. The server-side code is used to create the application environment by extracting data from the database (MYSQL) and is then interpreted by the web server to produce the web page.

When a new connection is requested, Apache creates a new thread or process to handle that request, which makes it multithreaded. Often you will have a number of idle child processes standing by waiting to be assigned to a new request. If you configure your server to only have 50 idle processes and 100 requests come in, some users may experience a connection timeout until some of those processes are freed up. Of course there are several ways to handle this scalability more efficiently, but in general Apache will use one thread per request, so to support more and more users you will eventually need more and more servers.


Multithreading A programming model where the flow of the program has multiple threads of control. Different parts of the program (threads) will be able to execute simultaneously and independently, rather than waiting for each event to finish. This is nice for the user who now doesn’t have to wait for every event to finish before they get to see some action, but new threads require more memory, so this performance comes with a memory trade-off.

This is where Node.js shines. Node is an event driven language that plays the same role as Apache. It will interpret the client-side code to produce the web page. They are similar in that each new connection fires a new event, but the main distinction comes from the fact that Node is asynchronous and single threaded. Instead of using multiple threads that sit around waiting for a function or event to finish executing, Node uses only one thread to handle all requests. Although this may seem inefficient at first glance, it actually works out well given the asynchronousnature of Node.


Event Driven Programming The flow of a program is driven by specific events (mouse clicks, incoming messages, key presses, etc). Most GUIs are event based and this programming technique can be implemented in any language. —


Asynchronous Programming Asynchronous events are executed independently of the main program’s “flow”. Rather than doing nothing while waiting for an event to occur, the program will pass an event to the event handler queue and continue with the main program flow. Once the event is ready, the program will return to it with a callback, execute the code, and then return to the main flow of the program. Because of this, an asynchronous program will most likely not run in the normal top to bottom order that you see with synchronous code. —

Say, for example, a database query request comes in. Depending on how large the query is, it could take a couple of seconds to return anything. Since there is only one thread, it may seem that nothing else would be able to process while the query is executing. This would of course result in slow load times for your users which could be detrimental to the success of your site. Fortunately Node handles multiple requests much more gracefully than that by using callbacks.


Asynchronous Callbacks A function that is passed as an argument to be executed at a later time (when it is ready). Callbacks are used when a function may need more time to execute in order to return the correct return values. —

There are two types of callbacks: synchronous and asynchronous. Synchronous callbacks are considered “blocking” callbacks, meaning that your program will not continue running until the callback function is finished executing. Because I/O operations take a great deal of time to execute, this may make your application appear to be slow or even frozen to users. Node’s use of asynchronous callbacks (also known as non-blocking callbacks) allow your program to continue executing while I/O operations are taking place. Once the operations are complete, they will issue an interrupt/callback to tell your program that its ready to execute. Once the function is complete, your program will return back to what it was doing. Of course having several callbacks throughout your code can get very chaotic very fast, so it’s up to you, the programmer, to make sure that you do it correctly.

NPM and Packages

One of the benefits of Node is its package manager, npm. Like Ruby has RubyGems and PHP has Composer, Node has npm. npm comes bundled with Node and will let us pull in a number of packages to fulfill our needs.

Packages can extend functionality in Node and this package system is one thing that makes Node so powerful. The ability to have a set of code that you can reuse across all your projects is incredible and makes development that much easier.

Multiple packages can be brought together and intertwined to create a number of complex applications.

Listed below are a few of the many popular packages that are used in Node:

· ExpressJS is currently the most starred package on npm’s site (we’ll use this in the book of course)

· Mongoose is the package we will use to interact with MongoDB.

· GruntJS for automating tasks (we’ll use this later in the book)

· PassportJS for authentication with many social services.

· Socket.io for building real time websocket applications (we’ll use this later in the book)

· Elasticsearch for providing high scalability search operations.

Frameworks

There are several Node frameworks in existence. We’re using Express in this book, but the concepts taught here will easily transfer over to other popular frameworks.

The other main frameworks of interest are:

· HapiJS - Great framework being used by more and more enterprise companies.

· KoaJS - A fork of Express

· Restify - Borrows from Express syntax to create a framework devoted to building REST APIs

· Sails - Framework built to emulate the MVC model

Express will handle nearly all of the tasks that you need and it is extremely robust, usable, and now has commercial backing as it was recently bought/sponsored by StrongLoop.

While those other frameworks are great in their own rights (definitely take a look at them), we will be focusing on Express. It is the MEAN stack after all.

ExpressJS

Express is a lightweight platform for building web apps using NodeJS. It helps organize web apps on the server side. The ExpressJS website describes Express as “a minimal and flexible node.js web application framework”.

Express hides a lot of the inner workings of Node, which allows you to dive into your application code and get things up and running a lot faster. It’s fairly easy to learn and still gives you a bit of flexibility with its structure. There is a reason it is currently the most popular framework for Node. Some of the big names using Express are:

· MySpace

· LinkedIn

· Klout

· Segment.io

For a full list of Express users, visit the Express list.

Express comes with several great features that will add ease to your Node development.

· Router

· Handling Requests

· Application Settings

· Middleware

Don’t worry if these terms are new to you. As we build our sample applications, we’ll dive into each of these components, learn about them, and use them. Onto the last part of the MEAN stack (probably my favorite part of the stack)!

AngularJS

Angular, created by Google, is a JavaScript framework built for fast and dynamic front-end deployment.

Angular allows you to build your normal HTML application and then extend your markup to create dynamic components. If you’ve ever made a dynamic web page without Angular, you’ve probably noticed some of the common complications, such as data binding, form validation, DOM event handling, and much more. Angular introduces an all-in-one solution to these problems.

For those of you worried about learning so much at once, you’re in luck. The learning curve for Angular is actually quite small, which may explain why its adoption has skyrocketed. The syntax is simple and its main principles like data-binding and dependency injection are easy to grasp with just a few examples, which of course will be covered in this book.

Two of the major features of Angular are data binding and dependency injection. Data binding deals with how we handle data in our applications while dependency injection deals more with how we architect them.

Data Binding

If you come from the land of jQuery, you will be familiar with using your CSS selectors to traverse the DOM. Every time you need to grab a value from an input box, you use $('input').val();. This is great and all, but when you have large applications with multiple input boxes, this becomes a little harder to manage.

When you’re pulling and injecting data into different places in your application, there is no longer one true source of data. With Angular, you have something similar to the MVC (model-view-controller) model where your data is in one spot. When you need information, you can be sure that you are looking at the correct information. This is because if you change data in your view (HTML files) or in your controller (JavaScript files), the data changes everywhere.

Dependency Injection

An Angular application is a collection of several different modules that all come together to build your application. For example, your application may have a model to interact with a specific item in an API, a controller to hand data to our views, or a module to handle routing our Angular application.


Dependency Injection A dependency in your code occurs when one object depends on another. There are different degrees of dependency, but having too much of it can sometimes make it difficult to test your code or even make some processes run longer. Dependency injection is a method by which we can give an object the dependencies that it requires to run. —

Having compartmentalized and modular applications gives us many benefits. Like packages in Node and PHP or gems in Ruby, we can reuse modules across different projects and even pull in modules that other developers have already created.

By injecting these modules into our application, we can also test each module separately. We are able to determine what parts of our application are failing and narrow down the problem to a certain codeset.

Other Main Features

· MVC

· Directives

· Scopes

· Templates

· Testing

Check out this Tuts+ article for a more in depth overview of Angular: 5 Awesome AngularJS Features.