Continuous development of the Front End Tier based on Grunt (node.js)
The development of the User Interface (Front End Tier) requires science and art to work together. To make it works, the process and tools are: Grunt continuous integration.
Using Grunt as a continuous development tool for the front end tier I’ve Improved the quality:
- Using the best practices
- allowing to have metrics with static analysis on css, html & js
Boost the productivity:
1) At any change in the code when saving the files, the files are compiled or processed
- Stylus -> css files
- CoffeScript -> JS Files
2) The validation tools are launched
3) The unit tests are launched
4) The files are copied to Development Web Server
5) The browser reloads the changes.
The plugins are:
- Css lint (static code quality analysis)
- Jshint (static code quality analysis)
- Jasmine (unit tests)
- grunt-template-jasmine-istambul (code coverage
- lint5 (static code quality analysis)
To handle the development process:
- Connect (enables a webserver)
- Proxy-Connect (enables a proxy to invoke remote ajax calls)
To handle the delivery process
Much more better, I followed Behavior-Driven development process. The platform I used over Grunt is Jasmine. Why? It is simple to configure, runs on top of phantomjs browser engine, and enables to implement the code coverage.
- Start always with a BDD: testing with Jasmine provides a better design, ensuring the testability of the code and using the best practices with MVC pattern on the frontend.
- CSSLint provide a great feedback to improve the quality of the css.
Next steps on my process:
- Integrate Grunt with a CI server (Jenkins).
- Integrate the metrics reports provided by Grunt on a historical dashboard: SonarQube
- Implement applications with I18N (internationalization).
Using Grunt as a continuous development tool, developing the user interface the right process and tools, allows to improve the productivity and the quality. In less than 2 weeks, I implemented the process, I learned 2 new languages (Coffeescript & Stylus) and I deliver a great project. Don’t hesitate to start using Grunt continuous integration of the UI.