JS Lab2017, 25 марта, Одесса Андрей Кучеренко (Lead Software Engineer at EPAM Systems) Разработка мультипакетных приложения: причины, способы, риски Доклад раскроет тему разработки многопакетных приложений на javascript. Доклад сделан на основе реального опыта внедрения подобной разработки на проекте. Все материалы: http://jslab.in.ua/ Организаторы: http://geekslab.org.ua/

1. Multi Packages
Appications

2. Андрей Кучеренко
Lead Software Engineer @ EPAM Systems
kucherenko

3. Project Evaluation

5. Test Suites: 55 passed, 55 total
Tests: 303 passed, 303 total
Snapshots: 0 total
Time: 5.131s
Test Suites: 458 passed, 458 total
Tests: 3007 passed, 3007 total
Snapshots: 0 total
Time: 90.131s
|----------|
| % Lines |
|----------|
| 100|
Было СталоUnit Tests
Coverage
|----------|
| % Lines |
|----------|
| 89.7 |
$ tslint 'packages/*/{src/**/,test/**/}*.ts{,x}' --force
Done in 0.47s.
Found 0 exact clones with 0 duplicated lines in 0 files
0.0% (0 lines) duplicated lines out of 2302 total lines of code.
Done in 0.18s.
Took 2 min 56 sec on Jenkins
Linters
Duplications
CI
$ tslint 'packages/*/{src/**/,test/**/}*
Done in 19.47s.
Found 69 exact clones with 1467 duplicat
4.97% (1467 lines) duplicated lines out
Done in 2.75s.
Took 10 min 47 sec on Jenkins

6. Team 1
Git
Team 1

7. Project Specific

9. pkg module component service
pkg - 1.1 1.0 -
module - - 0.9 1.0
component - - - 2.0
service - - - -

10. Проблемы NPM
Тяжело управлять всеми пакетами одновременно
Тяжело следить за версиями
Тяжело уследить за зависимостями

11. Monorepos Projects

12. https://lernajs.io/

13. Возможности Lerna
Init project
Bootstrap project
Publish project
Manage versions
npm link internal packages

14. ├── lerna.json
├── package.json
└── packages
├── awesome-component
│ └── package.json
├── awesome-module
│ └── package.json
├── awesome-package
│ └── package.json
└── awesome-service
└── package.json
{
"lerna": "2.0.0-beta.38",
"packages": [
"packages/*"
],
"version": "0.0.1"
}

15. ➜ awesome-lerna git:(master) ✗ lerna init
Lerna v2.0.0-beta.38
Updating package.json.
Updating lerna.json.
Successfully created Lerna files
➜ awesome-lerna git:(master) ✗ lerna bootstrap
Lerna v2.0.0-beta.38
Bootstrapping 4 packages
Preinstalling packages
Symlinking packages and binaries
Postinstalling packages
Prepublishing packages
➜ awesome-lerna git:(master) ✗ lerna publish
Lerna v2.0.0-beta.38
Current version: 0.0.1
Checking for updated packages...
Comparing with: v0.0.1
➜ awesome-lerna git:(master) ✗ lerna run test
Lerna v2.0.0-beta.38
Successfully ran npm script 'test' in packages:
- awesome-component
- awesome-module
- awesome-package
- awesome-service
➜ awesome-lerna git:(master) ✗ lerna exec -- rm -rf ./node_modules
Lerna v2.0.0-beta.38

16. Проблемы Lerna
Зависимости с разными версиями у пакетов
npm link и все, что с этим связано
Много node_modues

18. Возможности @knitjs
Все зависимости в одном package.json
Нет node_modules в каждом репозитории
Показывает неиспользуемые и неустановленые
зависимости

19. ✗ create-knit-app lets-start-knitting
info creating a new knit app in lets-start-knitting
success finished creating your project!
info start exploring by running:
cd lets-start-knitting
yarn start
info read more about what you can do with knit:
info https://github.com/knitjs/knit

20. ➜ lets-start-knitting git:(master) ✗ tree
.
├── modules
│ └── node_modules
│ ├── @myscope
│ │ ├── body-component
│ │ │ ├── help.png
│ │ │ ├── index.js
│ │ │ ├── list_missing.png
│ │ │ ├── list.png
│ │ │ ├── package.json
│ │ │ ├── validate_missing.png
│ │ │ ├── validate_unused.png
│ │ │ └── valid.png
│ │ └── header-component
│ │ ├── index.js
│ │ ├── knit_logo.svg
│ │ └── package.json
│ ├── page-component
│ │ ├── index.js
│ │ ├── package.json
│ │ └── __tests__
│ │ └── page-component.test.js
│ └── webpack_entry
│ ├── index.html
│ ├── index.js
│ ├── package.json
│ └── README.md
├── node_modules
├── package.json
└── yarn.lock
➜ lets-start-knitting git:(master) ✗ tail modules/node_modules/@myscope/header-component/package.json
{
"name": "@myscope/header-component",
"version": "0.0.0",
"browser": true
}

21. ➜ lets-start-knitting git:(master) ✗ yarn knit build
yarn knit v0.21.3
$ knit build
✔ discovering modules
✔ validating package.json
✔ discovering modules
✔ validating package.json
✔ check for missing dependencies
✔ check for unused dependencies
✔ reading package.json of modules
✔ getting last tag
✔ determining updated modules since last release
✔ rebuilding project
✔ rebuilding updated modules
✔ @myscope/body-component
✔ @myscope/header-component
✔ page-component
Done in 14.92s.

22. ➜ lets-start-knitting git:(master) ✗ yarn knit help
yarn knit v0.21.3
$ knit help
Commands:
list [modules...] list modules and their dependencies
validate validate modules for release
server start a dev server
schema update graphql schema
version <version> version updated modules
build build updated modules
stitch update the package.json of all modules with knitted
dependencies and project meta data
publish publish updated modules
release <version> run full release pipeline on updated modules.
version > build > knit > publish > push

23. ➜ lets-start-knitting git:(master) ✗ yarn knit list
yarn knit v0.21.3
$ knit list
✔ discovering modules
✔ reading package.json of modules
info showing dependencies for 3 modules
- @myscope/body-component (0.0.0) [2 dependencies]
- @myscope/header-component (0.0.0) [2 dependencies]
- page-component (0.0.0) [4 dependencies]
Done in 0.79s.
➜ lets-start-knitting git:(master) ✗ yarn knit validate
yarn knit v0.21.3
$ knit validate
✔ looking for `node_modules` in .*ignore files
✔ discovering modules
✔ validating package.json
✔ check for missing dependencies
✔ check for unused dependencies
Done in 0.87s.

24. Проблемы @knitjs
Работает только с babel, не поддерживает
typescript, coffeescript, etc.
Тяжело менять под свои нужды
Работа с версиями только в одном стиле
Не очень большое комьюнити

26. Дано: