SlideShare a Scribd company logo

Grunt Continuous Development of the Front End Tier

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

1 of 21
Download to read offline
GRUNT 
Continuous Development 
of the Front End Tier, 
based on node.js 
Prepared by: Erick Brito 
August 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
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
Ad

Recommended

JCConf 2015 workshop 動手玩 Java 專案建置工具
JCConf 2015 workshop 動手玩 Java 專案建置工具JCConf 2015 workshop 動手玩 Java 專案建置工具
JCConf 2015 workshop 動手玩 Java 專案建置工具謝 宗穎
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Gruntbenko
 
Grunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerGrunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerMohammed Arif
 
Modern Development Tools
Modern Development ToolsModern Development Tools
Modern Development ToolsYe Maw
 
[English][Test Girls] Zero to Hero: Start Test automation with Cypress
[English][Test Girls] Zero to Hero: Start Test automation with Cypress[English][Test Girls] Zero to Hero: Start Test automation with Cypress
[English][Test Girls] Zero to Hero: Start Test automation with CypressTest Girls
 

More Related Content

What's hot

JSDC 2015 - TDD 的開發哲學,以 Node.js 為例
JSDC 2015 - TDD 的開發哲學,以 Node.js 為例JSDC 2015 - TDD 的開發哲學,以 Node.js 為例
JSDC 2015 - TDD 的開發哲學,以 Node.js 為例謝 宗穎
 
Creating a continuous delivery pipeline with docker
Creating a continuous delivery pipeline with dockerCreating a continuous delivery pipeline with docker
Creating a continuous delivery pipeline with dockercontainershipio
 
Docker and Selenoid - Make Autotests Great Again
Docker and Selenoid - Make Autotests Great Again Docker and Selenoid - Make Autotests Great Again
Docker and Selenoid - Make Autotests Great Again COMAQA.BY
 
Meetup React Sanca - 29/11/18 - React Testing
Meetup React Sanca - 29/11/18 - React TestingMeetup React Sanca - 29/11/18 - React Testing
Meetup React Sanca - 29/11/18 - React TestingAugusto Lazaro
 
Grunt training deck
Grunt training deckGrunt training deck
Grunt training deckJames Ford
 
Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Володимир Дубенко "Node.js for desktop development (based on Electron library)"Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Володимир Дубенко "Node.js for desktop development (based on Electron library)"Fwdays
 
為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測
為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測
為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測謝 宗穎
 
[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze
[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze
[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurzeFuture Processing
 
Евгений Жарков "React Native: Hurdle Race"
Евгений Жарков "React Native: Hurdle Race"Евгений Жарков "React Native: Hurdle Race"
Евгений Жарков "React Native: Hurdle Race"Fwdays
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLEAN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLEGavin Pickin
 
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
GDG Kraków - Intro to front-end automation using bower.js & grunt.jsGDG Kraków - Intro to front-end automation using bower.js & grunt.js
GDG Kraków - Intro to front-end automation using bower.js & grunt.jsDominik Prokop
 
Cypress report
Cypress reportCypress report
Cypress reportAdarsh
 
Ondřej Procházka - Deployment podle Devel.cz
Ondřej Procházka - Deployment podle Devel.czOndřej Procházka - Deployment podle Devel.cz
Ondřej Procházka - Deployment podle Devel.czDevelcz
 
Cypress e2e automation testing - day1 intor by: Hassan Hameed
Cypress e2e automation testing -  day1 intor by: Hassan HameedCypress e2e automation testing -  day1 intor by: Hassan Hameed
Cypress e2e automation testing - day1 intor by: Hassan HameedHassan Muhammad
 
Gulp and bower Implementation
Gulp and bower Implementation Gulp and bower Implementation
Gulp and bower Implementation Prashant Shrestha
 
10 tips for continuous integration
10 tips for continuous integration10 tips for continuous integration
10 tips for continuous integrationVladimir Roudakov
 
TDC2018SP | Trilha Containers - CI/CD com Docker e Drone
TDC2018SP | Trilha Containers - CI/CD com Docker e DroneTDC2018SP | Trilha Containers - CI/CD com Docker e Drone
TDC2018SP | Trilha Containers - CI/CD com Docker e Dronetdc-globalcode
 
Continuous Development Pipeline
Continuous Development PipelineContinuous Development Pipeline
Continuous Development PipelineIzzet Mustafaiev
 
OSDC.no 2015 introduction to node.js workshop
OSDC.no 2015 introduction to node.js workshopOSDC.no 2015 introduction to node.js workshop
OSDC.no 2015 introduction to node.js workshopleffen
 

What's hot (20)

JSDC 2015 - TDD 的開發哲學,以 Node.js 為例
JSDC 2015 - TDD 的開發哲學,以 Node.js 為例JSDC 2015 - TDD 的開發哲學,以 Node.js 為例
JSDC 2015 - TDD 的開發哲學,以 Node.js 為例
 
Creating a continuous delivery pipeline with docker
Creating a continuous delivery pipeline with dockerCreating a continuous delivery pipeline with docker
Creating a continuous delivery pipeline with docker
 
Docker and Selenoid - Make Autotests Great Again
Docker and Selenoid - Make Autotests Great Again Docker and Selenoid - Make Autotests Great Again
Docker and Selenoid - Make Autotests Great Again
 
Meetup React Sanca - 29/11/18 - React Testing
Meetup React Sanca - 29/11/18 - React TestingMeetup React Sanca - 29/11/18 - React Testing
Meetup React Sanca - 29/11/18 - React Testing
 
Grunt training deck
Grunt training deckGrunt training deck
Grunt training deck
 
Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Володимир Дубенко "Node.js for desktop development (based on Electron library)"Володимир Дубенко "Node.js for desktop development (based on Electron library)"
Володимир Дубенко "Node.js for desktop development (based on Electron library)"
 
為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測
為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測
為 Node.js 專案打造專屬管家進行開發流程整合及健康檢測
 
[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze
[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze
[Quality Meetup #20] Michał Górski - Continuous Deployment w chmurze
 
Евгений Жарков "React Native: Hurdle Race"
Евгений Жарков "React Native: Hurdle Race"Евгений Жарков "React Native: Hurdle Race"
Евгений Жарков "React Native: Hurdle Race"
 
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLEAN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
AN EXERCISE IN CLEANER CODE - FROM LEGACY TO MAINTAINABLE
 
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
GDG Kraków - Intro to front-end automation using bower.js & grunt.jsGDG Kraków - Intro to front-end automation using bower.js & grunt.js
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
 
Cypress report
Cypress reportCypress report
Cypress report
 
Ondřej Procházka - Deployment podle Devel.cz
Ondřej Procházka - Deployment podle Devel.czOndřej Procházka - Deployment podle Devel.cz
Ondřej Procházka - Deployment podle Devel.cz
 
Cypress e2e automation testing - day1 intor by: Hassan Hameed
Cypress e2e automation testing -  day1 intor by: Hassan HameedCypress e2e automation testing -  day1 intor by: Hassan Hameed
Cypress e2e automation testing - day1 intor by: Hassan Hameed
 
Cypress Automation
Cypress  AutomationCypress  Automation
Cypress Automation
 
Gulp and bower Implementation
Gulp and bower Implementation Gulp and bower Implementation
Gulp and bower Implementation
 
10 tips for continuous integration
10 tips for continuous integration10 tips for continuous integration
10 tips for continuous integration
 
TDC2018SP | Trilha Containers - CI/CD com Docker e Drone
TDC2018SP | Trilha Containers - CI/CD com Docker e DroneTDC2018SP | Trilha Containers - CI/CD com Docker e Drone
TDC2018SP | Trilha Containers - CI/CD com Docker e Drone
 
Continuous Development Pipeline
Continuous Development PipelineContinuous Development Pipeline
Continuous Development Pipeline
 
OSDC.no 2015 introduction to node.js workshop
OSDC.no 2015 introduction to node.js workshopOSDC.no 2015 introduction to node.js workshop
OSDC.no 2015 introduction to node.js workshop
 

Viewers also liked

Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with GruntVlad Filippov
 
Základní nástroje pro automatizaci
Základní nástroje pro automatizaciZákladní nástroje pro automatizaci
Základní nástroje pro automatizaciTomáš Musiol
 
Frontend Development - Supercharge your frontend development with little lang...
Frontend Development - Supercharge your frontend development with little lang...Frontend Development - Supercharge your frontend development with little lang...
Frontend Development - Supercharge your frontend development with little lang...Dave Jeffery
 
GruntJs Installation and popular plugins. MoscowJS
GruntJs Installation and popular plugins. MoscowJSGruntJs Installation and popular plugins. MoscowJS
GruntJs Installation and popular plugins. MoscowJSDmitri Kunin
 

Viewers also liked (8)

Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
 
Základní nástroje pro automatizaci
Základní nástroje pro automatizaciZákladní nástroje pro automatizaci
Základní nástroje pro automatizaci
 
Davky jsou-proste-super
Davky jsou-proste-superDavky jsou-proste-super
Davky jsou-proste-super
 
Frontend Development - Supercharge your frontend development with little lang...
Frontend Development - Supercharge your frontend development with little lang...Frontend Development - Supercharge your frontend development with little lang...
Frontend Development - Supercharge your frontend development with little lang...
 
Coffee script throwdown
Coffee script throwdownCoffee script throwdown
Coffee script throwdown
 
Uk norway ib directory
Uk norway ib directoryUk norway ib directory
Uk norway ib directory
 
Mac interval tree
Mac interval treeMac interval tree
Mac interval tree
 
GruntJs Installation and popular plugins. MoscowJS
GruntJs Installation and popular plugins. MoscowJSGruntJs Installation and popular plugins. MoscowJS
GruntJs Installation and popular plugins. MoscowJS
 

Similar to Grunt Continuous Development of the Front End Tier

Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend
 
Continuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applicationsContinuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applicationsEvgeniy Kuzmin
 
Continuous integration / continuous delivery
Continuous integration / continuous deliveryContinuous integration / continuous delivery
Continuous integration / continuous deliveryEatDog
 
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...Evgeniy Kuzmin
 
WordPress automation and CI
WordPress automation and CIWordPress automation and CI
WordPress automation and CIRan Bar-Zik
 
Behavior Driven Development by Example
Behavior Driven Development by ExampleBehavior Driven Development by Example
Behavior Driven Development by ExampleNalin Goonawardana
 
Real-time Code Sharing Service for one-to-many coding classes
Real-time Code Sharing Service for one-to-many coding classesReal-time Code Sharing Service for one-to-many coding classes
Real-time Code Sharing Service for one-to-many coding classesa2tt
 
The Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session IThe Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session IOded Sagir
 
Cloud-powered Continuous Integration and Deployment architectures - Jinesh Varia
Cloud-powered Continuous Integration and Deployment architectures - Jinesh VariaCloud-powered Continuous Integration and Deployment architectures - Jinesh Varia
Cloud-powered Continuous Integration and Deployment architectures - Jinesh VariaAmazon Web Services
 
VueJs Workshop
VueJs WorkshopVueJs Workshop
VueJs WorkshopUnfold UI
 
High productivity web development workflow - JavaScript Meetup Saigon 2014
High productivity web development workflow - JavaScript Meetup Saigon 2014High productivity web development workflow - JavaScript Meetup Saigon 2014
High productivity web development workflow - JavaScript Meetup Saigon 2014Oliver N
 
High Productivity Web Development Workflow
High Productivity Web Development WorkflowHigh Productivity Web Development Workflow
High Productivity Web Development WorkflowVũ Nguyễn
 
The "Holy Grail" of Dev/Ops
The "Holy Grail" of Dev/OpsThe "Holy Grail" of Dev/Ops
The "Holy Grail" of Dev/OpsErik Osterman
 
CI/CD on AWS: Deploy Everything All the Time | AWS Public Sector Summit 2016
CI/CD on AWS: Deploy Everything All the Time | AWS Public Sector Summit 2016CI/CD on AWS: Deploy Everything All the Time | AWS Public Sector Summit 2016
CI/CD on AWS: Deploy Everything All the Time | AWS Public Sector Summit 2016Amazon Web Services
 
Let's make it flow ... one way
Let's make it flow ... one wayLet's make it flow ... one way
Let's make it flow ... one wayRoberto Ciatti
 
CSS Regression Tests
CSS Regression TestsCSS Regression Tests
CSS Regression TestsKaloyan Kosev
 
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13Fred Sauer
 
Jenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Jenkins Days - Workshop - Let's Build a Pipeline - Los AngelesJenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Jenkins Days - Workshop - Let's Build a Pipeline - Los AngelesAndy Pemberton
 
Adopt DevOps philosophy on your Symfony projects (Symfony Live 2011)
Adopt DevOps philosophy on your Symfony projects (Symfony Live 2011)Adopt DevOps philosophy on your Symfony projects (Symfony Live 2011)
Adopt DevOps philosophy on your Symfony projects (Symfony Live 2011)Fabrice Bernhard
 

Similar to Grunt Continuous Development of the Front End Tier (20)

Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
Continuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applicationsContinuous Integration/ Continuous Delivery of web applications
Continuous Integration/ Continuous Delivery of web applications
 
Continuous integration / continuous delivery
Continuous integration / continuous deliveryContinuous integration / continuous delivery
Continuous integration / continuous delivery
 
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
Continuous integration / continuous delivery of web applications, Eugen Kuzmi...
 
WordPress automation and CI
WordPress automation and CIWordPress automation and CI
WordPress automation and CI
 
Behavior Driven Development by Example
Behavior Driven Development by ExampleBehavior Driven Development by Example
Behavior Driven Development by Example
 
AWS Code Services
AWS Code ServicesAWS Code Services
AWS Code Services
 
Real-time Code Sharing Service for one-to-many coding classes
Real-time Code Sharing Service for one-to-many coding classesReal-time Code Sharing Service for one-to-many coding classes
Real-time Code Sharing Service for one-to-many coding classes
 
The Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session IThe Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session I
 
Cloud-powered Continuous Integration and Deployment architectures - Jinesh Varia
Cloud-powered Continuous Integration and Deployment architectures - Jinesh VariaCloud-powered Continuous Integration and Deployment architectures - Jinesh Varia
Cloud-powered Continuous Integration and Deployment architectures - Jinesh Varia
 
VueJs Workshop
VueJs WorkshopVueJs Workshop
VueJs Workshop
 
High productivity web development workflow - JavaScript Meetup Saigon 2014
High productivity web development workflow - JavaScript Meetup Saigon 2014High productivity web development workflow - JavaScript Meetup Saigon 2014
High productivity web development workflow - JavaScript Meetup Saigon 2014
 
High Productivity Web Development Workflow
High Productivity Web Development WorkflowHigh Productivity Web Development Workflow
High Productivity Web Development Workflow
 
The "Holy Grail" of Dev/Ops
The "Holy Grail" of Dev/OpsThe "Holy Grail" of Dev/Ops
The "Holy Grail" of Dev/Ops
 
CI/CD on AWS: Deploy Everything All the Time | AWS Public Sector Summit 2016
CI/CD on AWS: Deploy Everything All the Time | AWS Public Sector Summit 2016CI/CD on AWS: Deploy Everything All the Time | AWS Public Sector Summit 2016
CI/CD on AWS: Deploy Everything All the Time | AWS Public Sector Summit 2016
 
Let's make it flow ... one way
Let's make it flow ... one wayLet's make it flow ... one way
Let's make it flow ... one way
 
CSS Regression Tests
CSS Regression TestsCSS Regression Tests
CSS Regression Tests
 
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
 
Jenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Jenkins Days - Workshop - Let's Build a Pipeline - Los AngelesJenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
Jenkins Days - Workshop - Let's Build a Pipeline - Los Angeles
 
Adopt DevOps philosophy on your Symfony projects (Symfony Live 2011)
Adopt DevOps philosophy on your Symfony projects (Symfony Live 2011)Adopt DevOps philosophy on your Symfony projects (Symfony Live 2011)
Adopt DevOps philosophy on your Symfony projects (Symfony Live 2011)
 

Recently uploaded

IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxInfosec
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...Adrian Sanabria
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERNRonnelBaroc
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotelPhilippines
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementMimmo Squillace
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Product School
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxVotarikari Shravan
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17Ana-Maria Mihalceanu
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?MENGSAYLOEM1
 
10 things that helped me advance my career - PHP UK Conference 2024
10 things that helped me advance my career - PHP UK Conference 202410 things that helped me advance my career - PHP UK Conference 2024
10 things that helped me advance my career - PHP UK Conference 2024Thijs Feryn
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!KivenRaySarsaba
 

Recently uploaded (20)

IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptx
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
Avoiding Bad Stats and the Benefits of Playing Trivia with Friends: PancakesC...
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company Profile
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvement
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?
 
10 things that helped me advance my career - PHP UK Conference 2024
10 things that helped me advance my career - PHP UK Conference 202410 things that helped me advance my career - PHP UK Conference 2024
10 things that helped me advance my career - PHP UK Conference 2024
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!
 

Grunt Continuous Development of the Front End Tier

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

Editor's Notes

  1. - preprocesor tools       - validators      - packaging tools      - Process           * Development           * Delivering