| کانال توسعه‌دهندگان وب |

Public

مشاهده کانال

نمی‌توانید بپیوندید؟ @DevelopixWeb

۳.۱k عضو

به‌روزرسانی شده: May 16, 2026 at 8:26 PM

| کانال توسعه‌دهندگان وب |

⭕️ کانال توسعه‌دهندگان وب دولوپیکس 💠 دولوپیکس | جامعه توسعه‌دهندگان ایرانی 💎 @Developix 🚀 Developix.ir 📌 پشتیبانی و تبلیغات: @DevelopixSupport

@DevelopixWeb offers specialized information about developix and developixir for subscribers interested in سریال‌های وب

رتبه‌بندی

رتبه‌بندی جهانی

#456

رتبه‌بندی زبان

#45

رتبه‌بندی دسته‌بندی

#23

-1

رشد مشترکان (6 روز گذشته)

مجموع: 3.1K

رشد 24 ساعت: +0 0%

آخرین پست‌ها

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

📷 Photo

در نمونه‌کد بالا در نسخه‌ی اول هر درخواست HTTP یک connection جدید به دیتابیس باز می‌کند و با هر کوئری یک round-trip اضافه به MySQL می‌زند. این الگو هم روی Performance (به‌خصوص در ترافیک بالا) اثر منفی دارد، هم ریسک Connection Exhaustion را بالا می‌برد. در نسخه‌ی بهینه با استفاده از Connection Pooling و اجرای کوئری‌های وابسته در قالب یک Transaction، هم تعداد round-tripها کم شده، هم ثبات داده‌ها حفظ می‌شود.

اگر در یک Web API Node.js با mysql2 یا هر Driver مشابه کار می‌کنید، بهتر است به جای باز کردن connection در هر handler، در لایه‌ی Infrastructure یک pool مشترک بسازید و در handlerها فقط از آن pool borrow کنید؛ این کار هم مقیاس‌پذیری سرویس را بهتر می‌کند، هم در شرایط ترافیک سنگین فشار روی دیتابیس و OS را کاهش می‌دهد.

برای مطالعه‌ی بیشتر درباره‌ی Connection Pooling در Node.js می‌توانید مستندات رسمی https://github.com/sidorares/node-mysql2#using-connection-pools را ببینید.

🔖 #Web #وب #Frontend #Backend

👤 Developix

💎 Channel:

956

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

تو خیلی از پروژه‌های وب، مخصوصاً وقتی React / Vue / Angular کار می‌کنی، نیاز به یک backend ساده برای تست و توسعه داری؛ چیزی که سریع بالا بیاد، JSON برگردونه و دردسر config زیاد هم نداشته باشه. اینجا Express دقیقاً همون چیزیه که لازم داری. 😎

این مطلب بر پایه داکیومنت رسمی Express نوشته شده:
https://expressjs.com/en/starter/hello-world.html

✅ ایده کلی
یک REST API خیلی مینیمال می‌سازیم که:

• با Node.js + Express راه می‌افته.
• یک endpoint مثل /api/users برمی‌گردونه.
• آماده است که از frontend (مثلاً با fetch در React) صداش بزنی.

۱) نصب اولیه پروژه
داخل یک فولدر خالی این دستورها رو اجرا کن:
npm init -y
npm install express cors

۲) ساخت سرور ساده Express
فایلی به اسم server.js بساز و این کد رو داخلش بذار:
const express = require('express');
const cors = require('cors');

const app = express();
const PORT = 4000;

app.use(cors());
app.use(express.json());

// GET /api/users
app.get('/api/users', (req, res) => {
const users = [
{ id: 1, name: 'Ali', role: 'admin' },
{ id: 2, name: 'Sara', role: 'user' },
];

res.json(users);
});

// POST /api/users
app.post('/api/users', (req, res) => {
const newUser = req.body;

if (!newUser.name) {
return res.status(400).json({ message: 'name لازم است' });
}

newUser.id = Date.now();
res.status(201).json(newUser);
});

app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

۳) اجرای سرور
داخل ترمینال:
node server.js
حالا روی آدرس:
http://localhost:4000/api/users
یک آرایه از userها می‌بینی.

برای تست سریع می‌تونی از https://www.postman.com/ یا https://insomnia.rest/ استفاده کنی، یا حتی با fetch از سمت frontend صداش بزنی.

چرا این کار عملی و مهمه؟
• موقع توسعه frontend لازم نیست صبر کنی backend اصلی تیم آماده بشه.
• می‌تونی شکل دقیق JSON رو خودت کنترل کنی.
• برای تمرین مفاهیم REST (GET/POST، status codeها، error handling) عالیه.

کد رو بردار، روی سیستم خودت اجراش کن و کم‌کم endpointهای جدید مثل /api/products یا /api/auth/login اضافه کن. هرچی زودتر یک API واقعی زیر دستت داشته باشی، سرعت رشدت در web dev چند برابر می‌شه. 🚀


🔖 #Web #وب #Frontend #Backend #Node_js #Express #API #Backend #Frontend #JavaScript #Web_Dev

👤 Developix

💎 Channel:

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

ساختن یک API کوچک و تمیز با Node.js و Express از اون کارهاییه که مستقیم توی پروژه‌های واقعی به کار میاد؛ از اتصال React/Vue گرفته تا ساخت پنل ادمین یا حتی یه سرویس موبایل.

این مدل API رو می‌شه دقیقاً بر اساس داک رسمی Express جلو برد:
https://expressjs.com/en/starter/hello-world.html

ایده‌مون 👇
یه REST API خیلی ساده برای مدیریت tasks می‌سازیم که از سمت Frontend (مثلاً React) قابل مصرف باشه:

• گرفتن لیست tasks
• اضافه کردن task جدید

نکته خوبش اینه که هم با ساختار یک Express app آشنا می‌شی، هم می‌فهمی چطور JSON رو هندل کنی و پاسخ استاندارد بدی.

اول باید Node.js نصب باشه. بعد توی یه فولدر خالی این کامندها رو بزن:

npm init -y
npm install express cors

حالا فایل index.js رو بساز و این کد رو بذار داخلش:

const express = require("express");
const cors = require("cors");

const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

let tasks = [
{ id: 1, title: "Learn Express", done: false },
{ id: 2, title: "Build a simple API", done: false }
];

// GET /api/tasks
app.get("/api/tasks", (req, res) => {
res.json(tasks);
});

// POST /api/tasks
app.post("/api/tasks", (req, res) => {
const { title } = req.body;
if (!title) {
return res.status(400).json({ error: "title is required" });
}

const newTask = {
id: tasks.length + 1,
title,
done: false
};

tasks.push(newTask);
res.status(201).json(newTask);
});

app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

حالا:

• با node index.js سرور رو بالا بیار.
• توی مرورگر برو به http://localhost:3000/api/tasks، باید یه آرایه JSON ببینی.
• برای تست POST از Postman یا افزونه REST Client یا حتی fetch در Frontend استفاده کن.

این ساختار کوچیک، پایه خیلی از پروژه‌های جدی‌تره:

• می‌تونی بعداً auth اضافه کنی.
• می‌تونی به جای آرایه، از MongoDB یا PostgreSQL استفاده کنی.
• می‌تونی همین API رو به یه React یا Vue app وصل کنی و یه Todo ساده ولی تمیز بسازی.

امتحانش کن، سرور رو بالا بیار و یه بار واقعی باهاش دیتا رد و بدل کن؛ از اون چیزهایی‌ست که بعدش کار با Backend خیلی طبیعی‌تر به نظر می‌رسه. اگر مفید بود، برای بقیه هم‌تیمی‌ها هم بفرست تا همه روی یک استک مشترک تمرین کنید.

🔖 #Web #وب #Frontend #Backend #Node_js #Express #REST_API #Backend #Frontend #JavaScript #Web_Development #Tutorial

👤 Developix

💎 Channel:

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

‏Clean Architecture در یک سرویس ساده Node.js 🧱

یکی از مشکل‌های همیشگی پروژه‌های وب این است که بعد از چند ماه، همه‌چیز توی یک فایل یا یک لایه قاطی می‌شود: route منطق بیزینسی دارد، مستقیم به DB وصل می‌شود و تست‌ گرفتن هم کابوس می‌شود.

اینجا جایی است که ایدهٔ Clean Architecture به‌درد می‌خورد: جداکردن منطق بیزینسی از زیرساخت (مثل Express، DB، HTTP، و غیره) تا کد قابل‌تست و قابل‌توسعه بماند. 🎯

در ساده‌ترین حالت، فقط همین اصل را رعایت کنید:
Use Case / Domain لایهٔ مرکزی ➜ Framework و DB در لبه‌ها

یعنی:
• Route فقط ورودی/خروجی HTTP را مدیریت کند ✅
• منطق اصلی در یک Service یا Use Case مستقل باشد ✅
• Service هیچ وابستگی مستقیم به Express یا driver خاص DB نداشته باشد ✅

یک نمونهٔ خیلی ساده در Node.js + Express:

// userService.js (لایه Domain / Use Case)
class UserService {
constructor(userRepo) {
this.userRepo = userRepo; // وابستگی به interface، نه به Express
}

async registerUser(data) {
const { email, password } = data;

if (!email || !password) {
throw new Error("Invalid data");
}

const exists = await this.userRepo.findByEmail(email);
if (exists) {
throw new Error("Email already used");
}

// اینجا می‌توانید hashing، ruleها و ... را قرار دهید
return this.userRepo.create({ email, password });
}
}

module.exports = UserService;

حالا لایهٔ زیرساخت (Express + یک repo ساده):

// userRepo.js (لایه Infrastructure)
const users = [];

module.exports = {
async findByEmail(email) {
return users.find(u => u.email === email) || null;
},
async create(user) {
users.push(user);
return user;
}
};

// routes.js
const express = require("express");
const UserService = require("./userService");
const userRepo = require("./userRepo");

const router = express. Router();
const userService = new UserService(userRepo);

router.post("/register", async (req, res) => {
try {
const user = await userService.registerUser(req.body);
res.status(201).json(user);
} catch (err) {
res.status(400).json({ error: err.message });
}
});

module.exports = router;

چند نکتهٔ عملی از تجربهٔ پروژه‌های واقعی 🌱

• منطق اصلی را همیشه در Service / Use Case نگه دارید، نه داخل controller / route.
• وابستگی‌ها را به‌سمت لبه‌ها ببرید؛ Domain نباید Express، HTTP status code یا driver خاص DB را بشناسد.
• این ساختار روی Next.js API Routes، Nest.js، Laravel و Django هم کاملاً قابل‌پیاده‌سازی است.

برای مطالعهٔ عمیق‌تر ایده‌ها:
https://martinfowler.com/articles/layered-architecture.html
https://refactoring.guru/design-patterns

همان‌قدر که پروژه بزرگ‌تر می‌شود، همین جداسازی ساده بین Domain و Infrastructure می‌تواند نجات‌دهنده باشد. دفعهٔ بعدی که یک feature جدید می‌نویسید، از همین الگوی کوچک شروع کنید و قدم‌به‌قدم کد را تمیزتر نگه دارید. 🚀

🔖 #Web #وب #Frontend #Backend #Clean_Architecture #Node_js #Express #Design_Patterns #Web_Development #Backend #Refactoring

👤 Developix

💎 Channel:

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

📷 Photo

🚀 سرور اختصاصی با تنوع منابع برای هر نوع نیاز
⏺پورت اختصاصی
⏺آپلود رایگان
⏺تخفیف پلکانی ترافیک
⏺آپتایم 99.99%
⏺24 ساعت تست رایگان
⏺رائه IP مازاد
⏺پشتیبانی 24/7
⏺تحویل فوری
⏺ارائه سرویس Colocation
⏺بدون قطعی
⏺پرداخت ماهیانه

⏰ تعداد محدود – برای استفاده از این تخفیف ویژه سریع اقدام کن!
برای اطلاعات بیشتر و سفارش، تماس بگیر:
🔺 02191555530
💻 https://b2n.ir/te2617

442

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

📷 Photo

⭕️ ویراک کلود
زیرساختی مطمئن برای کسب و کارهای آنلاین
🎁 20% شارژ بیشتر روی اولین واریزی
⚡️با کد معرف: 10%  شارژ برای شما و 10% برای دوستتان!

🔘با IPv6 رایگان
🔘با IP مازاد
🔘تست رایگان 2 روزه
🔘فایروال اختصاصی
🔘با API برای حرفه‌ای ها
🔘پشتیبانی 24 ساعته
🔘آپلود رایگان


📞 همین حالا با ما تماس بگیرید و این فرصت فوق‌العاده رو از دست ندید!
🔻02191555530
🌐 https://virakcloud.com/

485

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

📷 Photo

👨‍💻 سوال کد برای توسعه‌دهندگان وب (JavaScript)

خروجی نهایی اجرای کد زیر در console چیست؟

به تفاوت execution context در arrow function و تابع معمولی، و همین‌طور رفتار this و arguments دقت کنید.

function outer() {
const result = [];

const obj = {
value: 10,
normal: function (x) {
result.push("normal:" + this.value + "," + arguments.length);
(function () {
result.push("iife:" + (this.value ?? "undefined"));
})();
},
arrow: (y) => {
result.push("arrow:" + (this.value ?? "undefined") + "," + (typeof arguments));
}
};

obj.normal(1, 2);
obj.arrow(3);

return result.join(" | ");
}

console.log(outer());

خروجی دقیق console.log(outer()) را بنویسید (همان رشته کامل، با همان ترتیب و کاراکترها).

🔖 #Web #وب #Frontend #Backend

👤 Developix

💎 Channel:

789

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

📷 Photo

📌 در این قطعه کد JavaScript، روی یک آرایه از اعداد عملیات sort، map و join انجام شده است. دقت کنید که sort به‌صورت پیش‌فرض روی رشته‌ها کار می‌کند و همچنین scope متغیر factor در تابع multiply تغییر می‌کند.

خروجی نهایی اجرای این کد در کنسول چیست؟

const nums = [3, 12, 2, 21, 5];

function multiply(arr, factor = 2) {
arr.sort();
factor = 10;
return arr
.map((n, i) => n * (factor - i))
.join("-");
}

console.log(multiply(nums));
console.log(nums.join(","));

🔖 #Web #وب #Frontend #Backend

👤 Developix

💎 Channel:

1,060

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

🌙 Dark Mode با یک کلاس روی 

خیلی وقت‌ها برای پیاده‌سازی Dark Mode کلی if/else توی JS و کلی selector توی CSS می‌نویسیم، درحالی‌که می‌شه همه‌چیز رو تمیز و مقیاس‌پذیر با یک کلاس روی ریشه‌ی سند مدیریت کرد.

✅ ایده:
فقط روی تگ  یک کلاس مثل .dark ست می‌شه و بقیه‌ی استایل‌ها بر اساس همون کلاس عوض می‌شن. این الگو توی خیلی از Design Systemها و کتابخونه‌ها استفاده می‌شه.

🔧 نمونه‌ی ساده:
/* حالت پیش‌فرض (Light) */
:root {
--bg: #ffffff;
--fg: #111827;
}

/* وقتی Dark Mode فعاله */
html.dark {
--bg: #0f172a;
--fg: #e5e7eb;
}

body {
background-color: var(--bg);
color: var(--fg);
transition: background-color 150ms ease, color 150ms ease;
}


و در JS فقط یک بار toggle انجام می‌شه:
const root = document.documentElement;

function toggleTheme() {
root.classList.toggle('dark');
}


✨ نکات کاربردی:
• با CSS Variable فقط یک‌بار رنگ‌ها رو تعریف می‌کنی و هرجا لازم بود از var(--bg) و var(--fg) استفاده می‌کنی.
• اگر تعداد رنگ‌ها زیاد شد، هنوز هم فقط در دو بلاک :root و html.dark ویرایش می‌شن و باقی کامپوننت‌ها دست نمی‌خورن.
• می‌شه این الگو رو با prefers-color-scheme هم ترکیب کرد تا بر اساس تم سیستم‌عامل، کلاس dark رو ست کنی.

📚 برای جزئیات بیشتر درباره CSS Custom Properties:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

امتحان این الگو روی یک صفحه‌ی ساده، سریع‌ترین راه برای مرتب کردن تم پروژه‌های بعدی است و جلو کلی refactor دردناک رو می‌گیره.

🔖 #Web #وب #Frontend #Backend #CSS #Dark_Mode #Frontend #Best_Practices #Web

👤 Developix

💎 Channel:

950

| کانال توسعه‌دهندگان وب |

۳۰ اردیبهشت ۱۴۰۵، ۲۲:۴۱

Next.js 🚀 برای توسعه‌دهندگان React

اگر با React کار می‌کنی و هنوز از Next.js استفاده نکردی، عملاً کلی قابلیت آمادهٔ Production رو از دست می‌دی؛ از SSR تا routing و image optimization بدون دردسر.

چرا Next.js؟
• Server-Side Rendering و Static Generation آمادهٔ استفاده 📦
• File-based routing؛ هر فایل در pages/ یک route است
• Image Optimization و next/image برای لود سریع‌تر
• API Routes برای ساخت backend سبک داخل همون پروژه

نصب سریع
npx create-next-app@latest my-app
cd my-app
npm run dev


یک صفحه ساده:
export default function Home() {
return سلام Next.js 👋
}


برای پروژه‌های Dashboard، Landing Page، یا SaaS که SEO و سرعت مهم است، Next.js معمولاً انتخاب امن و استاندارد است.

Docs رسمی 👇
https://nextjs.org/docs
https://github.com/vercel/next.js

یک پروژه کوچک با Next.js بساز و کم‌کم ساختار پیش‌فرضش رو با نیازهای خودت تطبیق بده؛ تجربهٔ خوبی برای معماری Frontend مدرن می‌دهد. ⚙️

🔖 #Web #وب #Frontend #Backend #Next_js #React #Web #SSR #Frontend

👤 Developix

💎 Channel:

1,090

| کانال توسعه‌دهندگان وب |

۱۶ اردیبهشت ۱۴۰۵، ۰۹:۲۶

Fastify — فریم‌ورک وب سریع و سبک برای Node.js که برای عملکرد بالا و توسعهٔ روان طراحی شده. 🚀

هدف: پاسخ‌دهی سریع به درخواست‌ها، مصرف کمتر منابع و تجربهٔ توسعه بهتر با معماری پلاگینی و پشتیبانی از TypeScript.

مزایا و نکات کلیدی:
• ⭐ عملکرد بالا و بهره‌وری بهتر نسبت به Express
• 🔌 اکوسیستم پلاگین با قابلیت‌ گسترش آسان
• 📐 اعتبارسنجی مبتنی بر schema (AJV) برای APIهای امن‌تر
• 🧾 لاگینگ پیش‌فرض با pino و پشتیبانی از TypeScript

نمونهٔ نصب و استفادهٔ ساده:
npm install fastify

const fastify = require('fastify')({ logger: true })

fastify.get('/', async (request, reply) => {
return { hello: 'world' }
})

fastify.listen({ port: 3000 })
.then(() => console.log('listening on 3000'))
.catch(err => fastify.log.error(err))


موارد کاربرد: APIهای با بار بالا، میکروسرویس‌ها، و سرویس‌هایی که به latency پایین حساس‌اند. نکتهٔ عملی: از schemaها برای تایپ امن و مستندسازی خودکار استفاده کنید. ✅

مستندات و گیت‌هاب: https://www.fastify.io/docs/latest/ — https://github.com/fastify/fastify

امتحانش کنید و تجربه‌تون رو در کانال به اشتراک بذارید. ⚡

#Fastify #NodeJS #توسعه_وب

🔖 #Web #وب #Frontend #Backend #Fastify #NodeJS #توسعه_وب

👤 Developix

💎 Channel:

1,340

Showing 11 of 11 posts

No more posts

رتبه‌بندی

ورود لازم است

نظرات کاربران (0)

هنوز هیچ نظری وجود ندارد. اولین نفری باشید که نظر خود را به اشتراک می‌گذارید!

کانال‌های تلگرام مرتبط

Loading recommended channels...

| کانال توسعه‌دهندگان وب |

| کانال توسعه‌دهندگان وب |

رتبه‌بندی

رشد مشترکان (6 روز گذشته)

آخرین پست‌ها

سلام Next.js 👋

رتبه‌بندی

نظرات کاربران (0)

کانال‌های تلگرام مرتبط

Reza Pahlavi | رضا پهلوی

Net Account | نت اكانت

مسلسل الاسيرة مدبلج

⚀بیـــماریهای زنان⚀

کانال دوازدهم | کنکور ۱۴۰۵

متجر MODRIĊ

جوهرة القصر

مسلسلات هندية مترجمة

کانال‌های تلگرام مرتبط

Reza Pahlavi | رضا پهلوی

Net Account | نت اكانت

مسلسل الاسيرة مدبلج

⚀بیـــماریهای زنان⚀

کانال دوازدهم | کنکور ۱۴۰۵

متجر MODRIĊ

جوهرة القصر

مسلسلات هندية مترجمة

نظرات کاربران (0)

آخرین پست‌ها

سلام Next.js 👋