Getting Started with JavaScript-based Full Stack Development

In this post, I have tried to introduce several JavaScript-based development tools with which you can start writing web and mobile apps.

Node.js

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

You can go ahead and install it in your system that will open up a whole new JavaScript-based ecosystem including a nice package management system where you can install/update/uninstall packages including their dependencies from a command-line environment. Because of that, Node.js is also considered this planet’s the ultimate command line tool development platform. Give it a whirl: http://nodejs.org/

Here’s a sample hello world server – think of it as a website that serves itself in response to HTTP requests:

var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

Now in order to run your new Node.js application, here’s the command that you may want to issue, assuming you have saved the file as app.js:

node app.js

This Node.js code opens a server at 1337 port and serves this page when requested at: http://127.0.0.1:1337.

Node.js Package Systems

Node.js allows us to use Node Package Manager (npm) from command line to manage necessary dependencies. Tons of packages can be found from here: https://www.npmjs.com/.

Before we go ahead and install a package we need to create a package.json file which will contain information about our project and will be used to maintain dependencies and their versions. We do not need to create it manually, rather we need to answer a series of questions asked by the following command, which you can just pass entering Enter every time so that it can prepare a set of default settings which is fine for now:

npm init

This will create a package.json file that we had been intending to create. Go ahead and open it – you will find something like as follows:

{
  "name": "nodetest",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now let us begin with installing the first package. For example: string package offers rich string manipulation features. Let us go ahead and install that:

npm install –g string 
npm install string --save

The first instruction will add the package to the global level, meaning that whenever next time a project would require that the next instruction as above can be issued to retrieve it from the (system-wide) globally available package store stored in your computer. By adding a –save parameter, we are telling that the dependency should be recorded into the package.json as well. Here’s the updated json:

{
  "name": "nodetest",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "string": "^3.0.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now let’s use the newly added package in the app.js code:

var S = require('string');
var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('World exists in the string Hello World: ' + S('Hello World').contains('World'));
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

When hit from the browser, this code will produce the following output:

World exists in the string Hello World: true

Yeoman

Yeoman is a scaffolding tool – what this essentially means is that it can quickly create a boilerplate sample of many JavaScript based libraries/frameworks out there. At the time of typing Yeoman has generators for 1100+ projects. For full reference: http://yeoman.io.

I am not a big user of it, however it’s easier to get started on such projects that use full-stack JavaScript technologies. Install Yeoman using the following command:

npm install -g yo

Creating an ASP.NET Web API application using Yeoman

Let us now use the  Yeoman to scaffold an ASP.NET Web API application meaning that it will ask you a series of few questions about your new ASP.NET Web API project and then it will go ahead and create all the directories and files and organize them in order for you to use right away opening up Visual Studio.

npm install -g generator-webapi
yo webapi

Creating a Firefox OS app using Yeoman

Here are the set of commands that you can execute:

npm install -g generator-firefox-os  
yo firefox-os

Bower

As you can imagine such JavaScript-based ecosystem comes at a price of plugin management nightmare, however Bower is a yet another tool that aims to solve some of its management problems.

You will be able to find a searchable list of packages here, or you can search from command line as well:

bower search polymer
Search results:

    polymer git://github.com/Polymer/polymer.git
    webcomponentsjs git://github.com/Polymer/webcomponentsjs.git
    polymer-elements git://github.com/Polymer/polymer-elements.git
    ... a big list of polymer related packages ...

Let us create a polymer application which is based on Android’s new Lollypop UI. Much like npm, we need to create a bower.json file using similar command. It will ask a few questions, feel free to answer or leave them.

bower init
bower install -g --save Polymer/polymer

It will create a folder called bower_components where all the plugins will reside and you may refer from your web project. Should you require to update any of the components you may issue the following command:

bower update

Using a package

Let us create a simple HTML page where we will use rickshaw a nice graphing utility. Installing rickshaw:

bower install –g --save rickshaw

Here’s the HTML that renders just nice:

<html>
    <head>
        <link rel="stylesheet" href="bower_components/rickshaw/rickshaw.min.css"/>
        <script src="bower_components/rickshaw/vendor/d3.v3.js"></script>
        <script src="bower_components/rickshaw/rickshaw.min.js"></script>
    </head>
    <body>

        <div id="chart"></div>

        <script>

            var graph = new Rickshaw.Graph( {
                element: document.querySelector("#chart"),
                width: 500,
                height: 200,
                series: [{
                    color: 'red',
                    data: [
                        { x: 0, y: 40 },
                        { x: 1, y: 49 },
                        { x: 2, y: 38 },
                        { x: 3, y: 30 },
                        { x: 4, y: 32 } ]
                }]
            });

            graph.render();

        </script>
    </body>
</html>

By the way, most of these js libraries have really nice mascots/logos. After you have mastered this pattern of development, you can easily dive into many stacks available out there. For example, MEAN = MongoDB + Express + AngularJs + Node.js, CEAN = CouchDB + Express + AngularJs + Node.js and what not. Here’s a guide on how CouchDB + Express + Node.js can play together: CRUD with CouchDB in Node.js, another one tweaking default Express application.