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
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
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 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#*
The last but probably most important, is Grunt.
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?
- start a node.js server
- “watch” your files – whenever you change your CSS 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.
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
- in order to get the plugin and the libraries using bower
Cloning the MeanJS stack and getting familiar with the file structure.