Let’s get MEAN! Short Intro to the JavaScript-Based Web Stack + Sample Code

Continuing with MEAN stack development is my goal for the first half of 2016. I spent October-December immersing myself in JavaScript and I feel I can handle a framework (or two). Enrolling in the full stack web development specialization through Hong Kong University and Coursera was a good initial step for me, as I learned more about web app development with AngularJS in course 3 and will dive more into Node.js in course 5. The courses move slowly though, and I’ve been supplementing my education by building a few small projects on my own.

I want to document what I’m learning with you all as much as possible but those posts will be more intermediate and advanced than beginner friendly. Therefore, I will preface them with short introductions first to be referred to later in case I’m sharing a code sample or doing a tutorial that seems unfamiliar. In transitioning to new content that is to come, let’s talk about MEAN stack web development today and how JavaScript developers are using the tools and libraries within it.

img credit: adrianmejia.com

img credit: adrianmejia.com

MEAN: A JavaScript-based web stack

The term “MEAN” applies to the stack technologies used in developing JavaScript-based sites and apps.  MEAN technologies fit a “fluent paradigm”, meaning that because they’re all based on JavaScript, some of the language’s best features can be accessed through them.  MongoDB is used as the database, Express is the framework that works with the server side, AngularJS is the front-end framework used for rapid development, and Node.js is the server environment.  PayPal, Ebay, Walmart, and Linkedin are just a few major companies that built web tools or apps using MEAN stack technologies.

MongoDB: a Schema-less Database Solution

MongoDB is celebrated for being schema-less, meaning it can handle additions and deletions to data more simply because schema definitions are not required for scaling out an app. It is also a document database in which documents are organized as collections that may have a similar purpose, but can contain different types of fields.  Each document is organized in key-value pairs that is similar to what you may see in JSON format

{
   _id: ObjectId('10f89ad5304c'),
   title: 'Lets Get MEAN', 
   description: 'Short Intro to the JavaScript-based Web Stack',
   by: {first:"E", last:"Wilson"},
   url: 'http://www.ourcodeblog.com',
   tags: ['mean', 'angular', 'mongodb', 'nodejs', 'express'],
   likes: 100, 
   comments: [	
      {
         user:'coder1',
         comment: 'a general comment',
         datePosted: new Date('January 4, 2015'),
         like: 0 
      },
      {
         user:'coder2',
         comment: 'the second comment',
         datePosted: new Date('January 4, 2015'),
         like: 5
      }
   ]
}

Due to its easy scability, MongoDB works well for big data projects as well as smaller scale apps.  How suitable it may be for a project over MySQL or other relational databases is highly debated among more seasoned programmers and DBAs, so it’s best to do more research if you are deciding if it’s right for you.

Client-side Frameworking with AngularJS

AngularJS works well with the MVC model for software.  Controllers are written entirely in JavaScript, and the Views (or the user interface of an app) use Angular expressions and directives to communicate with scripts. Angular offers two-way data binding where directives are used to update the View(s) whenever Model(s) change.  I provided a screenshot example* below of a small script I wrote for greeting the user and calculating the sum and product of two numbers entered. Notice in the example how the directives, prefixed with “ng-“ are used within an HTML doc to communicate with the script in which the main controller (MainController) is defined and assigned to the <body>, and num1 and num2 are set with an initial value of 0:

had to use screenshot, preformatted text in WP misbehaving

* had to use screenshot, preformatted text in WP misbehaving

The ng-models are assigned from user input and instantly displayed in place of the {{expressions}} they correspond to.  In addition to these directives, there are other Angular components such as services and dependency injections to use for more complex apps.  I plan on diving further into Angular in a later post, but for now, you can check out different sites and apps that were built using AngularJS here.

Server-side Development with Express and Node.js

Some readers interested in Ruby development may know a little about Express, particularly its similarity to Sinatra, the Ruby framework it was inspired by.  Express is a Node.js framework used for routing, handling HTTP requests, writing middleware, and REST API customization. It organizes the architecture of your app or project, connects with MongoDB to add a back-end database, and works with templating languages (like jade or Dust.js). When used with Node.js, Express is pretty powerful.  In comparison, Node.js is to the MEAN stack what Apache is to the LAMP stack, and the number of node modules and packages that can be used to power your app continues to grow.

All together, these 4 technologies work in sync for creating more dynamic, interactive apps.  The best way to learn more about MEAN is to dive right into building with it, so I included some tutorials I gathered to help you get started.  Just a quick tip, go ahead and install Node.js, and npm (node package manager) in advance to save some time.  You can use npm to install other modules, plugins, and tools (such as Angular and MongoDB) by running a simple npm install –save command in your terminal.

*** Tutorials ***

Build a Hacker/Reddit News clone

Google Map app tutorial: route bike lanes in your neighborhood

Create a Gmail clone with AngularJS

Advertisements

3 thoughts on “Let’s get MEAN! Short Intro to the JavaScript-Based Web Stack + Sample Code

  1. Pingback: #100DaysOfCode Day 27: Installing Ionic and Starting an App | Our Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s