JavaScript Modules & Current Updates

Transcript

1. JavaScript Modules & Current Updates Rizqy Hidayat PRODUCT ENGINEER, DICODING
2. Aloha 👋 Rizqy Hidayat PRODUCT ENGINEER, DICODING hi@rizqy.me - @rizqyhi
3. Prehistoric module Era 🦕 • • • JavaScript doesn't have built-in support for modules Modular files, global scope Dependencies should be loaded before and configured manually
5. COMMONJS AMD UMD ESM Used in NodeJS (server) Used in browser (client) Works for both node & browser Newest stanndard on ES6 ✨ History of Modules in JavaScript
6. CommonJS • • • Standard used in NodeJS for working with modules Load modules synchronously Simple syntax
7. Asynchronous Module Definition (AMD) • • • • Alternative to CommonJS, usually used in browser Needs library to handle module resolution Load modules asynchronously Slightly complex syntax
8. What if our library used by many teams? And they used CommonJS and AMD?
9. Universal Module Definition (UMD) • • • Unify CommonJS and AMD More complex syntax Use build tool to help generate exported modules
11. EcmaScript Module (ESM) • • • • Part of ES6/ES2015 standard The best from both CommonJS and AMD: Simple syntax Load module asynchronously
12. Use ESM in Browser Now • • • Import directly from file/CDN No transpilation needed No need to bundle
14. Does it work on old browsers? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
15. ESM in Older Browser • • • Write code in ES6 Transpile to ES5 Bundle into one file or split into chunks
16. Takeaways • • • • • Use ESM to work with modules Write JavaScript in newest standard Or TypeScript if necessary Transpile to older format when in needs to support old browsers Use best tools available that suites your needs
17. Thanks!