Using Node.js and Express.js in a Sencha Touch Mobile App: Part 1

In this tutorial series we will be building a Sencha Touch application that is powered by a Node.js backend which will use the Express.js framework and MongoDB to store data.

This tutorial is more about the backend than the mobile app itself, so functionality wise it will be a bit boring. We will be creating a simple CRUD (Create, Read, Update, Delete) application.

Before we get into that though, I just introduced a whole bunch of technologies you may or may not have heard of so let’s do a little background research first…

What is Node.js?

JavaScript is a client side scripting language, it allows us to modify the DOM (document object model) and do lots of fancy things after a web page has been retrieved from the server. If we want to do things on the server side then we use a server side language like PHP or Ruby. Node.js is essentially server side JavaScript.

Node.js allows you to write JavaScript that talks to networks, file systems and other I/O (input / output) sources. So we can have our app talk via JSON / HTTP or Web Sockets to Node and Node will acts as the middle man between our app and services like the file system, a database, the Facebook API, Push Notifications and so on. Max Ogden has written a great introduction to Node.js that is available on GitHub and I would encourage you to check it out.

Getting started with Node.js

Node.js is the most significant of the technologies we will be using so let’s spend a bit of time looking into how Node.js works. Before you get started with Node.js you need to install it on your system. Go to http://nodejs.org/ and hit the INSTALL button, save the installer, run it and follow the prompts.

Once you’ve installed Node you’re ready to start playing around, but before that I’d like to highly stress that you should read this introduction. A bit of background and understanding to what’s happening behind the scenes will make anything a lot easier to learn, and Max does a great job at explaining it. He points out that the four most important concepts to understand are callbacks, events, streams and modules – so I will summarise those briefly here.

Callbacks

Callbacks are asynchronous functions. A callback function will run whenever it is ready to (as in it has received the necessary information) without blocking the rest of the code from executing. For example we could have a function that downloads a file, and that function could have a ‘success’ callback. We don’t want to wait for the file to download before running the rest of the code (that could take a while) so instead we execute the rest of the code and when the file has finished downloading the ‘success’ callback function will trigger, which will perhaps show the user a message: “File successfully downloaded”. If you have a little experience with JavaScript then you will likely already be familiar with callback functions.

Much of Node uses asynchronous code, and Max provides the following code example to show how the console.log() statement will execute before the slow file system operation finishes, even though it is placed after the function:

var fs = require('fs'); // require is a special function provided by node
var myNumber = undefined; // we don't know what the number is yet since it is stored in a file

function addOne() {
  fs.readFile('number.txt', function doneReading(err, fileContents) {
    myNumber = parseInt(fileContents);
    myNumber++;
  });
}

addOne();

console.log(myNumber); // logs out undefined -- this line gets run before readFile is done

Events

Events are another concept you may be familiar with if you have some background in Javascript. An event is literally “when something happens” so we may want to wait for certain events to occur, then perform specific actions. You might have a button for example that listens for the ‘click’ event, and when the click event is detected an alert is fired i.e:

button.on('click', function () {
  alert('I was clicked!');
});

Streams

Streams are the first concept which may seem a little foreign even to those with a background in Javascript. The stream module in Node is a way to deal with streaming input and output e.g the file system and network. To read more about what streaming is and why you should use it take a look at the Stream Handbook.

Modules

Modules in node are like building blocks that provide different functionality. Node comes with a core set of about two dozen modules that include common functionality like events, stream, http and so on. The core modules provide tools for common I/O protocols. On top of the core modules there is also a lot more modules available via npm (node packaged modules). Anybody can write some functionality for node and make it available as a module, and there are currently over 34,000 modules available on npm. To install a module you can simply run the following command:

npm install [module name]

It’s also easy to search for modules. The example given in the ‘Art of Node’ guide shows how easy it is to search for a module that converts PDF into TXT files. You can simply run the following command:

npm search pdf

To search for modules that contain ‘pdf’ somewhere in the name or description. This will return a whole bunch of available modules. Then it’s simple a matter of finding the module you wish to install and running:

npm install [module name]

…Ok so hopefully you’ve read some of that article by now, or at least plan to go back to it later. Now we are going to use Node.js for the very first time by creating the example listed on the nodejs.org website. Create a folder somewhere on your computer to store your first Node project, create a file called index.js and place the following code inside of it:

var http = require('http');

http
  .createServer(function (request, response) {
    response.writeHead(200, { 'Content-Type': 'text/plain' });
    response.write('Hello World\n');
    response.end();
  })
  .listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

What we’re doing above is creating a simple HTTP server. We are using one of the default node modules (http) to do this. We create a server and a callback function that receives a request and response variable.

The request contains details about the request that is being made to our server, and the response can be used to send responses back to the requesting user. In this case we are first writing the the header with a Content-Type of ’text/plain’ and a status code of 200 which means the request was successful (opposed to say 404 which indicates a page could not be found). We use the write method to write a simple “Hello World” message out to the page and then end the response.

We’re making our server listen on port 1337 for demonstrations sake, to show that we can listen on just about any port we want. But typically, HTTP servers will listen over port 80.

Now open your command prompt and change your directory to wherever the index.js file is located. Then run the following command to execute it:

node index.js

Now your server will be running on port 1337. Open your browser and go to ‘localhost:1337’ and you should see the result:

Hello World

This is a very basic introduction to Node.js, so I would definitely recommend looking into a few more tutorials to learn a little more about it. We will be going through step by step how to set up a Node.js server with a Sencha Touch application so you could get by without learning much about Node but you will find yourself struggling when what you need to do deviates from what we do in the tutorial.

What is Express.js?

Express.js is a simple Node.js framework that provides a robust set of features for web and mobile applications. Express specifically makes it quite easy to create REST API’s.

What is MongoDB?

MongoDB is a database, but perhaps not one you’d be used to. MongoDB is a “NoSQL” database and is a document database, opposed to the usual relational database like MySQL.

In MySQL you might run a query like this to find all users who are older than 18 and then sort them by age:

"SELECT * FROM users WHERE age > 18 ORDER BY age;"```

in MongoDB you would perform the same query like this:

db.users.find({age: {$gt: 18} }).sort({age: 1})```

Ok, that’s about enough theory for now! I’ve introduced a lot of possibly new technologies in the post, which we will be using to build this Sencha Touch application. Before going on to the next part where we will get into the more practical stuff, I would recommend looking more into these technologies yourself and trying to understand how they work at a basic level.