Agile JavaScript Frameworks, Tools, Services Ben Ripkens IT - PowerPoint PPT Presentation

Agile JavaScript Frameworks, Tools, Services Ben Ripkens – IT Consultant codecentric AG Michael Lex – IT Consultant codecentric AG

Agile Software Development Kanban Scrum Agile Manifesto Respond to change Customer collaboration Deliver frequently Ensure quality Working software

Agile Practices BDD Continuous Integration DDD Static Code Analysis Continuous Delivery TDD Code Reviews

Frameworks, Tools and Services Cucumber Robot mocha Grunt Puppet GitHub Travis-CI karma Mercurial Maven Jenkins JBehave Jira

Everything together BDD Cucumber Kanban Robot Scrum mocha Continuous Integration Agile Manifesto Grunt Respond to change Puppet Static Code Analysis GitHub Customer collaboration Travis-CI karma Ensure quality Continuous Delivery DDD Deliver frequently JBehave Mercurial Jenkins TDD Code Reviews Working software Maven Jira

More structure please ...

DEVELOP COLLABORATE Application Testing Tools mocha karma chai jshint Sinon.JS less ng-sce nario BUILD grunt INTEGRATE DEPLOY

One step at a time...

DEVELOP Application AngularJS AngularJS „ Superheroic JavaScript MVW „ Superheroic JavaScript MVW framework“ framework“ Node.JS Node.JS Server-Side JavaScript implementation Server-Side JavaScript implementation with strictly asynchronous I/O with strictly asynchronous I/O Express.JS Express.JS HTTP-Server framework HTTP-Server framework Neo4J Neo4J „ The world's leading graph database“ „ The world's leading graph database“

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?

DEVELOP COLLABORATE Application GitHub is more than just a VCS GitHub is more than just a VCS ● Bugtracker ● Bugtracker ● Code Review Tool ● Code Review Tool ● Wiki ● Wiki ● Documentation ● Documentation

Now... … we can work together on our project. But... … how can we ensure everybody uses the same versions of the necessary frameworks?

DEVELOP COLLABORATE Application BUILD Node Package Manager Node Package Manager ● Dependency management for JavaScript projects ● Dependency management for JavaScript projects ● Is part of NodeJS ● Is part of NodeJS ● Available Packages on npmjs.org ● Available Packages on npmjs.org

Now... … we can deal with dependencies (even transitive ones). But... … what about testing? ● Unit-Tests? ● Integration-Tests? ● End-to-End Tests?

DEVELOP COLLABORATE Application Testing mocha chai Sinon.JS ng-sce nario BUILD AngularJS Scenario Runner for end-to-end-tests AngularJS Scenario Runner for end-to-end-tests Mocha for unit-tests (client- and server-side) Mocha for unit-tests (client- and server-side) Utility-libraries: Utility-libraries: ● Sinon.JS for stubbing/mocking ● Sinon.JS for stubbing/mocking ● Chai for readable assertions ● Chai for readable assertions

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?

DEVELOP COLLABORATE Application Testing Tools mocha karma chai Sinon.JS ng-sce nario Karma Karma BUILD ● Test-Runner ● Test-Runner ● Execute in-browser-tests in background ● Execute in-browser-tests in background ● Supports various browsers ● Supports various browsers (Chrome, Firefox, PhantomJS) (Chrome, Firefox, PhantomJS) ● Execute test continuously in background ● Execute test continuously in background

Now... … test execution is easy. But... … are there other tools to support developers? ● Static code analysis? ● Enforce code style? ● Compile JS/CSS?

DEVELOP COLLABORATE Application Testing Tools mocha karma chai jshint Sinon.JS less ng-sce nario JSHint JSHint ● Static code analysis ● Static code analysis ● Detect (syntax) errors ● Detect (syntax) errors BUILD ● Detect potential problems (bugs) ● Detect potential problems (bugs) ● Enforce code style ● Enforce code style LESS LESS ● Dynamic stylesheet language ● Dynamic stylesheet language ● Extends CSS ● Extends CSS

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!

DEVELOP COLLABORATE Grunt Grunt ● JavaScript Task Runner Application Testing Tools ● JavaScript Task Runner ● Task configuration in Gruntfile.js ● Task configuration in Gruntfile.js mocha karma ● Task execution with grunt-cli ● Task execution with grunt-cli chai jshint ● Great number of plugins ● Great number of plugins Sinon.JS less ● Very customizable ● Very customizable ng-sce nario BUILD grunt

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?

DEVELOP COLLABORATE Application Testing Tools mocha karma chai jshint Travis-CI Sinon.JS Travis-CI less ● Continuous Integration Service ● Continuous Integration Service ng-sce nario ● Seamless integration in GitHub projects ● Seamless integration in GitHub projects ● Easy configuration ● Easy configuration BUILD grunt INTEGRATE

Is something still missing? Yes, … … we want to go live! ● Automated deployment after successfull build? ● Deployment to different environments (production, staging, etc)?

DEVELOP COLLABORATE Application Testing Tools mocha karma chai jshint Sinon.JS less ng-sce nario Heroku Heroku ● Platform as a Service ● Platform as a Service ● Easy deployment via git-push ● Easy deployment via git-push BUILD grunt ● Continuous Delivery from Travis-CI ● Continuous Delivery from Travis-CI INTEGRATE DEPLOY

The final picture DEVELOP COLLABORATE Application Testing Tools mocha karma chai jshint Sinon.JS less ng-sce nario BUILD grunt INTEGRATE DEPLOY

● cucumber Anything else? ● watchservice ● nodejs-webdriver ● test-coverage ● ... ● ... DEVELOP COLLABORATE ● Twitter Bootstrap ● D3.js Application Testing Tools ● ... mocha karma chai jshint Sinon.JS less ng-sce nario BUILD grunt INTEGRATE DEPLOY ● rollback ● artifact archive ● schema-migration ● reporting ● ... ● ...

(Java) Alternative DEVELOP COLLABORATE Application Testing Tools JUnit Sonar CheckStyle Spring Test JProfiler JBehave BUILD INTEGRATE DEPLOY