آموزش React JS، Angular و Vue JS - شروع سریع و مقایسه

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

شروع شدن Getting Started

• معرفی Introduction

• هدف این دوره The Goal of this Course

• استفاده از جاوا اسکریپت وانیلی و درک محدودیت های آن (3/3) Using Vanilla JavaScript & Understanding Its Limitations (3/3)

• کتابخانه های جاوا اسکریپت بیشتر: اضافه کردن Lodash More JavaScript Libraries: Adding Lodash

• کتابخانه ها در مقابل چارچوب ها Libraries vs Frameworks

• سایر بخش‌های دنیای جاوا اسکریپت را درک کنید Understand other Parts of the JavaScript World

• کجا می توان کد منبع دوره را پیدا کرد Where to Find the Course Source Code

• منابع ماژول Module Resources

شروع شدن Getting Started

• معرفی Introduction

• هدف این دوره The Goal of this Course

• آشنایی با نقش جاوا اسکریپت Understanding the Role of JavaScript

• آشنایی با نقش جاوا اسکریپت Understanding the Role of JavaScript

• دنیای جاوا اسکریپت The World of JavaScript

• دنیای جاوا اسکریپت The World of JavaScript

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• استفاده از جاوا اسکریپت وانیلی و درک محدودیت های آن (1/3) Using Vanilla JavaScript & Understanding Its Limitations (1/3)

• استفاده از جاوا اسکریپت وانیلی و درک محدودیت های آن (1/3) Using Vanilla JavaScript & Understanding Its Limitations (1/3)

• استفاده از جاوا اسکریپت وانیلی و درک محدودیت های آن (2/3) Using Vanilla JavaScript & Understanding Its Limitations (2/3)

• استفاده از جاوا اسکریپت وانیلی و درک محدودیت های آن (2/3) Using Vanilla JavaScript & Understanding Its Limitations (2/3)

• استفاده از جاوا اسکریپت وانیلی و درک محدودیت های آن (3/3) Using Vanilla JavaScript & Understanding Its Limitations (3/3)

• تجزیه و تحلیل راه حل جاوا اسکریپت Vanilla Analyzing the Vanilla JavaScript Solution

• تجزیه و تحلیل راه حل جاوا اسکریپت Vanilla Analyzing the Vanilla JavaScript Solution

• بهبود برنامه با جی کوئری Improving the App with jQuery

• بهبود برنامه با جی کوئری Improving the App with jQuery

• کتابخانه های جاوا اسکریپت بیشتر: اضافه کردن Lodash More JavaScript Libraries: Adding Lodash

• نقش کتابخانه های جاوا اسکریپت The Role of JavaScript Libraries

• نقش کتابخانه های جاوا اسکریپت The Role of JavaScript Libraries

• کتابخانه ها در مقابل چارچوب ها Libraries vs Frameworks

• استفاده از Vue.js (یک چارچوب جاوا اسکریپت) Using Vue.js (A JavaScript Framework)

• استفاده از Vue.js (یک چارچوب جاوا اسکریپت) Using Vue.js (A JavaScript Framework)

• سایر بخش‌های دنیای جاوا اسکریپت را درک کنید Understand other Parts of the JavaScript World

• نسخه ها و زبان های جاوا اسکریپت - ES6 و TypeScript JavaScript Versions and Languages - ES6 and TypeScript

• نسخه ها و زبان های جاوا اسکریپت - ES6 و TypeScript JavaScript Versions and Languages - ES6 and TypeScript

• ساختار دوره Course Structure

• ساختار دوره Course Structure

• کجا می توان کد منبع دوره را پیدا کرد Where to Find the Course Source Code

• منابع ماژول Module Resources

درک کلی چارچوب های جاوا اسکریپت Understanding JavaScript Frameworks in General

• معرفی ماژول Module Introduction

• JS Frameworks در برنامه های Fullstack JS Frameworks in Fullstack Applications

• چارچوب های JS در برنامه های تک صفحه ای JS Frameworks in Single-Page-Applications

• مثالی برای چارچوبی که یک برنامه تک صفحه ای را اجرا می کند An Example for a Framework running a Single-Page-Application

• منابع ماژول Module Resources

درک کلی چارچوب های جاوا اسکریپت Understanding JavaScript Frameworks in General

• معرفی ماژول Module Introduction

• JS Frameworks در برنامه های Fullstack JS Frameworks in Fullstack Applications

• چارچوب های JS در برنامه های تک صفحه ای JS Frameworks in Single-Page-Applications

• مثالی برای یک چارچوب در یک برنامه Fullstack An Example for a Framework in a Fullstack Application

• مثالی برای یک چارچوب در یک برنامه Fullstack An Example for a Framework in a Fullstack Application

• مثالی برای چارچوبی که یک برنامه تک صفحه ای را اجرا می کند An Example for a Framework running a Single-Page-Application

• رویکرد Fullstack - مزایا و معایب Fullstack Approach - Pros and Cons

• رویکرد Fullstack - مزایا و معایب Fullstack Approach - Pros and Cons

• برنامه تک صفحه ای - مزایا و معایب Single-Page-Application - Pros and Cons

• برنامه تک صفحه ای - مزایا و معایب Single-Page-Application - Pros and Cons

• پیش نیازهای چارچوب های مختلف JS Prerequisites for the Different JS Frameworks

• پیش نیازهای چارچوب های مختلف JS Prerequisites for the Different JS Frameworks

• منابع ماژول Module Resources

Vue.js - یک مقدمه Vue.js - An Introduction

• معرفی ماژول Module Introduction

• مدیریت رویدادها و به روز رسانی DOM Handling Events and Updating the DOM

• ارائه محتوا به صورت مشروط Rendering Content Conditionally

• خروجی لیست ها Outputting Lists

• عناصر یک ظاهر پویا Styling Elements Dynamically

• تنظیم کلاس های CSS به صورت پویا Setting CSS Classes Dynamically

• محدودیت های چند نمونه Vue Limitations of Multiple Vue Instances

• اتصال دو طرفه به فیلدهای ورودی Two-Way-Binding to Input Fields

• چرا به Node.js و NPM نیاز داریم؟ Why do we need Node.js and NPM?

• آشنایی با پوشه پروژه Understanding the Project Folder

• چگونه برنامه ارائه می شود How the Application Gets Rendered

• سبک های محدوده به مولفه ها Scoping Styles to Components

• پیوند با روتر-لینک Linking with router-link

• بسته شدن Wrap Up

• منابع ماژول و منابع بیشتر Module Resources & Further Resources

Vue.js - یک مقدمه Vue.js - An Introduction

• معرفی ماژول Module Introduction

• ایجاد یک برنامه پایه Vue.js Creating a Basic Vue.js Application

• ایجاد یک برنامه پایه Vue.js Creating a Basic Vue.js Application

• به طور خلاصه: Vue.js چگونه کار می کند In a Nutshell: How Vue.js Works

• به طور خلاصه: Vue.js چگونه کار می کند In a Nutshell: How Vue.js Works

• مدیریت رویدادها و به روز رسانی DOM Handling Events and Updating the DOM

• مدیریت رویدادها و به روز رسانی DOM Handling Events and Updating the DOM

• ارائه محتوا به صورت مشروط Rendering Content Conditionally

• خروجی لیست ها Outputting Lists

• خروجی لیست ها Outputting Lists

• اتصال ویژگی ها و ویژگی های HTML به داده ها Binding HTML Attributes & Properties to Data

• اتصال ویژگی ها و ویژگی های HTML به داده ها Binding HTML Attributes & Properties to Data

• عناصر یک ظاهر پویا Styling Elements Dynamically

• تنظیم کلاس های CSS به صورت پویا Setting CSS Classes Dynamically

• تنظیم کلاس های CSS به صورت پویا Setting CSS Classes Dynamically

• استفاده از Shorthands برای v-bind و v-on Using Shorthands for v-bind and v-on

• استفاده از Shorthands برای v-bind و v-on Using Shorthands for v-bind and v-on

• استفاده از چندین نمونه Vue Using Multiple Vue Instances

• استفاده از چندین نمونه Vue Using Multiple Vue Instances

• محدودیت های چند نمونه Vue Limitations of Multiple Vue Instances

• ایجاد و استفاده از کامپوننت ها Creating and Using Components

• ایجاد و استفاده از کامپوننت ها Creating and Using Components

• انتقال داده ها به کامپوننت ها Passing Data into Components

• انتقال داده ها به کامپوننت ها Passing Data into Components

• انتشار رویدادهای سفارشی در کامپوننت ها Emitting Custom Events in Components

• انتشار رویدادهای سفارشی در کامپوننت ها Emitting Custom Events in Components

• محدودیت های قالب Template Restrictions

• محدودیت های قالب Template Restrictions

• اتصال دو طرفه به فیلدهای ورودی Two-Way-Binding to Input Fields

• زمان تمرین - Vue.js - مشکل Time to Practice - Vue.js - Problem

• زمان تمرین - Vue.js - مشکل Time to Practice - Vue.js - Problem

• زمان تمرین - Vue.js - راه حل Time to Practice - Vue.js - Solution

• زمان تمرین - Vue.js - راه حل Time to Practice - Vue.js - Solution

• ایجاد پروژه های Vue.js با Vue CLI Creating Vue.js Projects with the Vue CLI

• ایجاد پروژه های Vue.js با Vue CLI Creating Vue.js Projects with the Vue CLI

• چرا به Node.js و NPM نیاز داریم؟ Why do we need Node.js and NPM?

• استفاده از Vue CLI برای ایجاد پروژه ها Using the Vue CLI to Create Projects

• استفاده از Vue CLI برای ایجاد پروژه ها Using the Vue CLI to Create Projects

• آشنایی با پوشه پروژه Understanding the Project Folder

• درک فایل های .vue Understanding .vue Files

• درک فایل های .vue Understanding .vue Files

• چگونه برنامه ارائه می شود How the Application Gets Rendered

• ایجاد اجزای جهانی با فایل‌های vue Creating Global Components with .vue Files

• ایجاد اجزای جهانی با فایل‌های vue Creating Global Components with .vue Files

• ایجاد مولفه های محلی Creating Local Components

• ایجاد مولفه های محلی Creating Local Components

• سبک های محدوده به مولفه ها Scoping Styles to Components

• ایجاد یک اپلیکیشن تک صفحه ای (SPA) Creating a Single Page Application (SPA)

• ایجاد یک اپلیکیشن تک صفحه ای (SPA) Creating a Single Page Application (SPA)

• اضافه کردن مسیریابی به برنامه Adding Routing to the Application

• اضافه کردن مسیریابی به برنامه Adding Routing to the Application

• پیوند با روتر-لینک Linking with router-link

• مسیریابی و سمت سرور Routing and the Server-Side

• مسیریابی و سمت سرور Routing and the Server-Side

• بسته شدن Wrap Up

• منابع ماژول و منابع بیشتر Module Resources & Further Resources

درک گردش کار و بسته وب Understanding Workflows & Webpack

• معرفی ماژول Module Introduction

• تصویر بزرگ The Big Picture

• نقش Node.js و NPM The Role of Node.js and NPM

درک گردش کار و بسته وب Understanding Workflows & Webpack

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• تصویر بزرگ The Big Picture

• نقش Node.js و NPM The Role of Node.js and NPM

• چرا به سرور توسعه نیاز داریم؟ Why do we need a Development Server?

• چرا به سرور توسعه نیاز داریم؟ Why do we need a Development Server?

• چگونه Webpack کار می کند: ورودی و خروجی How Webpack Works: Entry & Output

• چگونه Webpack کار می کند: ورودی و خروجی How Webpack Works: Entry & Output

• Webpack چگونه کار می کند: ماژول ها، قوانین و پلاگین ها How Webpack Works: Modules, Rules & Plugins

• Webpack چگونه کار می کند: ماژول ها، قوانین و پلاگین ها How Webpack Works: Modules, Rules & Plugins

• بسته شدن Wrap Up

React.js - مقدمه React.js - An Introduction

• معرفی ماژول Module Introduction

• درک نحوه عملکرد React.js و JSX Understanding How React.js Works and JSX

• مدیریت رویدادها و به روز رسانی DOM Handling Events and Updating the DOM

• ایجاد اولین کامپوننت Creating a First Component

• انتقال داده به کامپوننت ها (Props) Passing Data into Components (Props)

• ایجاد کامپوننت ها با استفاده از کلاس های ES6 Creating Components using ES6 Classes

• اطلاعات بیشتر در مورد ES6 More about ES6

• خروجی لیست ها Outputting Lists

• تنظیم کلاس های CSS به صورت پویا Setting CSS Classes Dynamically

• ورودی کاربر و اتصال دو طرفه User Input & Two-Way-Binding

• استفاده از چندین کامپوننت Using Multiple Components

• زمان تمرین - React.js - مشکل Time to Practice - React.js - Problem

• زمان تمرین - React.js - راه حل Time to Practice - React.js - Solution

• جابه‌جایی به راه‌اندازی و SPA محلی Switching to a Local Setup & SPA

• با استفاده از بسته "create-react-app". Using the "create-react-app" Package

• درک پروژه ایجاد شده Understanding the Created Project

• اضافه کردن React Router و Routes برای برنامه Adding React Router and Routes for the App

• افزودن لینک ها Adding Links

• بسته شدن Wrap Up

React.js - مقدمه React.js - An Introduction

• معرفی ماژول Module Introduction

• استفاده از React.js برای ایجاد یک برنامه پایه Using React.js to Create a Basic App

• استفاده از React.js برای ایجاد یک برنامه پایه Using React.js to Create a Basic App

• درک نحوه عملکرد React.js و JSX Understanding How React.js Works and JSX

• خروجی محتوای پویا Outputting Dynamic Content

• خروجی محتوای پویا Outputting Dynamic Content

• مدیریت رویدادها و به روز رسانی DOM Handling Events and Updating the DOM

• مدیریت رویدادها و به روز رسانی DOM Handling Events and Updating the DOM

• ایجاد اولین کامپوننت Creating a First Component

• انتقال داده به کامپوننت ها (Props) Passing Data into Components (Props)

• ایجاد کامپوننت ها با استفاده از کلاس های ES6 Creating Components using ES6 Classes

• اطلاعات بیشتر در مورد ES6 More about ES6

• استفاده از State در React.js Components Using State in React.js Components

• استفاده از State در React.js Components Using State in React.js Components

• آنچه در پشت پرده اتفاق می افتد What Happens Behind the Scenes

• آنچه در پشت پرده اتفاق می افتد What Happens Behind the Scenes

• ارائه محتوای مشروط Rendering Conditional Content

• ارائه محتوای مشروط Rendering Conditional Content

• خروجی لیست ها Outputting Lists

• تنظیم پویا سبک ها Setting Styles Dynamically

• تنظیم پویا سبک ها Setting Styles Dynamically

• تنظیم کلاس های CSS به صورت پویا Setting CSS Classes Dynamically

• تنظیم کلاس های CSS به صورت پویا Setting CSS Classes Dynamically

• ورودی کاربر و اتصال دو طرفه User Input & Two-Way-Binding

• استفاده از چندین کامپوننت Using Multiple Components

• اجزای گنگ Dumb Components

• اجزای گنگ Dumb Components

• انتقال داده ها از کودک به والدین Passing Data from Child to Parent

• انتقال داده ها از کودک به والدین Passing Data from Child to Parent

• زمان تمرین - React.js - مشکل Time to Practice - React.js - Problem

• زمان تمرین - React.js - راه حل Time to Practice - React.js - Solution

• جابه‌جایی به راه‌اندازی و SPA محلی Switching to a Local Setup & SPA

• با استفاده از بسته "create-react-app". Using the "create-react-app" Package

• درک پروژه ایجاد شده Understanding the Created Project

• با استفاده از تنظیمات محلی Using the Local Setup

• با استفاده از تنظیمات محلی Using the Local Setup

• اضافه کردن React Router و Routes برای برنامه Adding React Router and Routes for the App

• افزودن لینک ها Adding Links

• افزودن لینک ها Adding Links

• روتر React و یک سرور The React Router and a Server

• روتر React و یک سرور The React Router and a Server

• بسته شدن Wrap Up

• منابع ماژول و منابع بیشتر Module Resources & Further Resources

Angular - مقدمه Angular - An Introduction

• معرفی ماژول Module Introduction

• در چه چیزی خوب است و چه چیزی خوب نیست What It's Good at and What It's Not Good At

• TypeScript - مقدمه ای کوتاه TypeScript - A Brief Introduction

• شناخت ساختار پروژه Understanding the Project Structure

• درک نقش مؤلفه ها و مؤلفه برنامه Understanding the Role of Components and the App Component

• نحوه شروع برنامه How the App Starts

• آشنایی با ماژول برنامه Understanding the App Module

• رسیدگی به رویدادها Handling Events

• ارائه محتوا به صورت مشروط Rendering Content Conditionally

• خروجی لیست ها Outputting Lists

• اتصال داده ها به ویژگی های (HTML و دیگر). Binding Data to (HTML and other) Properties

• اضافه کردن کلاس های CSS به صورت پویا Adding CSS Classes Dynamically

• استفاده از چندین کامپوننت Using Multiple Components

• انتشار رویدادهای سفارشی از کامپوننت ها Emitting Custom Events From Components

• استفاده از اتصال دو طرفه Using Two-Way-Binding

• زمان تمرین - Angular - راه حل Time to Practice - Angular - Solution

• افزودن لینک ها Adding Links

• روتر زاویه ای و سرور The Angular Router and the Server

• بسته شدن Wrap Up

• منابع ماژول و منابع بیشتر Module Resources & Further Resources

Angular - مقدمه Angular - An Introduction

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• در چه چیزی خوب است و چه چیزی خوب نیست What It's Good at and What It's Not Good At

• درک نسخه ی زاویه ای Understanding Angular Versioning

• درک نسخه ی زاویه ای Understanding Angular Versioning

• TypeScript TypeScript

• TypeScript TypeScript

• TypeScript - مقدمه ای کوتاه TypeScript - A Brief Introduction

• ایجاد یک پروژه Angular با CLI Creating an Angular Project with the CLI

• ایجاد یک پروژه Angular با CLI Creating an Angular Project with the CLI

• شناخت ساختار پروژه Understanding the Project Structure

• درک نقش مؤلفه ها و مؤلفه برنامه Understanding the Role of Components and the App Component

• نحوه شروع برنامه How the App Starts

• آشنایی با ماژول برنامه Understanding the App Module

• خروجی داده با درون یابی رشته ای Outputting Data with String Interpolation

• خروجی داده با درون یابی رشته ای Outputting Data with String Interpolation

• رسیدگی به رویدادها Handling Events

• ارائه محتوا به صورت مشروط Rendering Content Conditionally

• خروجی لیست ها Outputting Lists

• خروجی لیست ها Outputting Lists

• اتصال داده ها به ویژگی های (HTML و دیگر). Binding Data to (HTML and other) Properties

• اضافه کردن سبک های پویا به عناصر Adding Dynamic Styles to Elements

• اضافه کردن سبک های پویا به عناصر Adding Dynamic Styles to Elements

• اضافه کردن کلاس های CSS به صورت پویا Adding CSS Classes Dynamically

• چه زمانی از دستور * استفاده شود When to use the * Syntax

• چه زمانی از دستور * استفاده شود When to use the * Syntax

• استفاده از چندین کامپوننت Using Multiple Components

• انتقال داده ها به کامپوننت ها Passing Data Into Components

• انتقال داده ها به کامپوننت ها Passing Data Into Components

• انتشار رویدادهای سفارشی از کامپوننت ها Emitting Custom Events From Components

• استفاده از اتصال دو طرفه Using Two-Way-Binding

• زمان تمرین - زاویه ای - مشکل Time to Practice - Angular - Problem

• زمان تمرین - زاویه ای - مشکل Time to Practice - Angular - Problem

• زمان تمرین - Angular - راه حل Time to Practice - Angular - Solution

• استفاده از CLI برای تولید کامپوننت ها Using the CLI to Generate Components

• استفاده از CLI برای تولید کامپوننت ها Using the CLI to Generate Components

• تودرتو چند مولفه Nesting Multiple Components

• تودرتو چند مولفه Nesting Multiple Components

• سبک های محدوده به مولفه ها Scoping Styles to Components

• سبک های محدوده به مولفه ها Scoping Styles to Components

• افزودن مسیریابی و مسیرها Adding Routing & Routes

• افزودن مسیریابی و مسیرها Adding Routing & Routes

• افزودن لینک ها Adding Links

• افزودن لینک ها Adding Links

• روتر زاویه ای و سرور The Angular Router and the Server

• بسته شدن Wrap Up

• بسته شدن Wrap Up

• منابع ماژول و منابع بیشتر Module Resources & Further Resources

• منابع ماژول و منابع بیشتر Module Resources & Further Resources

مقایسه چارچوب ها Comparing the Frameworks

• معرفی ماژول Module Introduction

• ابعاد مقایسه احتمالی Possible Comparison Dimensions

• بعد 4: عملکرد Dimension 4: Performance

• بعد 5: سهولت استقرار (راهی از توسعه دهنده تا تولید) Dimension 5: Ease of Deployment (The Way from Dev to Production)

• بعد 6: محبوبیت و بازار کار Dimension 6: Popularity & Job Market

مقایسه چارچوب ها Comparing the Frameworks

• معرفی ماژول Module Introduction

• ابعاد مقایسه احتمالی Possible Comparison Dimensions

• بعد 1: منحنی یادگیری Dimension 1: The Learning Curve

• بعد 1: منحنی یادگیری Dimension 1: The Learning Curve

• بعد 2: کاهش مقیاس و برنامه های Fullstack Dimension 2: Downscaling & Fullstack Applications

• بعد 2: کاهش مقیاس و برنامه های Fullstack Dimension 2: Downscaling & Fullstack Applications

• بعد 3: ارتقاء مقیاس و SPA Dimension 3: Upscaling & SPAs

• بعد 3: ارتقاء مقیاس و SPA Dimension 3: Upscaling & SPAs

• بعد 4: عملکرد Dimension 4: Performance

• بعد 5: سهولت استقرار (راهی از توسعه دهنده تا تولید) Dimension 5: Ease of Deployment (The Way from Dev to Production)

• بعد 6: محبوبیت و بازار کار Dimension 6: Popularity & Job Market

• حکم The Verdict

• حکم The Verdict

• ... در مورد jQuery چطور؟ ...What About jQuery?

• ... در مورد jQuery چطور؟ ...What About jQuery?

• منابع ماژول Module Resources

• منابع ماژول Module Resources

خلاصه دوره Course Roundup

خلاصه دوره Course Roundup

• خلاصه دوره Course Roundup

• خلاصه دوره Course Roundup

• امتیاز: محتوای بیشتر! Bonus: More Content!

• امتیاز: محتوای بیشتر! Bonus: More Content!