آموزش جاوا اسکریپت مدرن و مدولار با SystemJS و jspm

سرفصل ها و درس ها

رویکرد مدرن و مدرن شده به JavaScript A Modernized, Modularized Approach to JavaScript

• نیاز به مدولار بودن The Need for Modularity

• سرخوردگی با بارگیری دستی JS Dependency (نسخه ی نمایشی) Frustrations with Manually Downloading JS Dependencies (Demo)

• چگونه Bower کمک می کند و چه چیزی هنوز از دست رفته است (نسخه ی نمایشی) How Bower Helps and What's Still Missing (Demo)

• راه کارها باید باشد - وابستگی ها در NET (نسخه ی نمایشی) The Way Things Should Be - Dependencies in .NET (Demo)

• راه کارها باید باشد - وابستگی ها در Node.js (نسخه ی نمایشی) The Way Things Should Be - Dependencies in Node.js (Demo)

• چرا همه چیز باید همان شکلی باشد که من می گویم باید باشد Why Things Should Be the Way I Say They Should Be

• راه درست با jspm و SystemJS (نسخه ی نمایشی) The Right Way with jspm and SystemJS (Demo)

• این دوره برای چه کسانی است Who This Course Is For

• دستور کار دوره Course Agenda

• آنچه باید قبل از گذراندن این دوره بدانید What You Should Know Before Taking This Course

• ابزارهایی که برای این دوره نیاز دارید Tools You Need for This Course

• مثال کاربردی که ما استفاده خواهیم کرد: بازی یک نفره (نسخه ی نمایشی) The Example Application We'll Use: Solitaire (Demo)

ES6 ماژول لودر Polyfill ES6 Module Loader Polyfill

• Polyfill لودر ماژول ES6 The ES6 Module Loader Polyfill

• مدت: ماژول Term: Module

• مدت: بسته بندی Term: Package

• شرایط: لودر ماژول و مدیر بسته بندی Terms: Module Loader and Package Manager

• خط لوله لودر ماژول The Module Loader Pipeline

• استفاده از Polyfill لودر ماژول ES6 (نسخه ی نمایشی) Using the ES6 Module Loader Polyfill (Demo)

• افزودن ردیاب ماهیت ناهمزمان بارگیری ماژول (نسخه ی نمایشی) Adding Traceur & the Asynchronous Nature of Module Loading (Demo)

• اولین ماژول در برنامه ما - app.js (نسخه ی نمایشی) The First Module in Our App - app.js (Demo)

• قلاب های خط لوله Loader (نسخه ی نمایشی) Overriding Loader Pipeline Hooks (Demo)

• برخی از فایلهای کد را برای مرجع آینده بیابید Gist with Some Code Files for Future Reference

• نمودار تصویری ماژول ها (نسخه ی نمایشی) A Visual Graph of Modules (Demo)

• تبدیل امتیازدهی ، Klondike ، بازی و صفحه به ماژول (نسخه ی نمایشی) Converting Scoring, Klondike, Game, and Board to Modules (Demo)

• تنظیم مجدد وابستگی های ماژول منزوی منطق امتیازدهی (نسخه ی نمایشی) Rearranging Module Dependencies & Isolating Scoring Logic (Demo)

• استفاده از کلاسهای ES2015 (نسخه ی نمایشی) Leveraging ES2015 Classes (Demo)

• مزایای Polyfill لودر ماژول ES6 Benefits of ES6 Module Loader Polyfill

SystemJS SystemJS

• معرفی SystemJS Introducing SystemJS

• مبادله سیستم System JS برای ESML (نسخه ی نمایشی) Swap in SystemJS for ESML (Demo)

• پیکربندی baseURL (نسخه ی نمایشی) baseURL Configuration (Demo)

• پیکربندی SystemJS baseURL SystemJS baseURL Config

• پیکربندی نقشه و ترانسپیلر SystemJS (نسخه ی نمایشی) SystemJS Map and Transpiler Config (Demo)

• استفاده از ES2016 + امروز (نسخه ی نمایشی) Using ES2016+ Today (Demo)

• قالب های ماژول پشتیبانی شده SystemJS: ESM ، CJS ، AMD ، Global SystemJS's Supported Module Formats: ESM, CJS, AMD, Global

• استفاده از ماژول های جهانی (نسخه ی نمایشی) Using Global Modules (Demo)

• تشخیص ماژول در SystemJS (نسخه ی نمایشی) Module Detection in SystemJS (Demo)

• استفاده از ماژول های CommonJS (نسخه ی نمایشی) Using CommonJS Modules (Demo)

• استفاده از ماژول های AMD (نسخه ی نمایشی) Using AMD Modules (Demo)

آزمایش کردن Testing

• مقدمه Introduction

• تبدیل ایمن تست Safe Test Conversion

• پلاگین های کارما (نسخه ی نمایشی) Karma Plugins (Demo)

• پیکربندی karma-jspm (نسخه ی نمایشی) Configuring karma-jspm (Demo)

• اولین اجرای آزمایشی First Test Run

• مسیر تست کارما - دایرکتوری پایگاه Karma Test Pathing - Base Directory

• نام مستعار ماژول کارت Aliasing the Card Module

• تست های عرشه را تبدیل کنید Convert Deck Tests

• baseURL نسبی در مقابل parentURL مسیر نسبی baseURL Relative vs. parentURL Relative Pathing

• به پایان رساندن آزمایشات - اطمینان از همه موارد عبور Finish Converting Tests - Ensure All Passing

• استفاده از آزمون ها برای مدولار کردن برنامه شما Using Tests to Modularize Your App

• Wallaby.js Test Runner Wallaby.js Test Runner

• تست ملاحظات با SystemJS Testing Considerations with SystemJS

jspm jspm

• مقدمه Introduction

• نصب jspm (نسخه ی نمایشی) Installing jspm (Demo)

• jspm init (نسخه ی نمایشی) jspm init (Demo)

• jspm_packages (نسخه ی نمایشی) jspm_packages (Demo)

• نصب jspm (نسخه ی نمایشی) jspm install (Demo)

• نصب مجدد (نسخه ی نمایشی) Reproducible Installs (Demo)

• رجیستری jspm (نسخه ی نمایشی) jspm Registry (Demo)

• آزمایش تغییرات با jspm در محل Testing Changes with jspm in Place

• تغییر حالت به Angular به عنوان ماژول Switching to Angular as a Module

• نحوه کار با وابستگی هایی که مدولار نیستند How to Work with Dependencies That Aren't Modularized

• jspm ثبت نام بسته را لغو می کند jspm Registry Package Overrides

• آینده اثبات برای jspm 0.17 Future Proofing for jspm 0.17

• خلاصه کردن Recap

توسعه در مقابل گردش کار تولید Development vs. Production Workflows

• گردش کار تولید Production Workflows

• ترک برنامه همانطور که هست Leaving the App As Is

• قبل از انتقال برنامه (نسخه ی نمایشی) Pre Transpiling the App (Demo)

• بسته JSPM (نسخه ی نمایشی) jspm Bundle (Demo)

• بسته JSPM - تزریق (نسخه ی نمایشی) jspm Bundle --inject (Demo)

• جوانب مثبت و منفی Bundling Pros and Cons of Bundling

• jspm Unbundle (نسخه ی نمایشی) jspm Unbundle (Demo)

• بسته JSPM - کوچک کردن (نسخه ی نمایشی) jspm Bundle --minify (demo)

• بسته های چندگانه (نسخه ی نمایشی) Multiple Bundles (Demo)

• ساخت CSP از SystemJS (نسخه ی نمایشی) CSP Build of SystemJS (Demo)

• بسته خود اجرا (نسخه ی نمایشی) Self Executing Bundle (Demo)

• jspm depcache (نسخه ی نمایشی) jspm depcache (Demo)

• jspm setmode از راه دور (نسخه ی نمایشی) jspm setmode Remote (Demo)

• کدام گردش کار برای شما بهترین است؟ Which Production Workflow Is Best for You?

پلاگین های SystemJS SystemJS Plugins

• پلاگین ها چیست و چگونه است The What and How of Plugins

• پلاگین متن برای الگوها (نسخه ی نمایشی) Text Plugin for Templates (Demo)

• بسته بندی با فایل های متنی (نسخه ی نمایشی) Bundling with Text Files (Demo)

• پیکربندی پرونده برای پیکربندی پلاگین ها Config File to Configure Plugins

• Under the Hood - نحوه کار افزونه ها (نسخه ی نمایشی) Under the Hood - How Plugins Work (Demo)

• پلاگین پیش بارگذار تصویر (نسخه ی نمایشی) Image Pre-loader Plugin (Demo)

• پلاگین CSS (نسخه ی نمایشی) CSS Plugin (Demo)

• زیر هود پلاگین CSS Under the Hood of the CSS Plugin

• ایجاد پلاگین Markdown (نسخه ی نمایشی) Creating a Markdown Plugin (Demo)

• مستندات ایجاد پلاگین Documentation for Creating Plugins

• خلاصه کردن Recap

انتشار بسته ها Publishing Packages

• چگونه یک بسته کارت استخراج خواهیم کرد How We'll Extract a Cards Package

• مرحله 1 - جدا کردن (نسخه ی نمایشی) Step 1 - Decouple (Demo)

• مرحله 2 - پیکربندی بسته های SystemJS (نسخه ی نمایشی) Step 2 - SystemJS Packages Config (Demo)

• مرحله 3 - استخراج پرونده های کارت ها به یک مخزن جدید (نسخه ی نمایشی) Step 3 - Extract Cards Files into a New Repository (Demo)

• مرحله 4 - تست های بسته بندی را فعال کنید (نسخه ی نمایشی) Step 4 - Get Package Tests Working (Demo)

• مرحله 5 - سیم در بسته جدید به صورت محلی (نسخه ی نمایشی) Step 5 - Wire in New Package Locally (Demo)

• مرحله 6 - مشکلات پچ در بازی یک نفره (نسخه ی نمایشی) Step 6 - Patch Problems in Solitaire Game (Demo)

• سناریوهای بسته بندی Packaging Scenarios

• خلاصه کردن Recap

همه اش را بگذار کنار هم Putting It All Together

• مقدمه Introduction

• مزایا: بهبود زبان Benefits: Language Improvements

• مزایا: روابط صریح و عیب یابی ماژول Benefits: Explicit Relationships and Module Agnosticism

• مزایا: مدیر بسته ای که بارگیری ماژول را درک می کند Benefits: A Package Manager That Understands Module Loading

• مزایا: گردش کار آشنا Benefits: Familiar Development Workflow

• مزایا: پشتیبانی از ماژول سطح زبان Benefits: Language Level Module Support

• عوارض جانبی از ماژول های جهانی Side Effects from Global Modules

• منابع یادگیری Learning Resources

• پیش بینی: واردات خودکار Prediction: Automatic Imports

• پیش بینی بارگیری ماژول Predictions for Module Loading