Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 ›...
Transcript of Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 ›...
![Page 1: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/1.jpg)
![Page 2: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/2.jpg)
Никита Сидоров, разработчик интерфейсов, Яндекс.Маркет
Жизнь до Runtime
![Page 3: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/3.jpg)
Стадии:
Жизнь кода
3
› Принятие
› Написание
› Проверка написанной части силами разработчика
› Проверка всего кода различными видами автотестов
› Проверка руками тестировщика
› Проверки в релизе
…
› Runtime в пользовательском браузере
![Page 4: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/4.jpg)
Стадии:
Жизнь кода
4
› Принятие требований
› Написание
› Проверка написанной части силами разработчика
› Проверка всего кода различными видами автотестов
› Проверка руками тестировщика
› Проверки в релизе
…
› Runtime в пользовательском браузере
![Page 5: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/5.jpg)
Стадии:
Жизнь кода
5
› Принятие требований
› Написание
› Проверка написанной части силами разработчика
› Проверка всего кода различными видами автотестов
› Проверка руками тестировщика
› Проверки в релизе
…
› Runtime в пользовательском браузере
![Page 6: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/6.jpg)
Стадии:
Жизнь кода
6
› Принятие требований
› Написание
› Проверка написанной части силами разработчика
› Проверка всего кода различными видами автотестов
› Проверка руками тестировщика
› Проверки в релизе
…
› Runtime в пользовательском браузере
![Page 7: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/7.jpg)
Жизнь кода
7
Разработка Проверка
![Page 8: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/8.jpg)
〉Упростить жизнь разработчикам и тестировщикам
› Кол-во и качество кода, который нужно поддерживать
› Скорость CI проверок
› Скорость проверки
› Скорость релиза
Цель
8
![Page 9: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/9.jpg)
Статический анализ графа зависимостей модулей
![Page 10: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/10.jpg)
Граф
10
› Ориентированный
› В узлах модули
› Ребра описывают связь между модулями
![Page 11: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/11.jpg)
Граф
11
// a.js
import something from ‘./b.js';
a.js b.js
![Page 12: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/12.jpg)
Граф
12
// a.js
const something = require(‘./b.js’);
a.js b.js
![Page 13: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/13.jpg)
Граф
13
// a.js
const something = require(‘./b.js’);
a.js b.js
![Page 14: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/14.jpg)
Построение графа
![Page 15: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/15.jpg)
〉Arkit — https://github.com/dyatko/arkit
〉Madge — https://github.com/pahen/madge
〉Dependency-cruiser — https://github.com/sverweij/dependency-cruiser
Готовые библиотеки
15
![Page 16: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/16.jpg)
Как строить
16
Ваша тулза на любимом ЯП с использованием AST/Regex
› Вариант для сложных проектов с несколькими системами сборок, неочевидными зависимостями на уровне fs
Ваша любимая система сборки
› Вариант для большинства типовых проектов
![Page 17: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/17.jpg)
AST
17
› babel — https://github.com/babel/babel
› esprima — https://github.com/jquery/esprima
› semantic — https://github.com/github/semantic
› etc.
![Page 18: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/18.jpg)
CommonJS + ESM
18
![Page 19: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/19.jpg)
ESM
19
![Page 20: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/20.jpg)
20
![Page 21: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/21.jpg)
ESM + CJS vs ESM
21
AST
› ESM + CJS : 237 секунд
› ESM: 112 секунд
Regex
› ESM: 12 секунд
![Page 22: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/22.jpg)
webpack --profile --json > stats.json
Строит при помощи AST, используется acorn
Плюсы:
› Строго определены входные точки — entry
› Поддержка актуального синтаксиса
› Этап построения графа уже выполняется при сборке
Минусы:
› Не учитывает кастомные связи, если они не описаны
› Придется реально собрать проект
Система сборки
22
![Page 23: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/23.jpg)
23
"modules": [ { "id": 0, "identifier": "/Users/nickshevr/Documents/TS/nooby-3-shake/src/data.json", "name": "./src/data.json", "index": 54, "index2": 52, "size": 9, "cacheable": true, "built": true, "optional": false, "prefetched": false, "chunks": [ 0 ], "issuer": "/Users/nickshevr/Documents/TS/nooby-3-shake/node_modules/babel-loader/lib/index.js??ref--4!/Users/nickshevr/Documents/TS/nooby-3-shake/src/fp.js", "issuerId": null, "issuerName": "./src/fp.js", "issuerPath": [ { "id": null, "identifier": "/Users/nickshevr/Documents/TS/nooby-3-shake/node_modules/babel-loader/lib/index.js??ref--4!/Users/nickshevr/Documents/TS/nooby-3-shake/src/index.js", "name": "./src/index.js" }, {
![Page 24: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/24.jpg)
24
"modules": [ { "name": "./src/data.json", "reasons": [ { "module": "./src/index.js", "type": "harmony side effect evaluation", }, { "module": "./src/fp.js", "type": "harmony side effect evaluation", }, ], "usedExports": [ "default" ], "providedExports": [ "0", "1", "2", "default" ], }, ... ]
![Page 25: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/25.jpg)
25
"modules": [ { "name": "./src/data.json", "reasons": [ { "module": "./src/index.js", "type": "harmony side effect evaluation", }, { "module": "./src/fp.js", "type": "harmony side effect evaluation", }, ], "usedExports": [ "default" ], "providedExports": [ "0",
![Page 26: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/26.jpg)
26
{ "module": "./src/fp.js", "type": "harmony side effect evaluation", }, ], "usedExports": [ "default" ], "providedExports": [ "0", "1", "2", "default" ], }, ... ]
![Page 27: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/27.jpg)
Webpack Analyze
27https://webpack.github.io/analyse
![Page 28: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/28.jpg)
Свое решение
28
Типы связей:
› В рамках системы модулей (cjs, esm, amd)
› Связанные с fs (frameworks, plugins, etc.)
![Page 29: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/29.jpg)
Пакет config
29
![Page 30: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/30.jpg)
Пакет config
30
> ls -la config/ | awk '{print $1" "$10}'
-rw-r--r-- default.js -rw-r--r-- development.js -rw-r--r-- production.js
![Page 31: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/31.jpg)
Пакет config
31
const config = require(‘config');
// equivalent
require(`config/${process.env.NODE_ENV}.js`);
![Page 32: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/32.jpg)
Custom Dependency Injection
32https://itnext.io/dependency-injection-in-react-using-inversifyjs-a38ff0c6601
![Page 33: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/33.jpg)
Эвристический анализ
![Page 34: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/34.jpg)
Следить за техдолгом
34
![Page 35: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/35.jpg)
Следить за техдолгом
35
48
![Page 36: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/36.jpg)
Объяснять важность
36
![Page 37: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/37.jpg)
Поиск дефектов в графе
![Page 38: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/38.jpg)
Поиск дефектов
38
Типы дефектов:
› Циклическая зависимость модулей
› Неиспользуемый модуль (dead code elimination)
![Page 39: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/39.jpg)
Циклические зависимости
39
Задача поиска цикла в ориентированном графе, берем любой алгоритм. Теряет актуальность при использовании esm (import).
![Page 40: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/40.jpg)
40
![Page 41: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/41.jpg)
Неиспользуемые модули
41
Ищем в построенном графе компоненты связности, помечаем те, для которых нет пути до entry.
c.js d.js
entry.js
a.js
b.js
data.json
![Page 42: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/42.jpg)
Неиспользуемые модули
42
В случае со сборщиком вычитаем из множества всех файлов множество файлов, попавших в сборку:
Все файлы:
{ a.js, b.js, c.js, d.js, data.json, entry.js } — 7
Попавшие в сборку:
{ a.js, b.js, data.json, entry.js } — 5
Результат вычитания:
{ c.js, d.js } — 2
![Page 43: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/43.jpg)
43
+250 -43,768
![Page 44: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/44.jpg)
44
+250 -43,768
Это мое достижение в рамочке
![Page 45: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/45.jpg)
45https://devaka.ru/amulet
![Page 46: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/46.jpg)
46
MARKET-3877: Заиспользовал thanos-js
![Page 47: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/47.jpg)
47
MARKET-3877: Удаляем ненужные зависимости by diffector
![Page 48: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/48.jpg)
Diffector
Идентификация изменений
![Page 49: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/49.jpg)
CLI инструмент идентификации изменений для конечного пользователя по изменениям в коде приложения.
Главные мейнтенеры:
Артур Кенжаев @enload
Василий Крылов @extg
Внутренняя разработка команды Маркета, в данный момент не opensource.
Diffector
49
![Page 50: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/50.jpg)
Алгоритм
50
1. Строим граф зависимостей модулей
2. Через vcs получаем список измененных файлов, помечаем такие узлы в графе
git diff master..currentBranch --stat -name-only
3. Для каждого измененного файла ищем пути до entry, помечаем такие
4. Соотносим entry со страницами приложения
![Page 51: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/51.jpg)
Идентификация изменений
51
Тестирование:
› Уменьшаем скоуп страниц для тестирования
› Ускоряем ручной регресс
› Ускоряем прогон автотестов
Разработка:
› Нивелируем участие в ручном регрессе
![Page 52: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/52.jpg)
Пример fs
52
src/pages.desktop ├── BindBonusPage ├── BonusPage ├── BonusRulesPage ├── BundleClickOut ├── CartPage ├── CertificateRulesPage ├── ExamplePage │ ├── ExamplePage.deps.js │ ├── controller.js │ ├── index.js │ └── view.js ...
![Page 53: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/53.jpg)
Diffector
53
> diffector
Changed pages (1) • BindBonusPage
Pages: 1
![Page 54: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/54.jpg)
54
> diffector -v
Changed pages (1) • BindBonusPage: • src/widgets/pages.desktop/BindBonusPage/controller.js • src/widgets/pages.desktop/BindBonusPage/index.js
Pages: 1
![Page 55: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/55.jpg)
55
> diffector
Changed pages (9) • Settings • CheckoutPage • OrdersConfirmationPage • PaymentPage • SuppliersInfoByOrder • SuppliersInfoByOffers • CartPage • SkuReviewsPage • BindBonusPage
Pages: 9
![Page 56: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/56.jpg)
56
> diffector -v
Changed pages (9) • Settings: • src/uikit/components/Text/index.js • CheckoutPage: • src/uikit/components/Text/index.js • OrdersConfirmationPage: • src/uikit/components/Text/index.js • PaymentPage: • src/uikit/components/Text/index.js • SuppliersInfoByOrder: • src/uikit/components/Text/index.js • SuppliersInfoByOffers: • src/uikit/components/Text/index.js
![Page 57: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/57.jpg)
57
> diff —git
@@ -11,7 +11,7 @@ import styles from './styles.styl'; const cx = classNames.bind(styles);
export type Props = { + /** Текст */ - /** Дочерний компонент */ children: ?React.Node, /** Размер */ size?: TypoSize,
![Page 58: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/58.jpg)
Проблема точности
58
Проблема:
При изменении файла, являющегося в графе вершиной с высокой степенью, наш подход не дает хорошего результата.
В текущей парадигме мы отождествляем файл в fs и модуль, поэтому кандидатами для проверок станет большое кол-во страниц.
![Page 59: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/59.jpg)
I18n
59
i18n.json
b.js
a.js
c.js
d.js
e.js
f.js
g.js
h.js
![Page 60: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/60.jpg)
Тришейкинг
![Page 61: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/61.jpg)
Тришейкинг
61
Решение:
За узел в графе принимаем не модуль, а единицу его экспорта, если ее можно вычленить.
![Page 62: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/62.jpg)
Тришейкинг
62
a.js b.js
b.js-export2
a.js b.js-export1
![Page 63: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/63.jpg)
Пример #1
63
const a = 5;
export const b = () => a;
export const c = () => b();
export const f = () => {...};
![Page 64: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/64.jpg)
Пример #1
64
const a = 5;
export const b = () => a;
export const c = () => b();
export const f = () => {...};
![Page 65: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/65.jpg)
Пример #2
65
import {GlobalContext} from '@/somepath';
export const modify = (key,value) => { GlobalContext.set(key, value); }
![Page 66: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/66.jpg)
Интерактивный режим
66
<d> - diff <e> - expand <l> - log
@yandex-market/beru: ❯◉ src/uikit/components/Text/index.js (8) ◉ src/legacy/modules/DataCollector/garsons/GroupSkuByIds.js (SkuReviewsPage) ◉ src/containers/Snippet/ShowPlaceSnippetContainer.js (SkuReviewsPage) ◉ src/containers/Snippet/SkuSnippetContainer.js (SkuReviewsPage, CartPage) ◉ src/containers/Snippet/util.js (SkuReviewsPage, CartPage) ◉ src/entities/cart/cartItemState/reducers.js (SkuReviewsPage, CartPage)
![Page 67: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/67.jpg)
67
> diff —git
@@ -11,7 +11,7 @@ import styles from './styles.styl'; const cx = classNames.bind(styles);
export type Props = { + /** Текст */ - /** Дочерний компонент */ children: ?React.Node, /** Размер */ size?: TypoSize,
![Page 68: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/68.jpg)
Интерактивный режим
68
@yandex-market/beru: ◯ src/uikit/components/Text/index.js (8) ◉ src/legacy/modules/DataCollector/garsons/GroupSkuByIds.js (SkuReviewsPage) ❯◯ src/containers/Snippet/ShowPlaceSnippetContainer.js (SkuReviewsPage)
![Page 69: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/69.jpg)
Интерактивный режим
69
@yandex-market/beru: ◯ src/uikit/components/Text/index.js (8) ◉ src/legacy/modules/DataCollector/garsons/GroupSkuByIds.js (SkuReviewsPage) ❯◯ src/containers/Snippet/ShowPlaceSnippetContainer.js (SkuReviewsPage)
![Page 70: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/70.jpg)
Интерактивный режим
70
@yandex-market/beru: ◯ src/uikit/components/Text/index.js (8) ◉ src/legacy/modules/DataCollector/garsons/GroupSkuByIds.js (SkuReviewsPage) ❯◯ src/containers/Snippet/ShowPlaceSnippetContainer.js (SkuReviewsPage)
![Page 71: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/71.jpg)
Diffector для тестов
![Page 72: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/72.jpg)
72
![Page 73: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/73.jpg)
73
Diffector
![Page 74: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/74.jpg)
74
Хранилище кейсов
![Page 75: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/75.jpg)
75
![Page 76: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/76.jpg)
Идентификация тесткейсов
76
Запрос в тестовое хранилище:
"Test-run type" = "Ручной регресс" AND isAutotest = false AND ("PageId" = "market:bind-bonus" OR "SOX" = "yes")
> diffector
Changed pages (1) • BindBonusPage
Pages: 1
![Page 77: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/77.jpg)
Идентификация тесткейсов
77
Запрос в тестовое хранилище:
"Test-run type" = “Автотесты на стенде" AND isAutotest = true AND ("PageId" = "market:bind-bonus" OR "SOX" = "yes")
> diffector
Changed pages (1) • BindBonusPage
Pages: 1
![Page 78: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/78.jpg)
Переносим в CI
78
![Page 79: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/79.jpg)
Переносим в CI
79
До:
![Page 80: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/80.jpg)
Переносим в CI
80
После:
![Page 81: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/81.jpg)
Ручной регресс
81
![Page 82: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/82.jpg)
В идеальном мире
82
Пусть в бандлах нет недостижимого для пользователя кода. Тогда из собранного бандла можем получать множество используемых модулей, сопоставляя его с множеством измененных в коде.
![Page 83: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/83.jpg)
TL;DR
83
› Практическая польза — для больших команд
› Начинайте с использования данных вашей системы сборки
› Собираете — храните
› Храните — анализируйте
› Улучшайте жизнь ваших разработчиков
![Page 85: Nickshevr Жизнь до runtime WSD · 2019. 10. 19. · Стадии: Жизнь кода 4 › Принятие требований › Написание › Проверка](https://reader034.fdocuments.us/reader034/viewer/2022051900/5fef15d2cfe73f2969485413/html5/thumbnails/85.jpg)
Diffector в opensource
85
На данный момент сильно завязан на инфраструктуру Яндекс.Маркета (enb, startrack, etc.)
Планируем вынести функционал построения и сравнения графа в отдельный модуль в OS