Tweet
Tweet

Slide 1

Slide 1 text

Adlen Jean-Rémi David Afane Beaudoin Nowinsky The agile glimpse

Slide 2

Slide 2 text

DevOps

Slide 3

Slide 3 text

VCS CI Analytics Coverage

Slide 4

Slide 4 text

D3.js

Slide 5

Slide 5 text

D3.js 1. Representation 2. Easy integration with Angular.js 3. Directives + global process (init/update/watcher)

Slide 6

Slide 6 text

Initialization svg = d3.select $element[0] .select 'svg' node = svg.selectAll '.node' .data projectsData .enter() .append 'g' circlesContainer = node.append 'g'

Slide 7

Slide 7 text

One project Project circlesContainer.append 'circle'

Slide 8

Slide 8 text

A small project Project A large project Project circle.attr 'r', bubbleSize

Slide 9

Slide 9 text

Latest release 6 months ago Latest release yesterday Project Project circle.style 'opacity', bubbleOpacity

Slide 10

Slide 10 text

Build failed Build passed Project Project circle.style 'fill', bubbleColor

Slide 11

Slide 11 text

Only a few tests Large test coverage Project Project circle.style 'fill', (d) -> 'url(#gradient-' + bubbleId(d) + ')'

Slide 12

Slide 12 text

Production down Production up Project Project circle.classed 'offline', (d) -> !d.online (+ css animation)

Slide 13

Slide 13 text

Not agile :-( Really agile :-) 10 Project 2 Project circlesContainer .append 'text' .text bubbleScore

Slide 14

Slide 14 text

Angular / D3.js integration svg = d3.select $element[0] .select 'svg' node = svg.selectAll '.node' .data projectsData .enter() .append 'g' circlesContainer = node.append 'g'

Slide 15

Slide 15 text

Angular / D3.js integration svg = d3.select $element[0] .select 'svg' node = svg.selectAll '.node' .data $scope.projects .enter() .append 'g' circlesContainer = node.append 'g'

Slide 16

Slide 16 text

Angular / D3.js integration angular.module 'metrix.dashboard' .directive 'metrixProjectsBubbles', -> template: '' link: ($scope, $element) -> ...

Slide 17

Slide 17 text

Gathering data

Slide 18

Slide 18 text

Gathering data 1. Data generation 2. Getting real data: Github / Travis CI 3. CORS

Slide 19

Slide 19 text

Using APIs .factory ‘DataProvider’, ($q, $http) -> getContributors = (url) -> deferred = $q.defer() $http { method: 'GET', url: url } .success (data) -> deferred.resolve data.length .error -> deferred.resolve 0 deferred.promise getContributors ‘URL_TO_API’ .then contributors -> project.contributors = contributors

Slide 20

Slide 20 text

Bootstrapping the project

Slide 21

Slide 21 text

Bootstrapping the project Bower -> easy package manager Gulp -> stream building system

Slide 22

Slide 22 text

Gulpfile structure # Set up gulp = require 'gulp' # Plugins coffee = require 'gulp-coffee' # and so on # Parameters parameters = require '../config/parameters.coffee' # Tasks gulp.task 'build', ['copy', 'compile'] # Definition of task’s dependencies gulp.task 'copy', ['assets', 'vendors'] # A dependency’s dependencies gulp.task 'assets', [], -> … # Down to each elementary task gulp.task 'compile', ['copy', 'coffee', 'jade', 'less']

Slide 23

Slide 23 text

Gulpfile tasks gulp.task 'coffee', [], -> gulp.src parameters.app_path + '/**/*.coffee' .pipe coffee bare: true .pipe concat parameters.app_main_file .pipe gulp.dest parameters.web_path + '/js' .pipe filesize() .on 'error', gutil.log

Slide 24

Slide 24 text

Contribute! github.com/jrbeaudoin/devops-metrix

Slide 25

Slide 25 text

The agile glimpse jrbeaudoin.github.io/devops-metrix github.com/jrbeaudoin/devops-metrix david.nowinsky.net/gulp-book/ Adlen Jean-Rémi David Afane Beaudoin Nowinsky