GRUNT

Continuous Development

of the Front End Tier,

based on node.js

Prepared by: Erick BritoAugust 2014

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

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

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.

Development Process

• Stylus creates the CSS files

• CoffeScript generates the JavaScript files

• JsHint validates JavaScript

• CssLint validates the CSS files

• Lint5 validates the Html files

• Unit tests are executed

• Changes the code

•Files are copied to the Dev Web Server

•Browser reloads the changes

Deployment tools Developer

Pre-procesor

tools

Validation tools

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 MinifyRemove/change

any regex expressiion

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))

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

Unit testing?

Much more better

Behavior-Driven development

Platform:

Jasmine

Simple to configure

Run on top of phantomjs browser engine

Code coverage:

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)

Grunt: reduce complexity and adds flexibility!

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/

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/wrrrldwideweb

100% jslint clean code.

Improves readiblity

Code needs to be compiled (guarantee the code is free of syntax , typos errors)

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/

Project

Client

Automotive Industry

Project

Service Recall

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

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.”

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.

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

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 …

by Erick Brito

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