This document discusses using Grunt to implement a continuous development process for a front-end node.js tier. It outlines how Grunt plugins can be used for tasks like CoffeeScript compilation, CSS processing, linting, unit testing, and code coverage to improve code quality and boost productivity. The process involves automatically running these tasks on code changes and reloading browsers. Continuous delivery also minifies files. Unit testing with Jasmine and code coverage with Grunt plugins is demonstrated. Lessons learned include benefits of CoffeeScript and starting with behavior-driven development. Next steps propose integrating Grunt into a CI server and SonarQube.
2. Agenda
Goal: To show a Continuous development process of
the front end tier using Grunt
HL overview of Grunt
HL overview of process using the plugins
Unit testing with Jasmine
CoffeeScript
Demo
Lessons learned & Next Steps
3. Benefits
Improves the quality,
Using the best practices
allowing to have metrics
Static analysis on:
CSS, Html & JS
Unit tests (BDT) & code coverage of the JavaScript code
Boost productivity.
Allows to have
4. Development Process
1. Developer changes the code and save the file
2. The files are compiled or processed
A. Stylus -> css files
B. CoffeScript -> JS Files
3. The validation tools are launched
A. Jshint,
B. csslint,
C. lint5
4. Unit tests are launched
5. Files are copied to Development Web Server
6. Browser reloads the changes.
6. Continuous delivery process
Same as the development process
+
Minify
Js
Css
Html
Remove from js the console.log lines (or any regex
expression could be changed.
Dev. Process Minify
Remove/change any
regex expressiion
8. Used Grunt Plugins
Process
Watch
Connect (enables a webserver)
Proxy-Connect (enables a proxy to invoke remote ajax
calls)
Delivery process:
htmlmin
Copy
Cssmin
Regex-replace
uglify
9. Unit testing?
Much more better
Behavior-Driven development
Platform:
Jasmine
Simple to configure
Run on top of phantomjs browser engine
Code coverage:
10. Grunt
Defined as a Javascript task runner.
It needs npm (the Node.js package manager)
Configured throw 2 files
Gruntfile.js
package.json (as it us npm)
13. Coding JavaScript?
Much more better
Coding with CoffeeScript
Benefits:
Better code quality
Boost productivity
Using the good parts of javascript
Ref:
http://www.amazon.com/exec/obidos/ASIN/0596517742/wrrr
ldwideweb
100% jslint clean code.
Improves readiblity
Code needs to be compiled (guarantee the code is free of
syntax , typos errors)
15. Project
Client
Automotive Industry
Project
Service Recall
16. Demo the development process
Only we need to open 2 consoles and execute:
$ grunt configureProxies:testWithSoapUi
connect:livereloadX
$ grunt watch
Open the browser
Modify the code and see how the browser reloads with the
latest changes
Run SoapUi Mock server to answer the ajax request that
the proxy redirect to our Mock answers.
Time to see CoffeeScript.
4 files (55+137+39+260 = 491 lines compiles into 582
lines). Around 18% less code
17. Lessons learned
Never again code directly on JavaScript,
use CoffeeScript:
“CoffeeScript is less a new language than it is a shorhand
for easily expressing the best practices of JavaScipt.”
18. Lessons learned
Start always with a BDD:
Testing with Jasmine & the code coverage was introduced
at the end of the project.
If I would started with Jasmine, I will be improved much
more the quality of the code.
Ensured the testability of the code.
Ensured the best practices MVC on the frontend.
19. Lessons learned
CSSLint provided a great feedback to improve the
quality of the css.
Testing with Jasmine & the code coverage was
introduced at the end of the project. Start always with
a BDD:
That will be improved much more the quality of the code.
Ensured the testability of the code.
Don’t reinvent the wheel: Scalfolding, Dependency
management with Bower: Use Yeoman
20. Next steps
Integrate GRUNT in a CI server (Jenkins)
Existing plugin from Jenkins: NodeJS plugin
Ref: https://wiki.jenkins-ci.org/display/JENKINS/NodeJS+Plugin
Step by step guide on : http://sideroad.secret.jp/articles/grunt-on-
jenkins/
Integrate Grunt reports metrics on SonarQube
Some grunt plugins already exists:
https://www.npmjs.org/package/grunt-karma-sonar
Replicate projects using Yeoman
I18N
Code based on internationalization. (use of resource boundless
…
21. Q & A
Now it is time to ask questions!
Contact:
Erick Brito
http://blog.erickbrito.ca
http://ca.linkedin.com/in/erickbrito
Erick.Brito@lochbridge.com
erbrito@gmail.com
by Erick Brito
Editor's Notes
- preprocesor tools
- validators
- packaging tools
- Process
* Development
* Delivering