JS Online meetup of Open Tech Week by Sigma Software, 2020

1. Front-end it
like a PRO
By Stanislav Khorunzhyi

2. A few words about me
1. Senior JavaScript Developer at Sigma Software
2. I am a driver of JavaScript community in my company
3. 99% of my work is strictly directed to the Front-End development
4. During last year I interviewed more than 50 people on different
positions
5. Now I work onVue.js start-ups
6. I think that any successful project must have Git Hooks, good
linters,TypeScript, Unit tests and lodash.

3. Who is a PRO developer?
1. Makes code that does not require any refactoring
2. Applies the brand-new practices and features
3. Puts the right things to the right places
4. Knows how to work with UI
5. Always keeps in mind that the user experience (UX) is the most
important part of any application / website / game etc.

5. MOVE
SHOOT

10. Because your form is not a form…

11. Tip #1: Always use <form> tag for a form

12. Tip #1: Always use <form> tag for a form

13. Tip #2: Use labels for inputs

14. Tip #2: Use labels for inputs

15. Tip #3: Use modern tags
PRO developer uses the new tags from HTML5 specification:

16. Tip #4: Add shortcuts & hotkeys

17. Tip #4: Add shortcuts & hotkeys
1. https://www.npmjs.com/package/hotkeys-js
2. https://www.npmjs.com/package/mousetrap

18. Tip #5: Keep a version of the app in footer
1. It allows users to report bugs
2. Allows QA engineers to specify the app version in bug
description
3. Avoids inconsistent state when on some environment it
works, but on other it doesn’t

19. Tip #6: Configure ESLint + Stylelint at the beginning
1. Forget aboutTSLint (it’s fully deprecated)
2. Don’t spent time on configuring linter by yourself (just use
or modify Airbnb or other popular config)
3. Continuously extend the config and adapt it to the project
needs
4. Run linters on each commit or push in Git

20. Tip #7: Add Git hooks to the project
1. Git hooks allow you to run any bash script when certain
important actions occur
2. The most popular actions to hook are commit and push
3. All what you need is Husky!

21. Not this one…

22. Tip #7: Add Git hooks to the project
Husky makes git hooks easy:
https://www.npmjs.com/package/husky
package.json

23. Tip #7: Add Git hooks to the project
Lint-staged will run Git hooks only against staged Git files:
https://www.npmjs.com/package/lint-staged
package.json

24. Tip #8: Know how the transpiling process work
1. What happens to theTypeScript / ES Next code?
2. What is the difference between concatenation,
minification and transpiling?
3. What are polyfills for?
4. How SASS / LESS / etc. variables work?

25. Transpiling process:TypeScript
1. TypeScript gets compiled into JavaScript withTSC (TypeScript
compiler) and in rare cases with Babel
2. When there is aTypeError, theTypeScript will not be built for the
production (types are pretty strict)
3. Each 3rd party dependency (library) must have a @types included
(or the developer must describe them by himself)

26. Processing code:Transpiling
ECMAScript 5ECMAScript Next

27. Processing code: Concatenation
Users.vue
***.vue
Button.vue
Bets.vue
utils.js
Footer.vue
app.c5ff7b7f.js

28. Processing code: Minification

29. Processing code:The results

30. Processing code: Polyfills
A polyfill is a piece of code (usually JavaScript on theWeb)
used to provide modern functionality on older browsers that
do not natively support it.

31. Tip #9: Configure auto-polyfills
.browserlistrc file will help tools like PostCSS or babel-preset-env
correctly add polyfills to your app:

32. Tip #10: Use modern array methods

35. Tip #10: Use modern array methods

36. Tip #11: Use lazy loading
1. Lazy loading helps your application to be loaded faster
2. Scripts, images, videos or even the whole pages can be
lazy loaded
3. If the lazy loading is applied to the pages, make sure you
lazy load only rarely used pages

37. Tip #12: Optimize the final bundle
1. UseWeback bundle analyzer to check what is included to
your final bundle
2. Use Audit tab on Chrome DevTools (called Lighthouse) to
check the page loading speed
3. Try to avoid libraries with default exports

38. webpack-bundle-analyzer

39. bundlephobia.com

40. Useful resources
1. HTML semantics and modern tags
2. Building forms
3. eslint-config-airbnb
4. stylelint-config-airbnb
5. TypeScript compiler options
6. Polyfills in JavaScript
7. Configuring browserslist
8. Modern array methods

41. Apply these rules and let’s
make the Front-End
great again!
https://t.me/stan_kh