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.

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

162 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

×