Automate, automate and automate!

Recently I’ve spent several days on find the best way to set up an automation process for Javascript developers and I investigated several tools strictly related to the Javascript world.
These tools allow you to save a lot of time when you perform repetitive and sometimes boring tasks in order to test your HTML5 game, website or web app.
In this post I’d like to share with you what tools I’ve found and used to create a full-stack Javascript automation pipeline for any front end developer or team.

Let’s see what a Javascript developer or a team could automate in their machine to have a better code quality and to save a lot of time when they are working on their own library or projects.
For this purpose, in my pipeline, I’ve used different CLI tools like mocha, grunt, yeoman, blanket or plato.
Each of this tool allows you to perform a specific task but combined all together these tools will provide in your projects:

  • tdd, bdd and unit test
  • code coverage
  • dependencies management
  • (custom) project template
  • static analysis
  • tasks automation (live reloading, deploy in localhost folder, files concatenation…)

These are only few of the multiple options that you can have “playing” with these tools, but let’s try to go a little bit more in deep to see what tool can effectively help to accomplish each of the item present in the list above.

TDD, BDD and UNIT TEST

Surfing on the web about this topic on Javascript you’ll find really a lot of good libraries, the one I decided to use is Mocha because is very well integrated with Blanket (code coverage) and karma (tests runner) and because it’s based on node.js so you can create your libraries and then testing in pure javascript without any need to pass through HTML pages and if you need to test javascript code that will run only inside the browser you could fake the window object with libraries like jsdom integrated in your test cases.
Mocha allows you to work in BDD, TDD and in Unit Testing you can easily mix with several assertion libraries and writing also async tests became really really easy.
Other libraries that could be useful could be Jasmine or QUnit.

CODE COVERAGE

As I wrote before I found an interesting library that work perfectly with Mocha that is Blanket.js.
Blanket is very simple and easy to use library in particular when you have all your test written in modules (node.js style) instead of a mix between html and js files.
Blanket works not only with Mocha but also with Jasmine and QUnit, so basically with the most famous testing libraries!
One thing that I really appreciate of blanket is the final output that could be exported in an interactive HTML where immediately you can recognise what it’s not tested yet and jump from a file to another one following the menu on the right side of the template.
Another one that it seems quite interesting is Istanbul.js, I didn’t try yet but it’ll be the next one for sure, I heard really good experiences from other developers with this library!

STATIC ANALYSIS

When you want to use a static analysis tool in your pipeline on of the most popular is….
But I suggest to give a try to Plato in particular if you work alone or in a small team and you want to do a sanity check of your project.

8ek3snRZ22Eq898NOi-l9Dl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9
Plato, in fact, store all the information of your code project locally in some JSON files and you can navigate through the report directly from an HTML page created by the tool (above a screenshoot sample).
These stats are very interesting to check the are of improvement of your project and in particular with these tools you can have an immediate feedback on where your efforts should be focused in order to deliver a better product and be sure that the maintenance shouldn’t cost too much later on.
Obviously you can also use more sophisticated solutions like SonarQube and install it inside your server with the Javascript plugin and run your static analysis every time a developer push his code in git or mercurial.
Depends always the dimension of the project and the team, my suggestion is to start with Plato in a small project and then when you see the real value move to SonarQube also if you are a small organisation.r

PROJECT TEMPLATE

When you talk about template for Javascript it’s impossible to forget of Yeoman.
Yeoman is a scaffolding tool that allow you to create skeleton of project with your favorite JS library ready to use.
I really suggest to use these kind of tools because it facilitates the beginning of new projects and give you at the same time some standards inside your company and between your projects.
There are several generators ready to use and searchable from the official website, if you can’t find what you’re looking for it’s very easy use Node.JS and the APIs already built in Yeoman to create your own generator with the functionalities that your company or projects need.

TASKS AUTOMATION and DEPENDENCIES MANAGEMENT

This is my favourite part, I found in Grunt a really good tool to automate more or less everything that is not strictly related to write the project code inside my IDE!
Grunt is the glue to assembly in a pipeline all the tools explained above, easily in one line inside your CLI: “grunt”.
The community is really huge and you can find more or less everything for Node.JS or plain Javascript, from minify, uglify and concatenate your JS files, to compile your LESS or SASS files, to convert your ES6 code to ES5, to run static analysis or push your code directly on git simply with a grunt task.
One thing that I really like of Grunt is that you can easily scale the way you are working with it using a yaml file and different js files (one per task) and assembly them at runtime.
This allows to create some common tasks for the whole company and at the same time have the freedom to add custom automation for each project and/or department of your company.
I really suggest to take a look to the official website where you can find also many technical information and then start to automate your daily Javascript workflow.
Obviously if you’re not working with JS you can still use Grunt in combination with your favourite programming language or technology like Haxe, Dart, Typescript, Coffeescript or Adobe AIR; the flexibility of this tool is really impressive!

An Alternative to Grunt could be Gulp where the main difference is that grunt favours configuration over code and Gulp exactly the opposite.
The Gulp community is growing day by day and it’s interesting to see the different approach between these two great task runners, probably in the long term the Gulp approach will be more successful but for now Grunt is exactly what I was looking for.

Conclusion

As you’ve read the JS world has got really a lot of useful tool that will save a lot of time during your daily job as developer or company.
The mix of these tools allow to create a pipeline in pure Javascript and they could really improve your code quality and your flow to have standards inside yout projects and a solid flow that will able to scale your company or projects in an easy and professional way.
Obviously there aren’t only these few tools and libraries that I’ve tried, there are many others outside there that I’d like to mention like PhantomJS or Buster or Lineman and so on, but form the next five minutes before come back on what you were doing before reading this post, try to think how to improve your flow, trust me you will remain surprise on how more productive you’ll become introducing them inside your routine.

HaXe, my new toy!

After Adobe MAX 2011 everything should not be the same for me and maybe for a lot of flash platform developers around the world, Adobe brings some “directions”  that didn’t find my consent mainly for the way that communicate these news and the impact that had in the market, but we know that Flash Platform is not dead and it will go ahead for many years.
Obviously nothing was the same after that, in fact many developers started to look around for new technologies and frameworks like Backbone.js, Sencha Touch, Ext JS and so on.
Personally I started to checked in last few months many Javascript frameworks because my aim was find something that could replace Flash Platform in the future and I have to spend time in next years to consolidate it and go ahead with Flash Platform too.
Last week a big friend of mine gave me this link: http://www.haxenme.org/ and when I started to read what you can do and how you can do it, I immediately started to go in deep with HaXe in my spare time and trust me that I had a lot of fun!

First of all what is HaXe?
HaXe is an open source multiplatform programming language, it allows to write once and deploy everywhere (in the right meaning of therm “everywhere”).
In fact with HaXe we can write in a programming language similar to Actionscript 3 (strictly typed, OOP, …) but more powerful (it has enum, generics, dynamic type, …), with HaXe we can target our projects for Flash, C++, Neko, HTML5, Node.JS, PHP, iOS, Android… if we work with multiplatform APIs we can write once and deploy our project for multiple targets.
So for many developers that come from Javascript, Actionscript, Java and so on, will be so easy to start deal with HaXe.
Another interesting thing of HaXe is that we can work with the library present in the SWF files and integrate movieclip in our project, we can create also SWF file without Flash Professional with SWFMill that is used for the generation of asset libraries containing images (PNG and JPEG), fonts (TTF) or other SWF movies.
That’s so interesting because it means that designers that usually prepare assets for developers don’t need to change own daily workflow!
If you need to extend your target platform we can add new features with external libraries, it’s so important because we can really cover everything with this feature; we can find a lot of ready to use libraries directly on the lib HaXe website.
With HaXe you can communicate between different languages like JS and Flash in both direction, you can easily find many frameworks and library porting in HaXe, for example javascript like JQuery, Sencha Touch, Node.JS and so on.

What about the IDE to work with HaXe (so important for a developer!)!?
On Mac you can use TextMate or FDT on Win FDT or FlashDevelop this one seems the best one but I didn’t try it. For more specs I suggest to take a look at HaXe site section, maybe you can find your favorite IDE in the list.

Finally I made an easy sample to understand better the powerful of HaXe NME, this sample loads an external XML file and an external SWF library with a movieclip inside exported for Actionscript, so I added a drag&drop feature to the list. Then I tried to compile it for iOS, Mac OS X Lion, C++ and SWF with the same basecode and everything work so well and smooth!


You can download source files here, to compile it take a look at HaXeNME section and you can find everything you need to try this sample and start to play with HaXeNME!

If you want to deal with HaXe, I suggest two books, the first one is really a good start to work with this fantastic language:
HaXe 2 beginner’s guide
Professional HaXe and Neko

Last but not least, next April in Paris there will be World Wide HaXe conference, I’ll be there to learn more about the future of this amazing platform if you are planning to be there it will be a pleasure for me catch up for a beer!

I hope soon to publish more experiments and informations about HaXe because it is a thrilling programming language!!!
So stay tuned!