MongoDB ExpressJS AngularJS NodeJS (MEAN.js) : From Zero to Hero part1: Intro

I was always focused on the Front-end, but working with a full stack like Mean seemed tempting. I attempted Meteor one and a year ago, but back then it wasn’t ready for primetime, so I had to let go. (they just released 1.0 though, so be sure to check it out)

In these posts, I’ll document my journey through making my own web-app, which interacts heavily with a Maps system, and hope to shed some light to common problems and solutions people are facing.

What you need to know

MeanJS is a git repo that packs a web-app skeleton based on MongoDB (the database), ExpressJS (an abstraction framework on top of NodeJS), AngularJS (a front-end framework), and NodeJS (the actual server behind all this). All of these technologies are based on JavaScript, so understanding essential concepts of JavaScript is necessary. Also, you need to know how Git works. You only need basic usage. If you have no clue, you can follow this cool free video course from codeschool. It has live tests and everything.

Mean.io vs Mean.js

The creator of Mean left the original project, because of different opinions with his previous workplace. Mean.io is the original project, while Mean.JS is the forked – new version of the stack. The advantage of using Mean.JS is primarily, documentation. In the end, it doesn’t really matter from which full-stack framework you’re going to start if you’re just a beginner. Many concepts are similar.

Your three basic tools

npm

You’ve probably used npm before, but in case you haven’t,

npm (Node Package Manager) is the default package manager for Node.js. As of Node.js version 0.6.3, npm is bundled and installed automatically with the environment. npm runs through the command line and manages dependencies for an application.

Think of it as a library for node. In simple English, npm downloads, installs, and manages stuff that have to do with your web application.

Npm generates the package.json file, which holds a list of packages your project uses, as well as other metadata. If you want to read more about it, check this detailed intro.

bower

Bower is a bit like npm, but mainly for Front-end libraries and frameworks. You remember the “good” old times that every time you needed a jQuery plugin, or any kind of helper library, you needed to find it, download it, save it etc etc? Bower handles this much better by providing a searchable library of literally any library you’ll ever need, and on top of that, it fetches not only the minified and the original version of the script, but also the map files or anything else you need to your debugging or building purposes. You want the latest jQuery? No problem:

$ bower install jquery bower jquery#* cached git://github.com/components/jquery.git#2.0.3 bower jquery#* validate 2.0.3 against git://github.com/components/jquery.git#*

Done.

Grunt

The last but probably most important, is Grunt.

Grunt is a task-based command line build tool for JavaScript projects. Here’s the idea: when working on a JavaScript project, there are a bunch of things you’ll want to do regularly.

In plain English, Grunt takes a file which describes a series of steps, or tasks, and parses it (reads it) executing those tasks. Of course it can get much more complicated than that, but my general advice is to make a simple 3 file project if you want to experiment with Grunt, otherwise you’ll just end up giving up.

What might these tasks be you say?

  • take 5 javascript files, put them together and make one, which is also minified.
  • start a node.js server
  • “watch” your files – whenever you change your or SASS, it can regenerated everything, as well as reload your site on the fly
  • run a “testing” task that will launch some or all of your tests depending on the options you choose

Go there for more.

Homework

Don’t rush. These three tools can already seem quite intimidating. In order to get familiar with them do the following:

  • make a new directory
  • install npm
  • create a sample html file, and to that link two CSS and two JavaScript files (it can be the jQuery base and a jQuery plugin)
  • in order to get the plugin and the libraries using bower
  • install Grunt (through Npm) and write a simple Gruntfile that will generate one CSS and one JavaScript file

Next time

Cloning the MeanJS stack and getting familiar with the file structure.

On the Internet Explorer blame : Answer to @slicknet’s post

Just a short recap of the debate:

Here’s my reaction that I also published as a comment to Nicholas blog:

I will have to strongly disagree with the fellow compatriot although I respect his experience and background. I have a lot less experience that he does, but I think I do have the right to disagree (stating the obvious, but whatever).

Drupal tip: Style admin nodes

I was recently searching for a snippet that would add a class to nodes created by the administrator. Rather simple and straightforward, but didn’t find anything. If you’re just starting out in theming, it could help you understand how things work a bit. Here is the code you add in your theme’s template.php file:

function [your_theme_name]_preprocess_node(&$vars) {
if ($vars['uid'] == 1) {
$vars['classes_array'][] = ‘adminpost’;
}
}

Reviewing Adaptive Web Design

Adaptive Web Design

I recently bought and read the electronic version of Adaptive Web Design, written by Aaron Gustafson which was overall a nice -and short- read. Aaron is obviously a good writer, but this is no surprise if one looks at his CV. He also seems like a nice guy -twitter wise-, maybe a bit easier to approach than other folks from the “Zeldman Web Influencers group”. I rarely buy books, but I had a good feeling for this one.