• الآن لا نكتب جميع ملفات JS في ملف واحد ونرسلها إلى العميل.
• اليوم، نقوم بكتابة التعليمات البرمجية في الوحدات النمطية التي تشارك البيانات فيما بينها وتكون أكثر قابلية للصيانة.
• التقليد هو استخدام أسماء حالة الجمل للوحدات النمطية.
• يمكننا أيضًا تضمين وحدات الطرف الثالث في التعليمات البرمجية الخاصة بنا عبر عمليات إعادة شراء npm مثل jquery وreact وwebpack وbabel وما إلى ذلك.
• يتم إنشاء الحزمة النهائية من ملفات الوحدات الصغيرة التي يتم نشرها على خادم الإنتاج، ويتم إرسالها في النهاية إلى العملاء.
• الوحدات غير مدعومة من قبل المتصفحات القديمة
• لأسباب تتعلق بالأداء، من الأفضل إرسال ملفات js صغيرة إلى المتصفح.
• الوحدات هي جزء مهم للغاية من JS، وقد تم استخدامها بالفعل في لغات أخرى لعقود من قبل المطورين.
• الوحدات: قطعة من التعليمات البرمجية قابلة لإعادة الاستخدام، والتي تتضمن تفاصيل تنفيذ جزء معين من مشروعنا.
• إنه ملف مستقل، ولكن ليس من الضروري أن يكون كذلك.
• يمكن أن تحتوي الوحدات أيضًا على واردات وصادرات وحدات ES6 الأصلية: لم تكن هناك وحدات قبل ES6. كان لا بد من تنفيذها بأنفسنا أو استخدام المكتبات الخارجية. يتم تخزين الوحدات في ملفات، وحدة واحدة بالضبط لكل ملف.
• يمكننا تصدير القيم والوظائف من الوحدات وما إلى ذلك. كل ما نقوم بتصديره يسمى واجهة برمجة التطبيقات العامة والتي يتم كشفها لاستهلاك التعليمات البرمجية الأخرى.
• يتم استهلاك واجهة برمجة التطبيقات العامة هذه عن طريق استيراد التعليمات البرمجية العامة إلى الوحدة النمطية وتسمى التبعيات.
• يمكن كتابة التطبيقات البسيطة بدون وحدات نمطية أيضًا، ولكن بالنسبة للمشاريع على مستوى المؤسسات، نحتاج إلى وحدات نمطية.

• المقدمة:
  -> يجعل إنشاء البرامج أمرًا سهلاً حقًا حيث أن الوحدات عبارة عن وحدات بناء صغيرة نقوم بتجميعها لإنشاء تطبيقات معقدة.
  -> عزل المكونات: يمكن تطوير كل ميزة بمعزل تام ودون القلق بشأن عمل المطورين الآخرين أو كيفية عمل النظام بأكمله.
  -> تجريد التعليمات البرمجية: تنفيذ تعليمات برمجية منخفضة المستوى في الوحدات النمطية، واستيراد هذه التجريدات إلى وحدات أخرى، مما يؤدي بطبيعة الحال إلى قاعدة تعليمات برمجية أكثر تنظيماً.
  -> إمكانية إعادة استخدام الكود: اسمح لنا بإعادة استخدام الكود حتى عبر مشاريع متعددة.

• تستخدم لغة JS الحديثة التجميع والنقل.
  

## Bundling = is a complex process which involves:
a. Eliminate unused Code
b. Combine all modules into single file.
c. Compress the code.
Ex. webpack build tool - requires manual config, hence complex.
Ex. parcel - zero build tool as we don't need to write any setup code.

## Transpiling/Polyfiling:
Convert modern JS to ES5 or older syntax such that older browser supports the application. 
Ex. done using tool called Babel

Entire process results in the final bundle file for production ready to be deployed on server. 

### Scripts are also files but they are different from ES6 modules in the following ways:
Script[used earlier]:
- All top level variables are always global. This leads to global namespace pollution and name-coliision.
- Default mode: Sloppy mode
- Top level 'this' points to window object.
- Import/Export of values is not allowed.
- Linked to html using plain script tag.
- Downloaded by default in sync way, unless async or defer attribute is used.

### ES6 Modules:
- All top-level variables are scoped to module i.e they are private by default. Such a value can be access by outside varible only when its exported by the module else it will be inaccessible for outside world.
- Default mode: Strict mode. Hence with modules no more need to declare strict mode.
- Top level 'this' is 'undefined'
- Allows import/export of values using ES6 syntax of import/export.
- Link to html file using 

## Understanding module import process:
Parsing -> [Asyn module download, Linking import-export, Execute individual module itself] -> Execution overall index.js
- import/export only need to happen at the top level of if-block or any function. Imports are hoisted. Importing values is always the first thing which happens in a module.
- Top-level static imports make imports known before execution. 
- Modules are loaded in async way from the server, importing happens in sync manner. 
- Parsing refers to reading the code without executing it in which imports are hoisted. Modules are imported even before execution. Hence, it enables bundling & code elimation even before fn exection. [V Impt as large projects have 100s of modules, and 3rd party modules also from which we want the small piece and not the entire module]
- Bundlers can then join multiple modules, and then eliminate code. hence, we can easily import/export from code.
- After a module arrives, its parsed and then the module exports are linked to imports in index.js i.e live connection is established between import inside index.js and export statement of the module file. They are not copied. Import is just a reference to the exported value. Hence, when the value changes in the exporting module, it also changes in the importing module too. This concept is unique to ES6 modules, other module system don't work like this.
- Code in the imported modules is executed.