1.
GRUNT
Continuous Development
of the Front End Tier,
based on node.js
Prepared by: Erick Brito
August 2014

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.

5.
Development Process

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

7.
Used Grunt Plugins
 CSS
 Stylus (http://learnboost.github.io/stylus/)
 CSS Lint (static code quality analysis)
 JavaScript
 Coffee script
 Jshint (static code quality analysis)
 Jasmine (unit tests)
 grunt-template-jasmine-istanbul (code coverage)
 HTML
 Lint5 (static code quality analysis))

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)

11.
Grunt: reduce complexity and
adds flexibility!

12.
Grunt references
 http://gruntjs.com
 http://www.sitepoint.com/writing-awesome-build-script-
grunt/
 http://davidtucker.net/articles/automating-with-grunt/
 http://whyjava.wordpress.com/2013/11/02/day-5-
gruntjs-let-someone-else-do-my-tedious-repetitive-tasks/

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)

14.
CoffeeScript references
 http://coffeescript.org
 http://coffeescriptcookbook.com
 http://arcturo.github.io/library/coffeescript/index.html
 http://valve.github.io/blog/2013/07/13/existential-operator-in-coffeescript/
 http://openmymind.net/2012/5/16/Ten-Features-I-Like-About-
CoffeeScript/
 http://www.jimmycuadra.com/posts/coffeescript-classes-under-the-
hood
 http://www.cs8.my/2012/09/coffeescript-classes-and-their-variables/
 http://blog.carbonfive.com/2011/07/06/pragmatic-javascript-
testing-with-jasmine/

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