Konstantin Krivlenia - "Continuous integration for frontend"

50

Transcript of Konstantin Krivlenia - "Continuous integration for frontend"

Page 1: Konstantin Krivlenia - "Continuous integration for frontend"
Page 2: Konstantin Krivlenia - "Continuous integration for frontend"

goo.gl/2fXwj1

Page 3: Konstantin Krivlenia - "Continuous integration for frontend"

git pull origin master

Page 4: Konstantin Krivlenia - "Continuous integration for frontend"
Page 5: Konstantin Krivlenia - "Continuous integration for frontend"

Как избежатьnpm test

/ci/cool-module.js:3

return myCoolFunction();

^

ReferenceError: myCoolFunction is not defined

...

01.

02.

03.

04.

05.

Page 6: Konstantin Krivlenia - "Continuous integration for frontend"

const coolModule = require('../cool-module')

const assert = require('assert')

describe('test cool module', () => {

it(`Answer to the Ultimate Question of Life,

the Universe, and Everything`, () => {

assert.equal(42, coolModule.doSomething())

})

})

Page 7: Konstantin Krivlenia - "Continuous integration for frontend"
Page 8: Konstantin Krivlenia - "Continuous integration for frontend"

error no-tabs

error

Как избежатьnpm run lint

/ci/cool-module.js

6:2 Unexpected tab character

6:3 Expected indentation of 4 spaces but found 2 tabs

✖ 2 problems (2 errors, 0 warnings)

01.

02.

03.

04.

Page 9: Konstantin Krivlenia - "Continuous integration for frontend"

Размер сборкиИмя файла Размер до Размер после

bundle.js 72.1 kB 340 kB

Page 10: Konstantin Krivlenia - "Continuous integration for frontend"

Измененияconst $ = require('jquery');

$('someId').hide();

01.

02.

Page 11: Konstantin Krivlenia - "Continuous integration for frontend"

Как избежатьnpm run check-file-size

Size of bundle is huge. Expected 100 but actual 102

Page 12: Konstantin Krivlenia - "Continuous integration for frontend"

Git Hooks.git/pre-commit

npm test

npm run lint

npm run check-file-size

01.

02.

03.

Page 13: Konstantin Krivlenia - "Continuous integration for frontend"

nlf/precommit-hook...

"pre-commit": ["lint", "test"]

01.

02.

Page 14: Konstantin Krivlenia - "Continuous integration for frontend"

Отключаем pre-commit hookgit commit --no-verify -m "Я знаю, что я делаю"

Page 15: Konstantin Krivlenia - "Continuous integration for frontend"

Setup CI.travis.yml

language: node_js

node_js:

- "6"

script:

npm run travis

Page 16: Konstantin Krivlenia - "Continuous integration for frontend"

.package.json

{

"scripts": {

"travis": "npm run test && npm run lint && npm run check…"

}

Page 17: Konstantin Krivlenia - "Continuous integration for frontend"
Page 18: Konstantin Krivlenia - "Continuous integration for frontend"
Page 19: Konstantin Krivlenia - "Continuous integration for frontend"
Page 20: Konstantin Krivlenia - "Continuous integration for frontend"

...

env:

matrix:

- TEST_TYPE=test

- TEST_TYPE=lint

- TEST_TYPE=size

script:

- |

if [ "$TEST_TYPE" = test ]; then

npm test

elif [ "$TEST_TYPE" = size ]; then

npm run check-file-size

elif [ "$TEST_TYPE" = lint ]; then

npm run lint

Page 21: Konstantin Krivlenia - "Continuous integration for frontend"
Page 22: Konstantin Krivlenia - "Continuous integration for frontend"
Page 23: Konstantin Krivlenia - "Continuous integration for frontend"

Jenkins

Page 24: Konstantin Krivlenia - "Continuous integration for frontend"
Page 25: Konstantin Krivlenia - "Continuous integration for frontend"
Page 26: Konstantin Krivlenia - "Continuous integration for frontend"
Page 27: Konstantin Krivlenia - "Continuous integration for frontend"

pipeline {

agent {

dockerfile {

filename 'Dockerfile'

}

}

stages {

stage('build') {

steps {

sh 'npm install'

}

}

...

}

Page 28: Konstantin Krivlenia - "Continuous integration for frontend"
Page 29: Konstantin Krivlenia - "Continuous integration for frontend"
Page 30: Konstantin Krivlenia - "Continuous integration for frontend"
Page 31: Konstantin Krivlenia - "Continuous integration for frontend"
Page 32: Konstantin Krivlenia - "Continuous integration for frontend"
Page 33: Konstantin Krivlenia - "Continuous integration for frontend"

docker run -d --name jenkins -p

8080:8080 -v $PWD/jenkins:/var/jenkins_home

-v /var/run/docker.sock:/var/run/docker.sock

-t logimethods/blueocean

Page 34: Konstantin Krivlenia - "Continuous integration for frontend"

Другие CI• https://concourse.ci

• https://circleci.com

• teamcity

Page 35: Konstantin Krivlenia - "Continuous integration for frontend"

Бенефиты

Page 36: Konstantin Krivlenia - "Continuous integration for frontend"

Раннее выявлениебагов

Page 37: Konstantin Krivlenia - "Continuous integration for frontend"

Избежание затяжныхрелизов

Page 38: Konstantin Krivlenia - "Continuous integration for frontend"

Артефакты сборок

Page 39: Konstantin Krivlenia - "Continuous integration for frontend"

Прививаниедисциплины в

команде

Page 40: Konstantin Krivlenia - "Continuous integration for frontend"

Один шаг к непрерывнойдоставке

Page 41: Konstantin Krivlenia - "Continuous integration for frontend"

Снятие метрик длякода

Page 42: Konstantin Krivlenia - "Continuous integration for frontend"

Покрытие кода

Page 43: Konstantin Krivlenia - "Continuous integration for frontend"

Сложность кода

Page 44: Konstantin Krivlenia - "Continuous integration for frontend"

Недостатки

Page 45: Konstantin Krivlenia - "Continuous integration for frontend"

Настройка системы

Page 46: Konstantin Krivlenia - "Continuous integration for frontend"

Не всегда отображаетреальную ситуацию

Page 47: Konstantin Krivlenia - "Continuous integration for frontend"

Долгий отклик

Page 48: Konstantin Krivlenia - "Continuous integration for frontend"

Нестабильностьсистемы

Page 49: Konstantin Krivlenia - "Continuous integration for frontend"

Не информативность

Page 50: Konstantin Krivlenia - "Continuous integration for frontend"

Вопросы?