Presentation for NURE (Kharkiv National University of Radioelectronics) students about front-end development (JavaScript best practices, features).

1. FRONT-END DEVELOPMENT,
PART 2: JS
_by Oleksii Prohonnyi

3. Who am I
Oleksii Prohonnyi
Tech. lead @ Sigma Software
 4+ years in IT
 2 technologies
 13 mentees
 60+ interviews

4. IN PREVIOUS
EPISODE

5. Front-end development,
part 1: HTML/CSS
Presentation: http://goo.gl/so2uHP
Sources: https://goo.gl/Hef65u

6. JAVASCRIPT

8. JavaScript (also known as ECMAScript)
It is most commonly used as part of
web browsers, whose implementations
allow client-side scripts to interact with
the user, control the browser,
communicate asynchronously, and alter
the document content that is displayed.
<wikipedia.org>

9. ECMASCRIPT

11. ECMAScript
is the scripting language standardized
by Ecma International in the ECMA-262
specification and ISO/IEC 16262.
<wikipedia.org>

13. ECMAScript6
is a significant update to the language,
and the first update to the language
since ES5 was standardized in 2009.
More info: https://goo.gl/5xvio1

14. ES6 features
 arrows
 classes
 enhanced object literals
 template strings
 destructuring
 default + rest + spread
 let + const
 iterators + for..of
 generators
 unicode
 modules
 module loaders
 map + set + weakmap + weakset
 proxies
 symbols
 subclassable built-ins
 promises
 math + number + string + array +
object APIs
 binary and octal literals
 reflect api
 tail calls

16. OOD (TYPICAL)

18. OOD (PROTOTYPE)

21. OOP PRINCIPLES

23. OOP PRINCIPLES:
Inheritance

26. OOP PRINCIPLES:
Polymorphism

29. OOP PRINCIPLES:
Encapsulation

31. How to deal with encapsulation in JS?
 “Imagined” privacy
 Private “static” methods (closures)
 Real private properties and methods
 Just don’t
 More info: http://goo.gl/uaYcHp

32. DEMO
(“src/ood” directory in sources [index.html, encapsulation.js])

33. DESIGN PATTERNS

34. DESIGN PATTERNS:
Singleton

36. DEMO
(“src/patterns” directory in sources [index.html?singleton])

37. DESIGN PATTERNS:
Proxy

39. DEMO
(“src/patterns” directory in sources [index.html?proxy])

40. More patterns implementations:
https://github.com/oprohonnyi/js_trn/tree/patterns

41. TOOLS AND
UTILITIES

42. *node.js

43. *npm

44. TOOLS AND
UTILITIES:
Tasks runner

45. *grunt

46. Grunt
 In one word: automation. The less work you have to do when
performing repetitive tasks like minification, compilation, unit testing,
linting, etc, the easier your job becomes.
 http://gruntjs.com/
 Installation: “npm install –g grunt-cli”
 Verify installation: “grunt --version”
 Configuration: package.json + Gruntfile.js

47. DEMO
(“tools/grunt” directory in sources)

48. *gulp

49. TOOLS AND
UTILITIES:
Node modules

51. More about coding guidelines:
http://www.slideshare.net/oprohonnyi/javascript-coding-guidelines

52. *jshint

53. JSHint
 Tool that helps to detect errors and potential problems in your
JavaScript code.
 http://jshint.com/
 Configuration: .jshintrc
 Custom reporter: jshint-stylish

54. DEMO
(“tools/jshint” directory in sources)

55. *jscs

56. More useful modules
 grunt-contrib-concat
 grunt-contrib-uglify
 grunt-contrib-htmlmin
 grunt-contrib-livereload
 grunt-recess
 grunt-processhtml
 grunt-jsdoc

57. DEMO
(“tools/grunt” directory in sources)

58. IDE

59. *notepad

60. *Sublime Text 3

61. *Eclipse

62. *JetBrains WebStorm

63. *VS Code

64. DEMO
(try by yourself WebStorm IDE and grunt task runner)

65. ONE MORE THING

67. REFERENCES

68. References
 "JavaScript: The Good Parts" (Douglas Crockford)
 "Learning JavaScript Design Patterns" (Addy Osmani)
 "Effective JavaScript: 68 Specific Ways to Harness the
Power of JavaScript" (David Herman)
 "Clean Code: A Handbook of Agile Software
Craftsmanship" (Robert Martin)
 "Patterns of Enterprise Application Architecture" (Martin
Fowler)
 Presentation sources: github.com

70. Oleksii Prohonnyi
linkedin.com/in/oprohonnyi
slideshare.net/oprohonnyi