تسلط بر 4 فریمورک برتر جاوا اسکریپت: سفر حماسی من

Summarize this content to 400 words in Persian Lang
آیا حاضرید در یک ماجراجویی هیجان انگیز از طریق دنیای چارچوب های جاوا اسکریپت به من بپیوندید؟ در این مجموعه، من تجربه عملی خود را در ساخت یک پروژه در دنیای واقعی با هر یک از 4 فریمورک برتر: React، Vue، Angular و Svelte به اشتراک خواهم گذاشت.

چرا این سفر؟

به‌عنوان یک توسعه‌دهنده، به‌روز ماندن با آخرین چارچوب‌ها و فناوری‌ها بسیار مهم است. با گزینه های بسیار زیاد، انتخاب گزینه مناسب برای پروژه شما می تواند دلهره آور باشد. با تسلط بر این چهار چارچوب، درک عمیق تری از نقاط قوت، ضعف و موارد کاربرد آنها به دست خواهید آورد.

پروژه: برنامه وبلاگ اجتماعی

در طول این مجموعه، ما یک برنامه وبلاگ غنی از ویژگی ها با موارد زیر ایجاد خواهیم کرد:

احراز هویت کاربر
ایجاد، خواندن، به‌روزرسانی و حذف پست (CRUD)
اظهار نظر در مورد پست ها
دنبال کردن نویسنده
و بیشتر!

بیایید شروع کنیم!

برای شروع، یک پروژه جدید برای هر فریم ورک با استفاده از دستورات CLI زیر ایجاد می کنیم:

pnpm create vite devflow-react –template react-ts

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

pnpm create vite devflow-vue –template vue-ts

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

npx -p @angular/cli@latest ng new devflow-angular –package-manager pnpm

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

npx sv create devflow-svelte

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستورات ساختار اصلی پروژه و وابستگی ها را برای هر فریم ورک تنظیم می کند. توجه داشته باشید که من سعی می کنم یک استاندارد را حفظ کنم. من از مدیریت بسته یکسان برای همه پروژه‌ها استفاده می‌کنم، و همچنین سعی می‌کنم تا حد امکان از کتابخانه‌های مشابه استفاده کنم. مانند tailwindcss، زیباتر و eslint.

پیکربندی esling، زیباتر و tailwindcss

برای اطمینان از کد زیبا و تمیز، علاوه بر پیروی از شیوه های توسعه خوب، نصب و پیکربندی eslint و زیباتر در پروژه هایمان ضروری است. من این کار را در هر یک از آنها انجام خواهم داد. همچنین، من از tailwindcss برای استایل استفاده خواهم کرد.

نصب وابستگی ها

React، Vue و Angular:

pnpm add -D eslint eslint-config-prettier globals typescript-eslint prettier prettier-plugin-tailwindcss tailwindcss postcss autoprefixer

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شیک:

توجه: از آنجایی که من یک پروژه svelte را با استفاده از sveltekit شروع کردم، پروژه اولیه از قبل با eslint، زیباتر و حتی tailwindcss پیکربندی شده است. در طول فرآیند ایجاد، CLI این گزینه ها را به ما ارائه می دهد. بنابراین نیازی به تنظیمات اضافی نیست.

پیکربندی eslint

Vue:

pnpm create @eslint/config@latest

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زاویه ای:

npx -p @angular/cli@latest ng lint

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توجه: React و Svelte قبلاً eslint را پیکربندی کرده‌اند

پیکربندی زیباتر

ایجاد یک .prettierrc فایل و موارد زیر را اضافه کنید

{
“singleQuote”: true,
“bracketSpacing”: true,
“printWidth”: 120
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک فایل به نام ایجاد کنید .prettierignore در ریشه پروژه فایل ها یا پوشه هایی را اضافه کنید که نادیده گرفته شوند، به عنوان مثال: ./node_modules/

پیکربندی tailwindcss

React and Vue:

تولید می کند tailwind.config.js و postcss.config.js فایل ها

npx tailwindcss init -p

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیکربندی مسیرهای الگو: افزودن مسیرها به همه فایل های قالب در فایل tailwind.config.js.

…
content: [
“./index.html”,
“./src/**/*.{vue,js,ts,jsx,tsx}”,
],
…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زاویه ای:

npx tailwindcss init

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیکربندی مسیرهای الگو: افزودن مسیرها به همه فایل های قالب در فایل tailwind.config.js.

…
content: [
“./src/**/*.{html,ts}”,
],
…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Svelte: کاری برای انجام دادن نیست!

افزودن دستورالعمل‌های Tailwind به CSS: افزودن دستورالعمل‌های tailwind@ برای هر یک از لایه‌های Tailwind به ./src/styles.css یا ./src/index.css فایل

React، Vue و Angular:

@tailwind base;
@tailwind components;
@tailwind utilities;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Svelte: کاری برای انجام دادن نیست!

در مقالات آینده، به موارد زیر می پردازیم:

اجرای احراز هویت و مجوز
ساختن ویژگی های اصلی وبلاگ و CRUDS
ادغام نظر دادن و دنبال کردن کاربر
بهینه سازی عملکرد و استقرار

به سفر بپیوندید!

با به اشتراک گذاشتن تجربیات، نکات و بینش خود همراه باشید. چه یک توسعه‌دهنده مبتدی یا باتجربه باشید، این مجموعه دانش عملی و مقایسه‌ای بین این چارچوب‌های برتر جاوا اسکریپت را ارائه می‌دهد.

منتظر مقاله بعدی باشید، جایی که ما ساختن وبلاگ خود را شروع می کنیم!

درباره من

من به عنوان یک توسعه دهنده وب از راه دور اختصاصی، در ساخت برنامه های وب مدرن و مقیاس پذیر با تمرکز بر عملکرد و تجربه کاربر تخصص دارم. تخصص من در توسعه تمام پشته، با استفاده از فناوری‌های پیشرفته و بهترین شیوه‌ها برای ارائه راه‌حل‌های مناسب برای نیازهای مشتریان متنوع است. من متعهد به ایجاد وب سایت های واکنش گرا و پویا هستم که ایده ها را زنده می کنند. برای دیدن آخرین پروژه های من، نمونه کارها من را اینجا کاوش کنید، و در لینکدین با من در ارتباط باشید تا در مورد اینکه چگونه می توانم به تحقق پروژه بعدی شما کمک کنم، صحبت کنید!

pnpm create vite devflow-react --template react-ts

pnpm create vite devflow-vue --template vue-ts

npx -p @angular/cli@latest ng new devflow-angular --package-manager pnpm

npx sv create devflow-svelte

pnpm add -D eslint eslint-config-prettier globals typescript-eslint prettier prettier-plugin-tailwindcss tailwindcss postcss autoprefixer

pnpm create @eslint/config@latest

npx -p @angular/cli@latest ng lint

{
  "singleQuote": true,
  "bracketSpacing": true,
  "printWidth": 120
}

npx tailwindcss init -p

...
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
...

npx tailwindcss init

...
  content: [
    "./src/**/*.{html,ts}",
  ],
...

@tailwind base;
@tailwind components;
@tailwind utilities;