Rolf Dohrmann – Mobile Web Developer

The problem

Maybe you know the scenario. You start to create a project, it’s not a big thing, you write the code and everything’s fine. But by the time the project grows. Soon there are not only a few lines of JavaScript or jQuery code but hundreds or even some thousands lines.

Maintaing / improving such an App may become quite difficult. Problems can arise in the fields of version control, of testing and structuring the code itself.

What can be done?

Version Control System

There are a couple of tools that can help to manage big projects. One of the tools is a Revision Control System aka Version Control System (VCS). Maybe you already heard of GitHub?

“GitHub is a web-based hosting service for software development projects that use the Git revision control system.” Source: wikipedia

Let’s say you have a working version of your code. Now you want to add a new function. What would you do without a VCS? Maybe you simply would start to modify the files. Bad idea. Your old code will not work anymore and your new code not yet. It might become important to get back to the old and working version, but there’s no way to get there.

A little better approach would be to copy the directory structure of the whole project and save it somewhere else. Then it’s rather safe. Or perhaps, if you have to modify the file x.html you would create a copy of this file and save it as x-original.html. Whatever you might do, it sometimes will be nearly impossible to restore a version that lays back a few steps from your current version.

With a system like Git you can create a new ‘branch’ when you have to modify the code. A new branch works like a copy of the original code files. Let’s say your working version would be “version 1.1.0″. This version is stored in a branch called “1.1.0″. You could create a new branch and name it “version 1.1.1″. You can work within this new branch, modify files,  store (commit) the modified files within this branch. At any time you can change between the branches. So it’s possible to restore your Version 1.1.0, check a few things and then go back to Version 1.1.1 again. Changing to another branch restores the complete directory structore and files to the code version of this branch. And this all happens within the same project directory. That means that it is not necessary to go to different places when working in differnt branches.

In addition to this it is possible to save “temporary” versions. Each commit creates a kind of temporary version and it s possible to redo commits, so that you can restore each commit within a branch at any time.

There would be much more to say to this topic. You can find a detailed instruction how to use Git in this book.

Testing

Using a Version Control System is probably a good start, but it doesn’t solve all the problems that arise when the project gets ‘big’. A huge problem is testing. If there are only a couple of functions then manually testing is no problem at all. If there are some hundred functions then manually testing becomes nearly impossible. Is it necessary to test all the functions each time you modify the source code? Well, the modifications could cause side effects that you don’t see when you test only the new function. If you want to be sure that everything works fine you would have to test all functions.

There are tools that can help you to create automated tests. The context of this is called ‘Behaviour Driven Development’, ‘Unit Tests’ or ‘Automated Unit Testing’. One of this tools is Jasmine. It can run automated Tests for JavaScript. When creating new functions/methods you would at the same time create a test for this function and integrate it in the collection of tests for the whole project. Doing this you can run all the tests with one click and get an instant overview about problems that come up.

angularJS, the “superheroic JavaScript MVC Framework”, supports ‘unit tests’ and ‘end-to-end’ tests. The unit tests would test the functions, but they can’t interact with the user interface. If you want to check the user interface behaviour you would create an end-to-end test. Unit tests would be written in the Jasmine syntax and end-to-end-tests would be written in a Jasmin-similar syntax.

Code structure

When the project grows it becomes more important to structure the code in a good way. If you don’t do it you will get hard times. Adding code, modifing code, degugging code – all this will become a real pain. That’s why many projects and frameworks use the so called Model-View-Controller approach (MVC). MVC is a architectural or design pattern. It isolates code parts that deal with the model (data), the view (user interface, templates) and the controller (application logic). Working with the MVC-pattern helps to keep your code maintainable.

angularJS does not only help to create automated tests but also offers a context where MVC-design is possible. To be more concrete: where MVC-design is required. The way the framework works is based on MVC.

In one of the next postings I will go more in the details of creating automated tests, MVC and angularJS.

Regards
Rolf