js-modules.md

Modules in JavaScript

In the lesson scope will be covered such topics as, Modules Basics (scope, syntax, features), also Modules Types and their Development History.

Agenda

• What is module / module pattern? For what purposes they were created?
• Modules types (AMD, ES6, CommonJS, UMD).
• Modules syntax.
• Common modules features (export default, named exports, exports as, etc).
• Dynamic imports.

Required to self-study

• Modules basics
• A 10 minute primer to JavaScript modules, module formats, module loaders and module bundlers

To further self-education

• Learn the basics of the JavaScript module system and build your own library
• Module history in practice
• JavaScript Modules Past & Present
• 4 Best Practices to Write Quality JavaScript Modules

Time consumption

• 2.5 hours for main block
• 3.5 hours for additional block

RS School Video

• https://youtu.be/7e-5P6iPFzY

Slides - http://kirilknysh.github.io/js-modules-talk/#/

Content

1. CommonJS modules
   • Node.js and require
   • NPM and package.json
   • Bower and bower.json
2. Modules in JavaScript
   • ECMAScript 5 module systems
   • ECMAScript 6 modules
3. The basics of ES6 modules
   • Named exports
   • Default exports
   • Cyclic dependencies
4. Import and Export in details
   • Babel
   • System.js

Further reading

• http://exploringjs.com/es6/ch_modules.html
• http://jsmodules.io/cjs.html

Timeline - https://youtu.be/7e-5P6iPFzY

1. начало лекции https://youtu.be/7e-5P6iPFzY?t=171
2. зачем нужны модули https://youtu.be/7e-5P6iPFzY?t=193
3. пример без модульности https://youtu.be/7e-5P6iPFzY?t=299
4. как организовать модули https://youtu.be/7e-5P6iPFzY?t=353
   
   
5. одиночный модуль (самовызывающиеся функции) - https://youtu.be/7e-5P6iPFzY?t=422
6. много-файловый модуль - https://youtu.be/7e-5P6iPFzY?t=633
   
   
7. commonJS - https://youtu.be/7e-5P6iPFzY?t=893
8. commonJS loaders - https://youtu.be/7e-5P6iPFzY?t=1083
   
   
9. AMD - https://youtu.be/7e-5P6iPFzY?t=1337
10. AMD loaders - https://youtu.be/7e-5P6iPFzY?t=1473
11. AMD loaders optimizer - https://youtu.be/7e-5P6iPFzY?t=2029
    
    
12. ES6 modules - https://youtu.be/7e-5P6iPFzY?t=2258
    • ES6 modules loaders - https://youtu.be/7e-5P6iPFzY?t=2396
    • ES6 modules loaders webpack - https://youtu.be/7e-5P6iPFzY?t=2426
    • ES6 modules подробнее - https://youtu.be/7e-5P6iPFzY?t=2670
    • ES6 modules exports - https://youtu.be/7e-5P6iPFzY?t=2782
    • ES6 modules default (function / class) exports - https://youtu.be/7e-5P6iPFzY?t=2870
    • ES6 modules inline vs clause exports - https://youtu.be/7e-5P6iPFzY?t=3009
      
      
13. ES6 modules imports - https://youtu.be/7e-5P6iPFzY?t=3177
    • ES6 modules named imports - https://youtu.be/7e-5P6iPFzY?t=3201
    • ES6 modules default imports - https://youtu.be/7e-5P6iPFzY?t=3300
    • ES6 modules empty imports - https://youtu.be/7e-5P6iPFzY?t=3345
    • ES6 modules imports are hoisted - https://youtu.be/7e-5P6iPFzY?t=3418
    • ES6 modules imports are read-only views on export - https://youtu.be/7e-5P6iPFzY?t=3479
    • ES6 modules cyclic dependencies (циклические зависимости это плохо) - https://youtu.be/7e-5P6iPFzY?t=3883
      
      
14. ES6 modules loader API - https://youtu.be/7e-5P6iPFzY?t=4502
    
    
15. лексика :
    • require (рекваер) - требовать-запрашивать
    • resolve - разрешить
    • parsing - разбираться на части
    • implementation - (имплементить) - выполненить, осуществить