Sencha Touch and node.js: Part 1 – Touch, Jasmine and Grunt together

This post is first from the series of posts about building mobile application using Sencha Touch and node.js on the backend. We will cover how to prepare right environment, write tests, modules, split logic from controllers and views and in the end build and publish our application.

1. Requirements

Before we start you need to have few things installed or downloaded on your local machine:

As you see it’s only few lines of html. Firstly, we load jasmine and Sencha Touch libraries. After that we add specHelper file, in which we will put code to prevent some unexpected behaviors between tests. And in the end we append scripts with test specification and with application bootstrap.
Two files left. As first open specHelper.js and past

This will clear cache of initialized model after each test.
To check that everything is working, we need to fill our test specification. In \app-test\specs\testSpec.js put following code:

describe("Basic Assumptions", function() {
it("has ExtJS4 loaded", function() {
expect(Ext).toBeDefined();// we check if Ext JS is loaded
expect(Ext.getVersion().major).toEqual(2); // and if version is equal to currently avaiable
});
it("has loaded TutsApp code",function(){
// In the end we check if our application was loaded too
expect(TutsApp).toBeDefined();
});
});

OK, now we are ready to play. Open http://localhost:8080/run-test.html (rerun server if you stop it in the meantime) and check the result of our tests. Do you see green boxes? Good job soldier! No? Check everything and try again.

4. Setup Grunt

Grunt is a cool tool which helps us automate many of development processes. It allow us to check syntax, run test and build app in one cycle. Theoretically we have possibility to do the same with Sencha CMD and Phantom but we need to install and configure everything step by step, manually. With Grunt we only need to download few package via npm and of course do some configuration too. But for sure it will be less time consuming and a lot easier than setting Phantom. Ok, in your project root directory start with this command:

npm init

You will be asked about few things, for now you can skip answering by pressing enter after each question.
Now install watch and Grunt with plugin for Jasmine:

npm install watch -g

Watch is a smart tool for watching files and rerun Grunt task when any change occurred.

flag –save-dev automatically add this dependency to your package.json file (which was generated after init).
Last thing, put in the \node_modules extracted files from grunt-sencha-plugin.zip. This plugin will help us to run both, Sencha Touch and Jasmine, with Grunt. Mentioned package is also available from npm, but to run it with Touch I was forced to made few modification.
So, now it’s time to add some configuration. In root project directory create file called Gruntfile.js and fill it with this code:

Run test command again. All test should be passed without errors.
This is what you should see in the console:

6. Conclusion

In this post we learned how to set up and configure Sencha Touch and rest of needed tools for developing on frontend. With Grunt, we automatize hinting and testing process to make them easier, faster and more comfortable. This should help us keep quality of the source code on right level from the beginning of the project.

In next post from series, I will show you how to deal with Sencha Touch profiles and different views based on orientation, how to build controller and model and how to test them. So if you are interested, please subscribe our blog on G+.