grunt continuous development of the front end tier
DESCRIPTION
Goal: To show a Continuous development process of the front end tier using Grunt; how to boost productivityTRANSCRIPT
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