Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Grunt Continuous Development of the Front End Tier

1,122 views

Published on

Goal: To show a Continuous development process of the front end tier using Grunt; how to boost productivity

Published in: Technology
  • Be the first to comment

Grunt Continuous Development of the Front End Tier

  1. 1. GRUNT Continuous Development of the Front End Tier, based on node.js Prepared by: Erick Brito August 2014
  2. 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. 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. 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. 5. Development Process
  6. 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. 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. 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. 9. Unit testing?  Much more better  Behavior-Driven development  Platform:  Jasmine  Simple to configure  Run on top of phantomjs browser engine  Code coverage:
  10. 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. 11. Grunt: reduce complexity and adds flexibility!
  12. 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. 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. 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. 15. Project  Client  Automotive Industry  Project  Service Recall
  16. 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. 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. 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. 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. 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. 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

×