Front-end development introduction (JavaScript). Part 2
Download as PPTX, PDF4 likes932 views
The document is a presentation by Oleksii Prohonnyi discussing JavaScript (ECMAScript) and its features, including ES6 updates and object-oriented programming principles. It also covers tools like Node.js, Grunt, and JSHint for task automation and error detection, along with design patterns in JavaScript. Additionally, it provides references for further reading on JavaScript best practices and design patterns.
![DEMO
(“src/ood” directory in sources [index.html, encapsulation.js])](https://image.slidesharecdn.com/fed2olepro-150527103904-lva1-app6892/85/Front-end-development-introduction-JavaScript-Part-2-32-320.jpg)
![DEMO
(“src/patterns” directory in sources [index.html?singleton])](https://image.slidesharecdn.com/fed2olepro-150527103904-lva1-app6892/85/Front-end-development-introduction-JavaScript-Part-2-36-320.jpg)
![DEMO
(“src/patterns” directory in sources [index.html?proxy])](https://image.slidesharecdn.com/fed2olepro-150527103904-lva1-app6892/85/Front-end-development-introduction-JavaScript-Part-2-39-320.jpg)
Front-end development introduction (JavaScript). Part 2
- 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
- 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
- 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
- 36. DEMO (“src/patterns” directory in sources [index.html?singleton])
- 39. DEMO (“src/patterns” directory in sources [index.html?proxy])
- 40. More patterns implementations: https://github.com/oprohonnyi/js_trn/tree/patterns
- 42. *node.js
- 43. *npm
- 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
- 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
- 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