![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](https://image.slidesharecdn.com/usefultoolsforjsdevelopers-180402104355/85/JS-Fest-2018-JS-25-320.jpg)
JS Fest 2018. Алексей Волков. Полезные инструменты для JS разработки
- 1. Useful tools for JS developers Alexey Volkov • March 30th–31st, 2018
- 2. Hello Alexey Volkov Front end architect Rumble, Tel Aviv / Kyiv [email protected] @roskoalexey github.com/rosko
- 8. Let’s do it right 1. Start a new project 2. Set up the working environment 3. Debug 4. Continuous integration 5. Documentation
- 9. 1. Start a new project
- 10. How to start 1. Manually 2. Starter kit / boilerplate 3. Code generator
- 11. 1. Manually
- 12. 2. Starter kits / boilerplates
- 13. 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
- 14. 2. Starter kits / boilerplates angular-seed 13246 ★ AngularJS, Karma, Protractor, Jasmine, Http server
- 15. 2. Starter kits / boilerplates react-starter-kit 17269 ★ react-boilerplate 17602 ★ react-redux-boilerplate electron-react-boilerplate … https://reactjs.org/community/starter-kits.html
- 16. 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
- 17. 3. Code generators Angular CLI 16647 ★ ● npm install -g @angular/cli ● ng new PROJECT-NAME ● ng g component my-new-component
- 18. 3. Code generators Ember CLI 3208 ★ ● npm install -g ember-cli ● ember new my-new-app ● ember generate model user ● ember generate view user
- 19. 3. Code generators create-react-app 46063 ★ ● npx create-react-app my-app
- 20. 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
- 21. 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
- 22. How to start. TLDR 1. $ git init 2. $ git clone 3. $ generate-me-something
- 23. 2. Set up the working environment
- 24. Working environment npm -g ● npm install -g nwb ● nwb new web-app my-app npx ● npx nwb new web-app my-app
- 25. 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
- 26. .editorconfig
- 28. Working environment Prettier ● CLI / npm module ● JS / JSX / TypeScript / Flow / CSS / Less / SCSS / Vue / JSON / GraphQL / Markdown ● ESLint integration
- 29. npm i --save-dev prettier ... npm run prettier https://github.com/rosko/js-tools/tree/03-prettier
- 30. Working environment husky { "scripts": { "precommit": "npm run prettier && npm test", "prepush": "npm test", } }
- 31. 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
- 32. Working environment ESLint ● CLI / npm module ● Formatting rules ● Code-quality rules ● Extremely extendable (using plugins) Same for TSLint and Stylelint
- 33. npm i --save-dev eslint eslint --init https://github.com/rosko/js-tools/tree/06-eslint
- 34. npm i --save-dev stylelint stylelint-scss stylelint src/**/*.scss https://github.com/rosko/js-tools/tree/07-stylelint
- 35. Working environment lint-staged ● Allows to run linters/tests/prettier/any on git staged files
- 36. npm i --save-dev lint-staged https://github.com/rosko/js-tools/tree/08-lint-staged
- 37. Working environment commitlint Checks your git commit messages { "scripts": { "commitmsg": "commitlint -e $GIT_PARAMS" } }
- 38. npm install --save-dev @commitlint/config- conventional @commitlint/cli git commit -m ... https://github.com/rosko/js-tools/tree/09-commitlint
- 39. Working environment commitizen Helps you to write good commit messages
- 40. npm i --save-dev commitizen ... config ... npm run cz https://github.com/rosko/js-tools/tree/10-commitizen
- 41. Working environment. TLDR ● .editorconfig ● prettier ● husky ● eslint ● lint-staged ● commitlint / commitizen
- 42. 3. Debug
- 43. Chrome Dev Tools
- 44. Chrome Dev Tools
- 45. Chrome Dev Tools
- 46. Chrome Dev Tools
- 47. Chrome Dev Tools
- 49. V8 Inspector
- 50. V8 Inspector
- 52. .travis.yml
- 53. .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
- 54. Travis CI
- 55. Coveralls
- 56. Codecov.io
- 58. Greenkeeper.io
- 60. 5. Documentation
- 61. Working environment Conventional Changelog Automatically generates a changelog for you from git history
- 62. npm install --save-dev conventional- changelog-cli ... config ... npm run changelog https://github.com/rosko/js-tools/tree/11-changelog
- 63. npm install --save-dev esdoc esdoc-standard-plugin ... ... config ... npm run doc https://github.com/rosko/js-tools/tree/12-esdoc
- 64. ESDoc
- 66. npm install --save-dev gh-pages
- 68. npm i --save-dev @storybook/react ... config ... npm run storybook https://github.com/rosko/js-tools/tree/13-storybook
- 71. npm i --save-dev react-styleguidist ... config ... npm run styleguide https://github.com/rosko/js-tools/tree/14-styleguidist
- 72. React Cosmos
- 73. 6. Release
- 74. Working environment unleash Professionally publish your JavaScript modules in one keystroke
- 75. npm i --save-dev unleash unleash -m https://github.com/rosko/js-tools/tree/15-unleash
- 76. Unleash
- 77. Questions, please Alexey Volkov Front end architect Rumble, Tel Aviv / Kyiv [email protected] @roskoalexey github.com/rosko github.com/rosko/js-tools bit.ly/jsfest-tools
Editor's Notes
- #5: Frame in design Source: http://datajhonpri.blogspot.com/2011/12/how-to-design-simple-webpage-html-1.html
- #6: Frame in design Source: https://windows7-free.ru/text-tekst/tekstovye-redaktory-dlja-windows/71-notepad-plusplus-tekstoviy-redaktor-bloknot-na-russkom.html
- #7: Frame in design Source: http://omkarcoms.blogspot.com/2013/03/how-to-pause-resume-file-transfer-in.html
- #8: Frame in design Source: http://amazonserver.blogspot.com/2013/01/access-amazon-linux-via-far-manager.html
- #11: Manual - пишите код сами, вручную создаете index.html, конфигурацию вебпака, настройки бабеля и тд Boilerplates - используете уже написанный кем-то скелет приложения, если выходит новая версия бойлерплейта, то вы не можете свободно ее использовать, можно разве что мержить вручную попутно пытаюсь разрешать возникающие конфликты кода Generators - предоставляет CLI, который дает возможность генерировать код (как минимум исходный скелет, а также возможно какие-то отдельные сущности: вью компоненты, модели данных, сервисы и тд)
- #12: Manual - пишите код сами, вручную создаете index.html, конфигурацию вебпака, настройки бабеля и тд Source: https://keep-calm.net/m/keep-calm-and-keep-coding-orange-white.html
- #13: Boilerplates - используете уже написанный кем-то скелет приложения, если выходит новая версия бойлерплейта, то вы не можете свободно ее использовать, можно разве что мержить вручную попутно пытаюсь разрешать возникающие конфликты кода Source: https://community.hpe.com/t5/Around-the-Storage-Block/A-New-All-Inclusive-Experience-for-All-HPE-3PAR-StoreServ/ba-p/6946284
- #17: Generators - предоставляет CLI, который дает возможность генерировать код (как минимум исходный скелет, а также возможно какие-то отдельные сущности: вью компоненты, модели данных, сервисы и тд)
- #21: TDB: explain Advantages ???
- #23: Manual - пишите код сами, вручную создаете index.html, конфигурацию вебпака, настройки бабеля и тд Boilerplates - используете уже написанный кем-то скелет приложения, если выходит новая версия бойлерплейта, то вы не можете свободно ее использовать, можно разве что мержить вручную попутно пытаюсь разрешать возникающие конфликты кода Generators - предоставляет CLI, который дает возможность генерировать код (как минимум исходный скелет, а также возможно какие-то отдельные сущности: вью компоненты, модели данных, сервисы и тд)
- #25: Explain npx better
- #51: Figure out how to comment the video
- #53: Explain Travis features better
- #54: Explain Travis features better
- #71: Demo: https://react-styleguidist.js.org/examples/basic/
- #73: Demo: https://react-styleguidist.js.org/examples/basic/
- #77: Demo: https://react-styleguidist.js.org/examples/basic/