Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Useful tools for
JS developers
Alexey Volkov • March 30th–31st, 2018
Hello
Alexey Volkov
Front end architect
Rumble, Tel Aviv / Kyiv
alexey@rumble.me
@roskoalexey
github.com/rosko
bit.ly/jsfest-tools
Let’s do it right
1. Start a new project
2. Set up the working
environment
3. Debug
4. Continuous
integration
5. Documenta...
1. Start a new project
How to start
1. Manually
2. Starter kit / boilerplate
3. Code generator
1. Manually
2. Starter kits / boilerplates
2. Starter kits / boilerplates
angular-starter
9615 ★
Angular 5, Ahead of Time Compile, Router,
Forms, Http, Services, Tes...
2. Starter kits / boilerplates
angular-seed
13246 ★
AngularJS, Karma, Protractor, Jasmine, Http
server
2. Starter kits / boilerplates
react-starter-kit
17269 ★
react-boilerplate 17602 ★
react-redux-boilerplate
electron-react-...
3. Code generators
Yeoman
● 7000+ generators for almost everything
● Helps to generate both entire projects and
some speci...
3. Code generators
Angular CLI
16647 ★
● npm install -g @angular/cli
● ng new PROJECT-NAME
● ng g component my-new-compone...
3. Code generators
Ember CLI
3208 ★
● npm install -g ember-cli
● ember new my-new-app
● ember generate model user
● ember ...
3. Code generators
create-react-app 46063 ★
● npx create-react-app my-app
3. Code generators
nwb
3184 ★
● npm install -g nwb
● nwb new react-app my-app
● nwb new web-app my-app
● nwb new react-com...
npm install -g nwb
nwb init react-app
npm install
npm i --save-dev nwb-sass
npm start
https://github.com/rosko/js-tools/tr...
How to start. TLDR
1. $ git init
2. $ git clone
3. $ generate-me-something
2. Set up the working
environment
Working environment
npm -g
● npm install -g nwb
● nwb new web-app my-app
npx
● npx nwb new web-app my-app
Working environment
EditorConfig — editorconfig.org
[*.js]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style =...
.editorconfig
https://github.com/rosko/js-tools/tree/02-editorconfig
Working environment
Prettier
● CLI / npm module
● JS / JSX / TypeScript / Flow / CSS / Less /
SCSS / Vue / JSON / GraphQL ...
npm i --save-dev prettier
...
npm run prettier
https://github.com/rosko/js-tools/tree/03-prettier
Working environment
husky
{
"scripts": {
"precommit": "npm run prettier
&& npm test",
"prepush": "npm test",
}
}
npm i --save-dev husky
...
git commit ...
https://github.com/rosko/js-tools/tree/04-husky
https://github.com/rosko/js-tool...
Working environment
ESLint
● CLI / npm module
● Formatting rules
● Code-quality rules
● Extremely extendable (using plugin...
npm i --save-dev eslint
eslint --init
https://github.com/rosko/js-tools/tree/06-eslint
npm i --save-dev stylelint
stylelint-scss
stylelint src/**/*.scss
https://github.com/rosko/js-tools/tree/07-stylelint
Working environment
lint-staged
● Allows to run linters/tests/prettier/any on
git staged files
npm i --save-dev lint-staged
https://github.com/rosko/js-tools/tree/08-lint-staged
Working environment
commitlint
Checks your git commit messages
{
"scripts": {
"commitmsg": "commitlint -e $GIT_PARAMS"
}
}
npm install --save-dev @commitlint/config-
conventional @commitlint/cli
git commit -m ...
https://github.com/rosko/js-tool...
Working environment
commitizen
Helps you to write good commit messages
npm i --save-dev commitizen
... config ...
npm run cz
https://github.com/rosko/js-tools/tree/10-commitizen
Working environment. TLDR
● .editorconfig
● prettier
● husky
● eslint
● lint-staged
● commitlint / commitizen
3. Debug
Chrome Dev Tools
Chrome Dev Tools
Chrome Dev Tools
Chrome Dev Tools
Chrome Dev Tools
https://umaar.com/dev-tips/
V8 Inspector
V8 Inspector
4. Continuous integration
.travis.yml
.travis.yml
sudo: false
language: node_js
node_js:
- 8
before_install:
- npm install codecov.io coveralls
after_success:
-...
Travis CI
Coveralls
Codecov.io
.circleci/config.yml
Greenkeeper.io
Continuous integration
5. Documentation
Working environment
Conventional Changelog
Automatically generates a changelog for you
from git history
npm install --save-dev conventional-
changelog-cli
... config ...
npm run changelog
https://github.com/rosko/js-tools/tree...
npm install --save-dev
esdoc esdoc-standard-plugin ...
... config ...
npm run doc
https://github.com/rosko/js-tools/tree/1...
ESDoc
https://rosko.github.io/js-tools/
npm install --save-dev gh-pages
npm i --save-dev @storybook/react
... config ...
npm run storybook
https://github.com/rosko/js-tools/tree/13-storybook
Styleguidist
demo: https://react-styleguidist.js.org/examples/basic/
npm i --save-dev react-styleguidist
... config ...
npm run styleguide
https://github.com/rosko/js-tools/tree/14-styleguidi...
React Cosmos
6. Release
Working environment
unleash
Professionally publish your JavaScript
modules in one keystroke
npm i --save-dev unleash
unleash -m
https://github.com/rosko/js-tools/tree/15-unleash
Unleash
Questions,
please Alexey Volkov
Front end architect
Rumble, Tel Aviv / Kyiv
alexey@rumble.me
@roskoalexey
github.com/rosko...
JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки
JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки
JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки
JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки
JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки
JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки
You’ve finished this document.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next

Share

JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки

Во время доклада мы рассмотрим на практическом примере широкий набор инструментов, которые призваны облегчить жизни джаваскрипт разработчика и сделать сам процесс разработки удобным, приятным и эффективным. Мы пройдемся по всем стадиям технического развития проекта: от первого коммита и настройки рабочего окружения, до документации и деплоя. Рассмотрим самые разнообразные утилиты и сервисы для генерации кода, поддержки его качества, тестирования и многое другое, что обязательно станет вашей верной помощью в работе.

JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки

  1. 1. Useful tools for JS developers Alexey Volkov • March 30th–31st, 2018
  2. 2. Hello Alexey Volkov Front end architect Rumble, Tel Aviv / Kyiv alexey@rumble.me @roskoalexey github.com/rosko
  3. 3. bit.ly/jsfest-tools
  4. 4. Let’s do it right 1. Start a new project 2. Set up the working environment 3. Debug 4. Continuous integration 5. Documentation
  5. 5. 1. Start a new project
  6. 6. How to start 1. Manually 2. Starter kit / boilerplate 3. Code generator
  7. 7. 1. Manually
  8. 8. 2. Starter kits / boilerplates
  9. 9. 2. Starter kits / boilerplates angular-starter 9615 ★ Angular 5, Ahead of Time Compile, Router, Forms, Http, Services, Tests, E2E), Karma, Protractor, Jasmine, Istanbul, TypeScript, @types, TsLint, Codelyzer, Hot Module Replacement, and Webpack
  10. 10. 2. Starter kits / boilerplates angular-seed 13246 ★ AngularJS, Karma, Protractor, Jasmine, Http server
  11. 11. 2. Starter kits / boilerplates react-starter-kit 17269 ★ react-boilerplate 17602 ★ react-redux-boilerplate electron-react-boilerplate … https://reactjs.org/community/starter-kits.html
  12. 12. 3. Code generators Yeoman ● 7000+ generators for almost everything ● Helps to generate both entire projects and some specific parts/modules/components ● Losing popularity, but still alive ● Worth to try
  13. 13. 3. Code generators Angular CLI 16647 ★ ● npm install -g @angular/cli ● ng new PROJECT-NAME ● ng g component my-new-component
  14. 14. 3. Code generators Ember CLI 3208 ★ ● npm install -g ember-cli ● ember new my-new-app ● ember generate model user ● ember generate view user
  15. 15. 3. Code generators create-react-app 46063 ★ ● npx create-react-app my-app
  16. 16. 3. Code generators nwb 3184 ★ ● npm install -g nwb ● nwb new react-app my-app ● nwb new web-app my-app ● nwb new react-component newcomp ● nwb new web-module my-module
  17. 17. npm install -g nwb nwb init react-app npm install npm i --save-dev nwb-sass npm start https://github.com/rosko/js-tools/tree/01-nwb
  18. 18. How to start. TLDR 1. $ git init 2. $ git clone 3. $ generate-me-something
  19. 19. 2. Set up the working environment
  20. 20. Working environment npm -g ● npm install -g nwb ● nwb new web-app my-app npx ● npx nwb new web-app my-app
  21. 21. Working environment EditorConfig — editorconfig.org [*.js] charset = utf-8 end_of_line = lf indent_size = 4 indent_style = space insert_final_newline = true trim_trailing_whitespace = true
  22. 22. .editorconfig
  23. 23. https://github.com/rosko/js-tools/tree/02-editorconfig
  24. 24. Working environment Prettier ● CLI / npm module ● JS / JSX / TypeScript / Flow / CSS / Less / SCSS / Vue / JSON / GraphQL / Markdown ● ESLint integration
  25. 25. npm i --save-dev prettier ... npm run prettier https://github.com/rosko/js-tools/tree/03-prettier
  26. 26. Working environment husky { "scripts": { "precommit": "npm run prettier && npm test", "prepush": "npm test", } }
  27. 27. npm i --save-dev husky ... git commit ... https://github.com/rosko/js-tools/tree/04-husky https://github.com/rosko/js-tools/tree/05-prettier-and-husky
  28. 28. Working environment ESLint ● CLI / npm module ● Formatting rules ● Code-quality rules ● Extremely extendable (using plugins) Same for TSLint and Stylelint
  29. 29. npm i --save-dev eslint eslint --init https://github.com/rosko/js-tools/tree/06-eslint
  30. 30. npm i --save-dev stylelint stylelint-scss stylelint src/**/*.scss https://github.com/rosko/js-tools/tree/07-stylelint
  31. 31. Working environment lint-staged ● Allows to run linters/tests/prettier/any on git staged files
  32. 32. npm i --save-dev lint-staged https://github.com/rosko/js-tools/tree/08-lint-staged
  33. 33. Working environment commitlint Checks your git commit messages { "scripts": { "commitmsg": "commitlint -e $GIT_PARAMS" } }
  34. 34. npm install --save-dev @commitlint/config- conventional @commitlint/cli git commit -m ... https://github.com/rosko/js-tools/tree/09-commitlint
  35. 35. Working environment commitizen Helps you to write good commit messages
  36. 36. npm i --save-dev commitizen ... config ... npm run cz https://github.com/rosko/js-tools/tree/10-commitizen
  37. 37. Working environment. TLDR ● .editorconfig ● prettier ● husky ● eslint ● lint-staged ● commitlint / commitizen
  38. 38. 3. Debug
  39. 39. Chrome Dev Tools
  40. 40. Chrome Dev Tools
  41. 41. Chrome Dev Tools
  42. 42. Chrome Dev Tools
  43. 43. Chrome Dev Tools
  44. 44. https://umaar.com/dev-tips/
  45. 45. V8 Inspector
  46. 46. V8 Inspector
  47. 47. 4. Continuous integration
  48. 48. .travis.yml
  49. 49. .travis.yml sudo: false language: node_js node_js: - 8 before_install: - npm install codecov.io coveralls after_success: - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js branches: only: - master
  50. 50. Travis CI
  51. 51. Coveralls
  52. 52. Codecov.io
  53. 53. .circleci/config.yml
  54. 54. Greenkeeper.io
  55. 55. Continuous integration
  56. 56. 5. Documentation
  57. 57. Working environment Conventional Changelog Automatically generates a changelog for you from git history
  58. 58. npm install --save-dev conventional- changelog-cli ... config ... npm run changelog https://github.com/rosko/js-tools/tree/11-changelog
  59. 59. npm install --save-dev esdoc esdoc-standard-plugin ... ... config ... npm run doc https://github.com/rosko/js-tools/tree/12-esdoc
  60. 60. ESDoc
  61. 61. https://rosko.github.io/js-tools/
  62. 62. npm install --save-dev gh-pages
  63. 63. npm i --save-dev @storybook/react ... config ... npm run storybook https://github.com/rosko/js-tools/tree/13-storybook
  64. 64. Styleguidist demo: https://react-styleguidist.js.org/examples/basic/
  65. 65. npm i --save-dev react-styleguidist ... config ... npm run styleguide https://github.com/rosko/js-tools/tree/14-styleguidist
  66. 66. React Cosmos
  67. 67. 6. Release
  68. 68. Working environment unleash Professionally publish your JavaScript modules in one keystroke
  69. 69. npm i --save-dev unleash unleash -m https://github.com/rosko/js-tools/tree/15-unleash
  70. 70. Unleash
  71. 71. Questions, please Alexey Volkov Front end architect Rumble, Tel Aviv / Kyiv alexey@rumble.me @roskoalexey github.com/rosko github.com/rosko/js-tools bit.ly/jsfest-tools
  • 99corps

    Jan. 17, 2019

Во время доклада мы рассмотрим на практическом примере широкий набор инструментов, которые призваны облегчить жизни джаваскрипт разработчика и сделать сам процесс разработки удобным, приятным и эффективным. Мы пройдемся по всем стадиям технического развития проекта: от первого коммита и настройки рабочего окружения, до документации и деплоя. Рассмотрим самые разнообразные утилиты и сервисы для генерации кода, поддержки его качества, тестирования и многое другое, что обязательно станет вашей верной помощью в работе.

Views

Total views

470

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×