1. Useful tools for
JS developers
Alexey Volkov • March 30th–31st, 2018

2. Hello
Alexey Volkov
Front end architect
Rumble, Tel Aviv / Kyiv
alexey@rumble.me
@roskoalexey
github.com/rosko

3. bit.ly/jsfest-tools

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

27. https://github.com/rosko/js-tools/tree/02-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

48. https://umaar.com/dev-tips/

49. V8 Inspector

50. V8 Inspector

51. 4. Continuous integration

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

57. .circleci/config.yml

58. Greenkeeper.io

59. Continuous integration

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

65. https://rosko.github.io/js-tools/

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

70. Styleguidist
demo: https://react-styleguidist.js.org/examples/basic/

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
alexey@rumble.me
@roskoalexey
github.com/rosko
github.com/rosko/js-tools
bit.ly/jsfest-tools