agile javascript - github pages · grunt javascript task runner task configuration in gruntfile.js...
TRANSCRIPT
![Page 1: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/1.jpg)
![Page 2: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/2.jpg)
Agile JavaScriptFrameworks, Tools, Services
Ben Ripkens – IT Consultantcodecentric AGMichael Lex – IT Consultantcodecentric AG
![Page 3: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/3.jpg)
Agile Software Development
Agile ManifestoRespond to change
Deliver frequently Ensure quality
Customer collaboration
Working software
Scrum Kanban
![Page 4: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/4.jpg)
Agile Practices
TDD
BDD Continuous Integration
Continuous Delivery
Static Code Analysis DDD
Code Reviews
![Page 5: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/5.jpg)
Frameworks, Tools and Services
Jenkins
Travis-CI
Cucumber
karma
GitHub
Mercurial
JBehave
Robot
GruntPuppet
mocha
Jira
Maven
![Page 6: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/6.jpg)
Everything together
Agile ManifestoRespond to change
Deliver frequently
Ensure quality
Customer collaboration
Working software
ScrumKanban
TDD
BDD
Continuous Integration
Continuous Delivery
Static Code Analysis
DDD
Code ReviewsJenkins
Travis-CI
Cucumber
karma
GitHub
MercurialJBehave
Robot
GruntPuppet
mocha
JiraMaven
![Page 7: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/7.jpg)
More structure please ...
![Page 8: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/8.jpg)
DEPLOY
CO
LLAB
OR
ATE
INTEGRATE
BUILD
DEVELOPTestingApplication
grunt
mocha
chai
Sinon.JS
ng-scenario
Tools
karma
jshint
less
![Page 9: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/9.jpg)
One step at a time...
![Page 10: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/10.jpg)
DEVELOPApplication
AngularJS„Superheroic JavaScript MVW framework“
Node.JSServer-Side JavaScript implementation with strictly asynchronous I/O
Express.JSHTTP-Server framework
Neo4J„The world's leading graph database“
AngularJS„Superheroic JavaScript MVW framework“
Node.JSServer-Side JavaScript implementation with strictly asynchronous I/O
Express.JSHTTP-Server framework
Neo4J„The world's leading graph database“
![Page 11: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/11.jpg)
Now...… we can start developing the application.
But...… what about collaboration in the team?● Work on the same code simultanuously?● Keep track of open bugs?● Discuss and review code?
![Page 12: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/12.jpg)
CO
LLAB
OR
ATE
DEVELOPApplication
GitHub is more than just a VCS● Bugtracker● Code Review Tool● Wiki● Documentation
GitHub is more than just a VCS● Bugtracker● Code Review Tool● Wiki● Documentation
![Page 13: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/13.jpg)
Now...… we can work together on our project.
But...… how can we ensure everybody uses the same versions of the necessary frameworks?
![Page 14: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/14.jpg)
CO
LLAB
OR
ATE
DEVELOPApplication
Node Package Manager● Dependency management for JavaScript projects● Is part of NodeJS● Available Packages on npmjs.org
Node Package Manager● Dependency management for JavaScript projects● Is part of NodeJS● Available Packages on npmjs.org
BUILD
![Page 15: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/15.jpg)
Now...… we can deal with dependencies (even transitive ones).
But...… what about testing?● Unit-Tests?● Integration-Tests?● End-to-End Tests?
![Page 16: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/16.jpg)
CO
LLAB
OR
ATE
DEVELOPApplication
BUILDAngularJS Scenario Runner for end-to-end-tests
Mocha for unit-tests (client- and server-side)
Utility-libraries:● Sinon.JS for stubbing/mocking● Chai for readable assertions
AngularJS Scenario Runner for end-to-end-tests
Mocha for unit-tests (client- and server-side)
Utility-libraries:● Sinon.JS for stubbing/mocking● Chai for readable assertions
Testing
mocha
chai
Sinon.JS
ng-scenario
![Page 17: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/17.jpg)
Now...… we have tests to ensure high functional quality and prevent regression.
But...… how can we automate test execution?● Run client-side tests from command-line
(without having to refresh the browser)?● Automatically run tests whenever code
changes?● Get instant feedback when a test fails?
![Page 18: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/18.jpg)
CO
LLAB
OR
ATE
DEVELOPTestingApplication
mocha
chai
Sinon.JS
ng-scenario
BUILD
Tools
karma
Karma● Test-Runner● Execute in-browser-tests in background● Supports various browsers
(Chrome, Firefox, PhantomJS)● Execute test continuously in background
Karma● Test-Runner● Execute in-browser-tests in background● Supports various browsers
(Chrome, Firefox, PhantomJS)● Execute test continuously in background
![Page 19: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/19.jpg)
Now...… test execution is easy.
But...… are there other tools to support developers?● Static code analysis?● Enforce code style?● Compile JS/CSS?
![Page 20: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/20.jpg)
CO
LLAB
OR
ATE
DEVELOPTestingApplication
mocha
chai
Sinon.JS
ng-scenario
Tools
karma
BUILD
JSHint● Static code analysis● Detect (syntax) errors● Detect potential problems (bugs)● Enforce code style
LESS● Dynamic stylesheet language● Extends CSS
JSHint● Static code analysis● Detect (syntax) errors● Detect potential problems (bugs)● Enforce code style
LESS● Dynamic stylesheet language● Extends CSS
jshint
less
![Page 21: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/21.jpg)
Now...… we have plenty of tools.
But...… all these tools have their own command line interface and configuration options.
We want one tool to rule them all!
![Page 22: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/22.jpg)
CO
LLAB
OR
ATE
BUILD
DEVELOPTestingApplication
mocha
chai
Sinon.JS
ng-scenario
Tools
karma
jshint
less
Grunt● JavaScript Task Runner● Task configuration in Gruntfile.js● Task execution with grunt-cli● Great number of plugins● Very customizable
Grunt● JavaScript Task Runner● Task configuration in Gruntfile.js● Task execution with grunt-cli● Great number of plugins● Very customizable
grunt
![Page 23: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/23.jpg)
Now...… the build chain is complete.
But...… the build is only executed locally. ● Trigger build on each commit?● Warn developers when build fails?● Avoid works-on-my-machine problem?
![Page 24: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/24.jpg)
CO
LLAB
OR
ATE
BUILD
DEVELOPTestingApplication
mocha
chai
Sinon.JS
ng-scenario
Tools
karma
jshint
less
grunt
Travis-CI● Continuous Integration Service● Seamless integration in GitHub projects● Easy configuration
Travis-CI● Continuous Integration Service● Seamless integration in GitHub projects● Easy configuration
INTEGRATE
![Page 25: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/25.jpg)
Is something still missing?
Yes, …… we want to go live!● Automated deployment after successfull build?● Deployment to different environments
(production, staging, etc)?
![Page 26: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/26.jpg)
CO
LLAB
OR
ATE
INTEGRATE
BUILD
DEVELOPTestingApplication
grunt
mocha
chai
Sinon.JS
ng-scenario
Tools
karma
jshint
less
DEPLOY
Heroku● Platform as a Service● Easy deployment via git-push● Continuous Delivery from Travis-CI
Heroku● Platform as a Service● Easy deployment via git-push● Continuous Delivery from Travis-CI
![Page 27: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/27.jpg)
DEPLOY
CO
LLAB
OR
ATE
INTEGRATE
BUILD
DEVELOPTestingApplication
grunt
mocha
chai
Sinon.JS
ng-scenario
Tools
karma
jshint
less
The final picture
![Page 28: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/28.jpg)
DEPLOY
CO
LLAB
OR
ATE
INTEGRATE
BUILD
DEVELOPTestingApplication
grunt
mocha
chai
Sinon.JS
ng-scenario
Tools
karma
jshint
less
● Twitter Bootstrap● D3.js● ...
● cucumber● nodejs-webdriver● ...
● watchservice● test-coverage● ...
● artifact archive● reporting● ...
● rollback● schema-migration● ...
Anything else?
![Page 29: Agile JavaScript - GitHub Pages · Grunt JavaScript Task Runner Task configuration in Gruntfile.js Task execution with grunt-cli Great number of plugins Very customizable Grunt JavaScript](https://reader035.vdocuments.us/reader035/viewer/2022062919/5ee36e21ad6a402d666d4d76/html5/thumbnails/29.jpg)
DEPLOY
CO
LLAB
OR
ATE
INTEGRATE
BUILD
DEVELOPTestingApplication
JUnit
Spring Test
JBehave
Tools
Sonar
CheckStyle
JProfiler
(Java) Alternative