آموزش ایجاد یک محیط توسعه جاوا اسکریپت

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

شما به یک کیت استارتر نیاز دارید You Need a Starter Kit

• شما به یک کیت استارتر نیاز دارید You Need a Starter Kit

• A Starter Kit یک لیست چک خودکار است A Starter Kit Is an Automated Checklist

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

• چه چیزی در کیت شروع کننده شما تعلق دارد؟ What Belongs in Your Starter Kit?

• Github را تنظیم کنید Set Up Github

• دستور جلسه Agenda

• خلاصه Summary

ویرایشگرها و پیکربندی ها Editors and Configuration

• معرفی Intro

• چه چیزی را باید در ویرایشگر JavaScript جستجو کنید What To Look For in a JavaScript Editor

• توصیه های ویرایشگر جاوا اسکریپت JavaScript Editor Recommendations

• ویرایشگر Editorconfig

• نسخه ی نمایشی: Editorconfig Demo: Editorconfig

• خلاصه Summary

مدیریت بسته Package Management

• معرفی Intro

• مدیران بسته Package Managers

• نسخه ی نمایشی: بسته های Node و npm را نصب کنید Demo: Install Node and npm Packages

• امنیت بسته بندی Package Security

• نسخه ی نمایشی: بستر امنیتی گره Demo: Node Security Platform

• خلاصه Summary

توسعه وب سرور Development Web Server

• معرفی Intro

• توسعه وب سرورها Development Web Servers

• نسخه ی نمایشی: Express را تنظیم کنید Demo: Set up Express

• به اشتراک گذاری کار در حال انجام Sharing Work-in-progress

• نسخه ی نمایشی: به اشتراک گذاری کار در حال انجام Demo: Sharing Work-in-progress

• خلاصه Summary

اتوماسیون Automation

• معرفی Intro

• گزینه های اتوماسیون Automation Options

• نسخه ی نمایشی: اسکریپت های npm Demo: npm Scripts

• نسخه ی نمایشی: قلاب های پیش/ارسال Demo: Pre/Post Hooks

• نسخه ی نمایشی: اسکریپت های امنیتی را بررسی و به اشتراک بگذارید Demo: Create Security Check and Share Scripts

• نسخه ی نمایشی: وظایف همزمان Demo: Concurrent Tasks

• خلاصه Summary

جابجایی کردن Transpiling

• معرفی Intro

• نسخه های جاوا اسکریپت JavaScript Versions

• مبدلها Transpilers

• پیکربندی بابل Babel Configuration

• انتقال اسکریپتهای ساخت Transpiling Build Scripts

• نسخه ی نمایشی: بابل را تنظیم کنید Demo: Set Up Babel

• خلاصه Summary

بسته بندی Bundling

• معرفی Intro

• قالب های ماژول Module Formats

• چرا ماژول های ES6؟ Why ES6 Modules?

• انتخاب یک بسته نرم افزاری Choosing a Bundler

• نسخه ی نمایشی: پیکربندی Webpack Demo: Configuring Webpack

• Demo: پیکربندی Webpack با Express Demo: Configure Webpack with Express

• نسخه ی نمایشی: نقطه ورود برنامه را ایجاد کنید Demo: Create App Entry Point

• نسخه ی نمایشی: مدیریت CSS با Webpack Demo: Handling CSS with Webpack

• نقشه های ترشی Sourcemaps

• نسخه ی نمایشی: اشکال زدایی از طریق Sourcemaps Demo: Debugging via Sourcemaps

• خلاصه Summary

روکش زدن Linting

• معرفی Intro

• چرا پرز؟ Why Lint?

• لاینرها Linters

• بررسی اجمالی تصمیمات پیکربندی ESLint ESLint Configuration Decisions Overview

• تصمیم 1: قالب فایل پیکربندی Decision 1: Configuration File Format

• تصمیم 2: کدام قوانین؟ Decision 2: Which Rules?

• تصمیم 3: هشدارها یا خطاها؟ Decision 3: Warnings or Errors?

• تصمیم 4: پلاگین ها؟ Decision 4: Plugins?

• تصمیم 5: از پیش تعیین شده Decision 5: Preset

• مشاهده فایلها با ESLint Watching Files with ESLint

• ویژگی های آزمایشی روتختی Linting Experimental Features

• چرا پرز از طریق ساخت خودکار؟ Why Lint Via an Automated Build?

• نسخه ی نمایشی: ESLint Setup Demo: ESLint Set Up

• نسخه ی نمایشی: مشاهده فایل ها Demo: Watching Files

• خلاصه Summary

تست و ادغام مداوم Testing and Continuous Integration

• معرفی Intro

• تصمیمات آزمون اجمالی Test Decisions Overview

• تصمیم 1: چارچوب آزمایش Decision 1: Testing Framework

• تصمیم 2: کتابخانه های ادعا Decision 2: Assertion Libraries

• تصمیم 3: کتابخانه های کمک کننده Decision 3: Helper Libraries

• تصمیم 4: تست ها را کجا اجرا کنید Decision 4: Where To Run Tests

• تصمیم 5: پرونده های آزمایشی به کجا تعلق دارند؟ Decision 5: Where Do Test Files Belong?

• تصمیم 6: چه زمانی آزمایشات باید انجام شود؟ Decision 6: When Should Tests Run?

• نسخه ی نمایشی: در حال آزمایش نصب Demo: Testing Setup

• نسخه ی نمایشی: تست DOM Demo: DOM Testing

• نسخه ی نمایشی: تماشای تست ها Demo: Watching Tests

• چرا ادغام مداوم؟ Why Continuous Integration?

• ادغام مداوم چه کاری انجام می دهد؟ What Does Continuous Integration Do?

• انتخاب سرور CI Choosing a CI Server

• نسخه ی نمایشی: Travis CI Demo: Travis CI

• نسخه ی نمایشی: گیرنده Demo: Appveyor

• خلاصه Summary

تماس های HTTP HTTP Calls

• معرفی Intro

• رویکردهای تماس HTTP HTTP Call Approaches

• متمرکز کردن درخواستهای HTTP Centralizing HTTP Requests

• نسخه ی نمایشی: واکشی کنید Demo: Fetch

• پرکننده انتخابی Selective Polyfilling

• چرا HTTP را مسخره می کنیم؟ Why Mock HTTP?

• چگونه HTTP را مسخره کنیم How to Mock HTTP

• برنامه ما برای تمسخر Our Plan for Mocking

• کتابخانه های مسخره Mocking Libraries

• نسخه ی نمایشی: ایجاد یک طرح داده Mock API Demo: Creating a Mock API Data Schema

• نسخه ی نمایشی: تولید داده های ساختگی Demo: Generating Mock Data

• نسخه ی نمایشی: ارائه خدمات ساختگی از طریق سرور JSON Demo: Serving Mock Data via JSON Server

• نسخه ی نمایشی: دستکاری داده ها از طریق سرور JSON Demo: Manipulating Data via JSON Server

• خلاصه Summary

ساختار پروژه Project Structure

• معرفی Intro

• چرا یک برنامه آزمایشی؟ Why a Demo App?

• نکته 1: JS در یک پرونده .js تعلق دارد Tip 1: JS Belongs in a .js File

• نکته 2: سازماندهی توسط ویژگی را در نظر بگیرید Tip 2: Consider Organizing by Feature

• نکته 3: منطق را در POJO استخراج کنید Tip 3: Extract Logic to POJOs

• خلاصه Summary

ساخت تولید Production Build

• معرفی Intro

• Minification و Sourcemaps Minification and Sourcemaps

• نسخه ی نمایشی: پیکربندی تولید بسته وب با کوچک سازی Demo: Production Webpack Configuration with Minification

• نسخه ی نمایشی: پیکربندی سرور محلی/dist Demo: Configure Local /dist Server

• Demo: Toggle Mock API Demo: Toggle Mock API

• نسخه ی نمایشی: تولید اسکریپت های npm Demo: Production Build npm Scripts

• ایجاد پویا HTML Dynamic HTML Generation

• نسخه ی نمایشی: تولید پویا HTML Demo: Dynamic HTML Generation

• تقسیم بسته بندی Bundle Splitting

• نسخه ی نمایشی: Bundle Splitting Demo: Bundle Splitting

• Cust Busting Cache Busting

• نسخه ی نمایشی: Busting حافظه پنهان Demo: Cache Busting

• نسخه ی نمایشی: CSS را استخراج و کوچک کنید Demo: Extract and Minify CSS

• ورود به سیستم خطا Error Logging

• نسخه ی نمایشی: ورود به سیستم خطا Demo: Error Logging

• نسخه ی نمایشی: الگوهای HTML از طریق EmbeddedJS Demo: HTML Templates via EmbeddedJS

• خلاصه Summary

استقرار تولید Production Deploy

• معرفی Intro

• UI و API را جدا کنید Separating the UI and API

• میزبانی ابر Cloud Hosting

• نسخه ی نمایشی: استقرار خودکار API از طریق Heroku Demo: Automated API Deploy via Heroku

• نسخه ی نمایشی: استقرار رابط کاربری خودکار از طریق Surge Demo: Automated UI Deploy via Surge

• رویکردهای بروزرسانی کیت شروع کننده Starter Kit Update Approaches

• گزینه 1: یومن Option 1: Yeoman

• گزینه 2: Github Option 2: Github

• گزینه 3: npm Option 3: npm

• الهام Inspiration

• چالش Challenge

• خلاصه Summary