Dev Fuel – Telegram
Dev Fuel
144 subscribers
41 photos
12 videos
28 links
تو این چنل قراره در مورد تکنولوژی های مختلف برنامه نویسی ، خصوصا JS با هم کلی چیز یاد بگیریم.
(بیشتر حول محور بک اند).
Download Telegram
خب من قبل اینکه کاملا بپردازم به gRPC ، یه چیزایی رو قبلش توضیح میدم برای اونایی که نمیدونن. یه سری موارد پایه از REST API و ارتباط بین سیستم‌ها ، به شکل ساده.

اول از همه :
💡 ارتباط بین سیستم‌ها چیه و چرا نیازه؟
وقتی شما یک اپ یا چند تا سرویس داری (فرقی نداره اپ موبایل، وب یا سرویس‌های بک‌اند)، اینا باید با هم حرف بزنن.
برای این حرف زدن، یک پروتکل (قرارداد ارتباطی) لازمه.

مثلاً:
مرورگر با سرور حرف می‌زنه (مثلاً وقتی یک صفحه باز می‌کنی)
یک میکروسرویس به سرویس دیگه پیام می‌ده (مثلاً سرویس پرداخت به سرویس سفارش)
خب ما در این میان نیاز داریم به یک سبک ، که بتونیم داده ها رو بین این دو انتقال بدیم و این ها با هم حرف بزنند درسته؟
ما می‌تونیم از REST API استفاده کنیم.

🤔حالا REST API چیه؟

-یه سبک طراحی API روی HTTP :
-می‌گه چطور URL ها و متدها رو طراحی کنی تا منابع (resource) رو مدیریت کنی.
-داده‌ها عموماً JSON هستن (REST محدود به JSON نیست، ولی در عمل برای وب و موبایل اکثراً از JSON استفاده می‌شه چون human-readable و استاندارد de-facto شده.
(می‌تونه XML، HTML یا حتی باینری هم باشه)).
-ساده و عمومی هست (برای مرورگر، موبایل، هر چی).

😦مشکل REST API چیه؟

بنده خدا مشکل خاصی نداره ، خیلی هم پر طرفداره به شدت هم استفاده میشه از این سبک ، ولی :

- حجم JSON زیاده (نسبت به باینری)
-مدیریت استریم (داده‌های زنده) سخت
-معمولا رو HTTP/1.1 هست → connection reuse و multiplexing نداره

حالا اینجاست که پای gRPC میاد وسط.
👍2
🤔حالا gRPC چیه ؟
ایشون یک سیستم RPC مدرن و متن‌باز هست که توسط Google توسعه داده شده و اجازه می‌ده سرویس‌ها سریع، کارآمد و ایمن با هم ارتباط برقرار کنند. حالا یا به شکل شبکه داخلی یا خارجی.
*منظور از شبکه داخلی، همون شبکه خصوصی یا داخلی سازمانه که سرویس‌ها داخلش با هم ارتباط دارن.

🤔ویژگی هاش چیه؟
-از HTTP/2 برای انتقال داده استفاده می‌کنه.
-پیام‌ها رو به صورت باینری (با استفاده از Protocol Buffers یا همون ProtoBuf) رد و بدل می‌کنه.
-ارتباط‌ها رو سینکرون یا استریم (data streaming) می‌کنه.
-و Cross-language هست (مثلاً یک سرویس با Go بنویسی و با Node.js صداش بزنی).

🧐و ایشون دقیقا چه مشکلی رو برای ما حل می‌کنه ؟
فرض کنید یه سیستم میکروسرویس دارید و می‌خواید سرویس ها به صورت استاندارد و سریع با هم حرف بزنند.
اگه بخوایم به شکل REST API این کار رو انجام بدیم 🤓:

-جواب می‌ده، ولی حجم داده‌های JSON بزرگه و پارس کردنش زمان‌بره.
-مدیریت استریم داده در REST خیلی دست و پا گیره.
-نیاز داری قرارداد (Contract) بین سرویس‌ها شفاف و type-safe باشه.

😮حالا اگه از gRPC استفاده کنیم چی میشه اونوقت؟
سریع‌تر از REST چون از داده‌های باینری (ProtoBuf) استفاده می‌کنه و روی HTTP/2 سوار شده که بهینه‌تره.
- قراردادها (با ProtoBuf) تضمین می‌کنه سرویس‌ها اشتباه داده نفرستن یا انتظار داده‌ی اشتباه نداشته باشن.
- پشتیبانی از استریم دو طرفه .
- ارتباط راحت بین زبان‌های مختلف.

خب ، با توجه به توضیحاتی که در پیام قبل و در این پیام دادم ، فکر کنم تا به حال متوجه شده باشید که gRPC چیه و فرقش با REST API چیه.
و شاید سوال پیش بیاد که پس gRPC فقط برای ارتباط بین سرویس هاست و کاربرد دیگه ای نداره؟

چرا داره ، gRPC فقط محدود به برقراری ارتباط بین سرویس ها نمیشه و مثلا با قابلیت stream که داره می‌تونیم در چت های زنده ،استریم ویدیو ، بازی های آنلاین و ... هم استفاده کنیم.
ما حتی می‌تونیم برای ارتباط با مرورگر به واسطه gRPC-web با مرورگر هم ارتباط بر قرار کنیم .

ولی چون gRPC به طور مستقیم توسط مرورگرها پشتیبانی نمی‌شه، gRPC-web توسعه داده شده که البته نسبت به gRPC اصلی محدودیت‌هایی مثل پشتیبانی ناقص از استریم دو طرفه داره. به همین دلیل همچنان در خیلی از موارد ارتباط مرورگر و سرور با REST یا WebSocket انجام می‌شه.

پس میشه گفت gRPC بزرگترین کاربردش ارتباط بین سرویس هاست و gRPC یکی از بهترین گزینه‌ها برای ارتباط بین سرویس‌ها به‌ویژه در معماری‌های میکروسرویس یا سیستم‌هایی با چند زبان برنامه‌نویسیه.
1👍1
خب حالا یه مثال کوچیک از نحوه استفاده از gRPC نزنیم؟
فرض کنید یک میکروسرویس برای پرداخت یک سفارش داریم.

برای اینکه این از gRPC استفاده کنیم نیازه یک فایل با پسوند .proto بسازیم ، و با سینتکس مخصوص خودش سرویسمون رو تعریف کنیم. سپس ابزار protoc (کامپایلر proto) اون رو برامون تبدیل می‌کنه به کد مخصوص اون زبانی که سرویسمون رو داریم باهاش می‌سازیم. (مثلا TS)

syntax = "proto3";

package payment;

// پیام ورودی سرویس پرداخت
message PaymentRequest {
string order_id = 1;
double amount = 2;
string currency = 3;
}

// پیام خروجی سرویس پرداخت
message PaymentResponse {
bool success = 1;
string transaction_id = 2;
string message = 3;
}

// تعریف سرویس
service PaymentService {
// متد ساده برای انجام پرداخت
rpc ProcessPayment(PaymentRequest) returns (PaymentResponse);
}

توضیح این تکه کد :
سرویس ما اسمش هست PaymentService
یه تابع داره به اسم ProcessPayment
ورودی‌ش PaymentRequest هست (شامل order_id و مبلغ و واحد پول)
خروجی‌ش PaymentResponse هست (موفق بود یا نه، آیدی تراکنش و یه پیام)

این هم یه نمونه استفاده از gRPC. در نهایت هم باید بگم که قطعا این نمونه برای یادگیری gRPC کافی نیست ، توضیحات من هم جامع و کامل نبود. ولی همینکه سر نخی بهتون داده باشم که کاربرد gRPC چیه و اصلا کجا باید ازش استفاده کنیم برای من کافیه ، و شما می‌تونید مثل یک کارآگاه دنباله اش رو بگیرید و ازش استفاده کنید.

📄داکیومنت gRPC
https://grpc.io/

☑️ویدیو یه مثال ساده پیاده‌سازی gRPC در NestJS رو نشون می‌ده.
https://www.youtube.com/watch?v=UkWcjVWs2UQ
5
Dev Fuel pinned «خب ، شروع کارمون با gRPC باشه. چیزی که کنجکاو شدم راجع بهش بدونم و هرچیزی که یاد گرفتم رو اینجا به اشتراک می‌ذارم. البته قبلش بگم که کلا هر چیزی که من در این کانال میگم ، قطعا کافی نیست (چه بسا شاید ایراداتی هم داشته باشه و من از شما یاد بگیرم. در کل هدفم…»
وایب کدینگ (Vibe Coding) چیه؟ بریم سمتش؟ 👀
📣 نظر ماکسیمیلیان درباره Vibe Coding:

👨‍💻 ماکسیمیلیان به نقل از شخصی به نام Andrej Karpathy در پلتفرم X، وایب کدینگ رو این‌شکلی توصیف می‌کنه:
«در وایب کدینگ شما کاملاً فراموش می‌کنید که اصلاً کدی وجود داره، چرا که LLMها مثل Sonnet و... خیلی خوب شده‌اند. بنابراین من به سختی به صفحه‌کلید کیبورد دست می‌زنم. من هر چیزی که هوش مصنوعی می‌نویسد را می‌پذیرم و دیگر تفاوت‌ها را نمی‌خوانم. وقتی پیغام‌های خطا را دریافت می‌کنم، معمولاً آن‌ها را بدون هیچ توضیحی فقط کپی‌پیست می‌کنم و معمولاً این مشکل را حل می‌کند.
من در حال ساخت یک پروژه وب هستم اما "واقعاً کدنویسی نیست"... فقط چیزهایی می‌بینم و چیزهایی می‌گویم، چیزهایی اجرا می‌کنم و چیزهایی را کپی‌پیست می‌کنم. بیشتر اوقات کار می‌کند.» ⚙️🤖

ماکسیمیلیان در ادامه توضیح می‌ده که:
بله درسته، شما با وایب کدینگ می‌تونی خیلی چیزها بسازی. بسیاری از کاربران از تجربه خودشون در کدنویسی به شکل وایب کدینگ گفتند.
می‌شه به شکل وایب کدینگ چیزهای خیلی جالبی ساخت، اما نه به‌صورت کامل! و مشکل وایب کدینگ برای افرادی که نمی‌دونند چطور کد بزنند اینه که صفر یا صدی‌ست! یعنی یا می‌تونی باهاش یه چیز رو کامل بسازی یا کلاً نمی‌تونی.
مثلاً ممکنه ۹۰ درصد کد با وایب کدینگ نوشته بشه اما اون ۱۰ درصد نیاز به کدنویسی خود کدنویس داره. ⚠️

🤔 ماکسیمیلیان از تجربه خودش در وایب کدینگ می‌گه:
من به‌صورت استریم وایب کدینگ کردم و سعی کردم یه برنامه ساده با React Native بنویسم ولی شکست خورد! ظاهر برنامه افتضاح بود و کلی باگ داشت.
من حدوداً ۲ ساعت سعی کردم به این شکل کدنویسی کنم و شکست خورد. درسته اگر چند ساعت وقت بیشتری می‌ذاشتم شاید درست می‌شد.
اما مشکل من با وایب کدینگ اینه: من نمی‌خوام چندین ساعت وقت بذارم و فقط بپرسم و بپرسم و بپرسم. من می‌تونم خیلی جلوتر برم اگه خودم کد بزنم. چرا باید از LLM چیزی رو بپرسم که خودم جوابش رو می‌دونم؟ ⌨️💭

در ادامه:
من از هوش مصنوعی به‌عنوان دستیار قطعاً استفاده می‌کنم و سرعت من رو بالاتر برده، اما همچنان من مسئول هستم و می‌دونم که چی می‌خوام. من هوش مصنوعی رو رهبری می‌کنم. 🧭

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

البته که وایب کدینگ برای افرادی که کدنویسی بلد نیستند باارزشه و می‌تونند اون چیزی که دوست دارند رو بسازند. اما وقتی فقط و فقط به‌واسطه وایب کدینگ برنامه‌ای ساخته می‌شه، بعدش من باید مدام نگران این باشم که چه باگ‌هایی ممکنه داشته باشه، چه نواقص امنیتی می‌تونه داشته باشه. 🛡️
البته که ما انسان‌ها هم وقتی خودمون چیزی رو می‌سازیم ممکنه اشتباه کنیم و باگ‌هایی به وجود بیاد. ولی می‌دونیم که کد چطوری نوشته شده، چه ویژگی‌هایی داره و کجاها باید مراقب باشیم.
درسته شاید AI هم بدونه این‌ها رو ولی ممکنه که رعایت نکنه اصلاً!

در نهایت اینکه من دوست دارم کنترل داشته باشم، بدونم دقیقاً چی نوشته شده. باید با پروژه‌م احساس راحتی کنم.
شاید بقیه مردم چنین احساسی نداشته باشند، به‌راحتی کدهای نوشته‌شده توسط AI رو بدون بازبینی استفاده کنند. ولی بعدش واقعاً باید امیدوار باشی که هیچ‌وقت به یک ارور جدی که ممکنه شما رو به دردسر قانونی بندازه برخورد نکنید. ⚖️

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

به نظرم ماکسیمیلیان خیلی بی‌طرفانه و درست گفته و من باهاش موافقم.نظر شما چیه؟🤔

🔗 لینک ویدیو :
https://youtu.be/VQFvugpxNJE?si=YK1i9-0dXDWpQQc3

👨‍💻🔥 Dev Fuel

#vibe_coding
🔥3
وایب کدینگ (Vibe Coding) چیه؟ بریم سمتش؟ 👀

وایب کدینگ (Vibe Coding) یعنی برنامه‌نویسی بدون حس برنامه‌نویسی!
ماکسیمیلیان به نقل از Andrej Karpathy توضیح می‌ده که تو این سبک، دیگه عملاً کدی نمی‌نویسی. فقط به هوش مصنوعی می‌گی چی می‌خوای، اون کد تولید می‌کنه، تو هم اجراش می‌کنی — حتی وقتی ارور می‌گیری، بدون خوندنش کپی/پیست می‌کنی! 🤖

وایب کدینگ واقعاً می‌تونه خیلی کارا رو راه بندازه، ولی فقط تا یه حد. ماکسیمیلیان می‌گه مشکل اصلی اینه که این روش برای کسی که بلد نیست کد بزنه، یا همه‌چی درسته یا هیچی درست نمی‌شه!
۹۰٪ پروژه ممکنه با AI ساخته بشه، اما اون ۱۰٪ نیاز به درک و دانش واقعی داره. 🔧

🧪 خودش سعی کرده با وایب کدینگ یه اپ ساده با React Native بسازه، ولی نتیجه افتضاح بوده: ظاهر خراب، کلی باگ، اتلاف وقت. چون برای کارهای جدی، وایب کدینگ بدون دانش، فقط سرگیجه میاره!

🧭 نتیجه‌گیری؟
هوش مصنوعی باید دستیار باشه، نه تصمیم‌گیر. وقتی تو بدانی چی می‌خوای و چطور باید ساخته بشه، وایب کدینگ می‌تونه کمکت کنه، ولی نمی‌تونه جایت تصمیم بگیره.

⚠️ اگه فقط به AI تکیه کنی، باید امیدوار باشی که بعداً به یه باگ یا مشکل امنیتی بزرگ نخوری — مخصوصاً وقتی حتی ندونی AI چی نوشته!

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

🤖 خلاصه سازی شده متن بالا درباره وایب کدینگ توسط هوش مصنوعی

👨‍💻🔥 Dev Fuel

#vibe_coding #ai_summarized@dev_fuel
3
یه نکته ریز در ران کردن کانتینر داکر
وقتی کانتینری دارید که نیاز به ترمینال (مثل ubuntu یا هر کانتینری با shell) داره، حتما یادتون باشه -i رو هم در کنار -a بزنید، یا همون -ai .

تفاوتشون چیه؟
🔹فلگ ‌-a فقط خروجی (log) کانتینر رو نشون می‌ده، ولی نمیشه چیزی تایپ کرد (ورودی نداره).
🔹فلگ ‌-i علاوه بر نمایش خروجی، ورودی (stdin) رو باز می‌کنه تا بشه تایپ کرد و به کانتینر فرستاد.

❗️ نکته مهم:
کانتینر رو باید از اول با docker run -it ساخت تا ترمینالش درست کار کنه.

#docker #tip
1🔥1
به عنوان یه برنامه نویس ( خصوصا بک اند ) نیازه که راجع به سیستم دیزاین بدونید.

پیشنهاد می‍کنم اگه خیلی آشنایی ندارید و یا تازه کار هستید (حتی اگه تازه کار هم نباشید خیلی به درد میخوره) این دوره رو ببینید دید خیلی خوبی بهتون میده.
من خودم دارم این دوره رو می‍بینم و اگه چیزی برام جالب به نظر اومد حتما اینجا به اشتراک می‍ذارم.

❗️دوره به زبان انگلیسی هست.

https://downloadly.ir/elearning/video-tutorials/system-design-for-beginners/

#cource #system_design
1
❗️از async/await تو حلقه‌های forEach استفاده نکنید!

خیلی وقت ها لازمه توی کد های بک اند مثلا برای پردازش دیتا یا ارسال چند ریکویست به سرویس خارجی و یا ذخیره چندین رکورد و ... ، روی یک آرایه حلقه بزنیم.
استفاده از این کد توصیه نمیشه :
items.forEach(async (item) => {
await this.doSomething(item);
});


چون متد forEach await رو درست مدیریت نمیکنه و ممکنه کد ها به صورت موازی یا ناهماهنگ اجرا بشه. و نمیشه error handling کرد چون درست نمیشه catch کرد.
روش درست :
for (const item of items) {
await this.doSomething(item);
}


و یا میشه برای موازی بودن از :

await Promise.all(items.map(item => this.doSomething(item)));


استفاده کرد.

#tip #js
👍3
یه سری از کد های پروژه های قدیمی رو review کردم و به چندتا نکته بر خورد کردم که اینجا به یکیش اشاره می‌کنم.
توی این پروژه که Nest.js هم بود ، دیدم توی بعضی از سرویس ها (مثلا) چک کرده بودم که اگر این email بود بیا و ادامه بده در غیر این صورت :

throw new BadRequestException('Email already exists');


مشخصا این کد اصل DRY رو نقض می‌کنه.
*DRY (Don't Repeat Yourself)

و این Custom Pipe رو نوشتم :

@Injectable()
export class UniqueEmailPipe implements PipeTransform {
constructor(private readonly userService: UserService) {}

async transform(value: { email: string }, metadata: ArgumentMetadata) {
const exists = await this.userService.findByEmail(value.email);
if (exists) {
throw new BadRequestException('Email already exists');
}
return value;
}
}



سپس توی controller :

@Post()
create(@Body(UniqueEmailPipe) body: CreateUserDto) {
return this.userService.create(body);
}


این Custom Pipe در NestJS به‌عنوان بخشی از Request Pipeline عمل می‌کنه و داده‌های ورودی رو قبل از رسیدن به کنترلر یا سرویس اعتبارسنجی می‌کنه. این باعث می‌شه منطق اعتبارسنجی از بیزینس لاجیک جدا بشه.

نتیجه :
برای validation‌هایی که نیاز به وابستگی به سرویس دارن (مثل چک uniqueness تو دیتابیس)، استفاده از custom Pipe به جای چک‌های تکراری تو سرویس‌ها یک روش تمیز و استاندارده.

❗️می‌تونید از Middleware یا Custom Decorator هم استفاده کنید، ولی Pipe برای این سناریو ساده‌تر و مناسب‌تره.

#clean_code #nestjs
در رابطه با پست قبلی یک از دوستان پرسید که روی Param و Multipart Form Data هم میشه از Custom Pipe استفاده کرد؟
باید بگیم که بله میشه.

در مورد Param ، کلا در واقع هر جایی که بتونیم Decorator هایی مثل :

@Param(), @Query(), @Body()، @Headers()

و ... رو بزنیم ، Pipe هم می‌تونیم بهش attach کنیم.

یک نمونه کد از Param :

@Get(':id')
findOne(
@Param('id', CustomPipe) id: string
) {
//...
}



نمونه کد فایل :

@Post('upload')
@UseInterceptors(FileInterceptor('file'))
uploadFile(
@UploadedFile(FilePipe) file: File
) {
//...
}


و کد درون کلاس Pipe مون هم دقیقا همانند کلاسی هست که توی پست قبلی نوشتم.
2
چطور پارامترهای پیش‌فرض داینامیک برای تابع‌مون بسازیم؟🤔
می‌دونیم که می‌تونیم برای پارامتر های تابع‌مون یک مقدار پیش‌فرض بذاریم. مثال :

function greet(name="anonymous") {
console.log(`Hello , ${name}!`)
}


اما مقدار پیش‌فرض فقط به string یا number و bool محدود نمیشه! ما می‌تونیم از یک تابع به عنوان مقدار پیش‌فرض استفاده کنیم.
مثال:

function greet(name = getDefaultName()) {
console.log(`Hello, ${name}!`);
}

function getDefaultName() {
console.log('getDefaultName called!');
return 'Guest';
}

greet('Reza'); // Hello, Reza!
greet(); // Hello, Guest!



اینجا اگر name داده نشه، تابع getDefaultName() صدا زده می‌شه.
❗️ ولی نکته مهم اینه که فقط زمانی که پارامتر undefined باشه این تابع اجرا می‌شه. یعنی :

greet(undefined);  // Hello, Guest!
greet(null); // Hello, null!
greet('');


کاربرد : می‌تونیم مقادیر پیش‌فرض رو داینامیک بسازیم، مثلاً تاریخ، توکن، یا یه مقدار محاسبه‌ای و ... .

#tip #js
💪 پروکسی! (Proxy) ابزار قدرتمند و کاربردی در جاوااسکریپت

پروکسی چیه؟
پروکسی در جاوااسکریپت یه شیء هست که با استفاده از سازنده Proxy ساخته می‌شه و دو تا ورودی می‌گیره و اجازه می‍ده رفتار یک شیء یا تابع رو موقع دسترسی، تغییر، یا فراخوانی سفارشی‌سازی کنیم. مثل یه واسطه که می‌تونیم باهاش منطق خاصی رو به یه شیء اضافه کنیم بدون اینکه خود شیء تغییر کنه. چیزی که من خودم در اثر استفاده نکردن طولانی مدت تقریبا فراموشش کرده بودم ولی می‌تونه خیلی کمک کننده واقع بشه.

❗️اگه تا به حال با پروکسی کار نکرده باشید شاید توضیحات من اولش یکم براتون گنگ باشه. مشکلی نداره و من سعی می‌کنم با یک مثال قشنگ بفهمونم چیه. در نهایت هم سرچ فراموشتون نشه!

const proxy = new Proxy(target, handler);


همونطور که می‌بینید پروکسی دو تا ورودی می‌گیره. target و handler .

تارگت چیه؟
تارگت همون چیزی هست که قراره به واسطه پروکسی زیر نظر داشته باشیمش. می‌‌تونه تابع و یا شیء باشه.

هندلر چیه؟
هندلر جاییه که پروکسی به واسطه متد هایی که داره به ما اجازه میده تارگتمون رو کنترل کنیم.
که به این متد ها traps میگن. این traps ها متدهایی هستن که وقتی یه عملیاتی روی target انجام شد، اون‌ها رو گیر می‌ندازه (trap = تله) و بهت اجازه می‌ده رفتارش رو تغییر بدی.

چند تا از این traps ها و شکل کلی هندلر :

const handler = {
get(target, prop, receiver) {
// وقتی به پراپرتی دسترسی پیدا می‌کنی
},
set(target, prop, value, receiver) {
// وقتی پراپرتی تغییر می‌کنه
},
has(target, prop) {
// وقتی از in استفاده می‌کنی
},
deleteProperty(target, prop) {
// وقتی delete رو صدا می‌زنی
},
apply(target, thisArg, args) {
// وقتی Proxy برای تابع فراخوانی می‌شه
},
construct(target, args) {
// وقتی Proxy با new فراخوانی می‌شه
},
// و کلی متد trap دیگه...
};



در واقع handler مشخص می‌کنه Proxy چطور رفتار کنه وقتی عملیات‌هایی مثل get, set, delete و... روی target اتفاق می‌افته.

چندتا از کاربرد های پروکسی :

1- اعتبارسنجی (Validation)
2- لاگ گرفتن / دیباگ
3- حفاظت از داده‌ها (Access control)
4- ساخت API مجازی یا
5- پشتیبانی از داده‌های داینامیک (Dynamic properties)Mock
6-و...

در پست بعدی من یک مثال از اعتبارسنجی (Validation) می‌زنم و از متد set در این مثال استفاده می‌کنم.
1
خب حالا با استفاده از Proxy میخوام نام کاربر رو اعتبار سنجی کنیم. خلاصه وظیفه کد ما اینه :

در صورتی که تعداد کاراکتر نام کاربر بیشتر از 3 بود نام کاربر آپدیت بشه. در غیر اینصورت همان نام قبلی بمونه.

const target = {
name: 'Ali',
};

const handler = {
set(obj, prop, value) {
if (prop === 'name' && typeof value === 'string' && value.length >= 3) {
obj[prop] = value;
return true;
}
else if (prop !== 'name') {
obj[prop] = value;
return true;
}

return false;
},
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Ali

proxy.name = 'Mohammad';
console.log(proxy.name); // Mohammad

proxy.name = 'ML';
console.log(proxy.name); // Mohammad


پیشنهاد می‌کنم این کد رو خودتون یه بار بخونید و بعد در ادامه هر جایی که من به بخشی از کد اشاره کردم ، دوباره به اون بخش مراجعه کنید تا با هم پیش بریم.

خب ما در این مثال یک target داریم که آبجکت هست و آبجکت ما دارای پراپرتی name هست.
در ادامه ما proxy رو داریم که دو تا ورودی گرفته ، target , handler .
تارگت که مشخصه در این کد ما یک آبجکت هست با پراپرتی name و مقدار Ali ، اصل کار handler هست که بریم بررسیش کنیم.

ما توی handler از یک متد استفاده کردیم به نام set.
من درون این متد اومدم و نام کاربر رو چک کردم اگه تعداد کاراکترش بزرگ‌تر از 3 بود و اسم پراپرتی ما هم name بود و همچنین تایپ value برابر با string بود نام کاربر رو تغییر بده. در غیر اینصورت نام کاربر رو آپدیت نکنه.

حالا بریم نتیجه لاگ ها رو بررسی کنیم که دقیق تر بفهمیم چطور شد.

در لاگ اول ما Ali رو دریافت کردیم ، در اینجا متد get فراخوانی میشه که چون متد get رو توی handler تعریف نکردیم، دسترسی به پراپرتی به شکل پیش‌فرض (بدون دخالت Proxy) انجام می‌شه.

سپس اومدیم گفتیم :
proxy.name = "Mohammad"

این کد متد set ما رو فراخوانی می‌کنه و ما درون متد set اعتبار سنجی رو انجام دادیم و name رو آپدیت کردیم.
در خط بعدی name رو لاگ گرفتیم که طبق چیزی که انتظار داشتیم Mohammad رو برگردوند چون در خط قبلی آپدیت کرده بودیم.

در خط بعدی ما تلاش کردیم که نام کاربر رو به ML تغییر بدیم با این کد :
proxy.name = 'ML';

اما نام تغییر نکرد چون ما در شرطمون داخل متد set چک کرده بودیم که تعداد کاراکتر کمتر از 3 نباشه.

❗️در مورد return هایی که درون set استفاده کردم باید بگم که این return های ما زمانی کاربرد داره که کد درون strict mode باشه. و زمانی که false برگردونیم جاوااسکریپت یک خطا (TypeError) پرتاب می‌کنه و تغییر رو قبول نمی‌کنه. در حالت عادی (غیر strict) return false عملاً تاثیر خاصی نداره و مرورگر تغییر رو نادیده می‌گیره.

در این مثال من صرفا از متد set استفاده کردم ، ولی همونطور که گفته بودم Proxy متد های دیگه هم داره که در پست قبلی به چندتا از مهمترین هاش اشاره کردم.
حتما پیشنهاد می‌کنم راجع به متد های دیگه اون هم بخونید ، واقعا کاربردی هستند.

🔗 لینک MDN :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy



#js #proxy

👨‍💻🔥 Dev Fuel
آیا می‌توانیم با Next.js منطق بک‌اند پروژه‌مان را هم مدیریت کنیم؟ 🤔

خیلی‌ها این سوال رو می‌پرسن که آیا Next.js فقط برای فرانت‌انده یا می‌تونیم ازش برای بک‌اند هم استفاده کنیم؟
بله، می‌تونیم! اما ...

نکست‌جی‌اس یک فریمورک React با قابلیت‌های فول‌استک هست، اما محدود به دنیای JavaScript/TypeScript و محیط Node.js است.

فلسفه‌ی Next.js، سادگی در ساخت اپلیکیشن‌های فول‌استک بر پایه React هست، نه جایگزینی برای بک‌اندهای حرفه‌ای مثل NestJS یا Express.

از قابلیت‌های بک‌اندی Next.js میشه به این موارد اشاره کرد:
-استفاده از API Routes برای پیاده‌سازی سریع endpointهای ساده
-داشتن Middleware برای احراز هویت، rate-limiting و کنترل دسترسی
- امکان استفاده از Server-Side Rendering برای اجرای کدهای رندر فرانت‌اند در سمت سرور
-پشتیبانی از Edge Functions برای اجرای کد در نزدیک‌ترین لوکیشن به کاربر، با تأخیر پایین

و اما محدودیت‌ها :
دسترسی محدود به تنظیمات low-level سرور
سخت‌تر شدن پیاده‌سازی معماری‌های لایه‌لایه یا DDD
ساختار monolithic بودن، در تضاد با معماری microservices
شدیداً وابسته به React و JavaScript

کی استفاده کنیم؟
پروژه‌های کوچک تا متوسط – مثل پنل‌های ادمین یا وبسایت‌های شخصی
ای‌پی‌آی های ساده – عملیات CRUD معمولی
تیم React-focused – وقتی تیم فقط React بلده
شروع سریع – وقتی نمی‌خواید وقت زیادی صرف setup بک‌اند کنید

کی استفاده نکنیم؟
سیستم‌های پیچیده – با Business Logic سنگین
پروژه‌های بزرگ – نیاز به معماری مقیاس‌پذیر
اپلیکیشن‌های ریل‌تایم – راه‌اندازی WebSocket ممکنه، ولی مناسب بار بالا نیست
پردازش‌های سنگین – مثل File Processing یا Data Analysis

بک‌اند Next.js خوبه تا جایی که سادگی حفظ بشه.
اگه پروژه‌تون پیچیده‌تره، بهتره به سمت NestJS یا Express برید.

👨‍💻🔥 Dev Fuel

#nextjs
👍1
یکی از مشکلاتی که من در تولید محتوای برنامه نویسی دارم ، راست چین بودنشونه.
چون محتواها اکثرا انگلیسی و فارسی قاطی هستند ترتیب و ظاهرش بهم می‌خوره. در نتیجه مجبورم اول هر خط رو حتما فارسی بزارم که ترتیب بهم نخوره پس از این بابت تعجب نکنید 😅
کسی راه حلی داره که اول خط انگلیسی باشه ولی راست‌چین بمونه؟
👍4
چطور در تلگرام خط های چپ‌چین را راست‌چین کنیم؟ (دسکتاپ)

کافیه در ابتدای خطی که دارید می‌نویسید راست کلیک کنید ، و سپس گزینه Insert Unicode control character کلیک کنید ، و از بین گزینه های ظاهر شده گزینه دوم یعنی RLM انتخاب کنید.(مطابق عکس)

نمونه :
‏Hello سلام

#tip #telegram
🔥8
از هوش مصنوعی برای یادگیری استفاده کنیم؟🤔

هوش مصنوعی ابزار قدرتمندیه و خیلی کارها رو راحت می‌کنه ، اما این راحتی خیلی هم خوب نیست! خصوصا برای یادگیری. چرا؟

1⃣ یادگیری با لقمه حاضر اتفاق نمی‌افته. یادگیری با تحقیق و ریسرچ ، به دنبال چیزی رفتن و فهمیدنش اتفاق میفته. وقتی مستقیما از هوش مصنوعی سوال رو می‌پرسیم و جواب می‌گیریم ، ذهن هیچوقت عمیقاً اون مفاهیم رو نمی‌فهمه.

2⃣ حافظه فعال غیر فعال میشه! یعنی وقتی مدام از AI استفاده کنیم ، مغز به مرور قدرت حل مسئله، حافظه و خلاقیتش رو از دست میده. مثل کسی که مدام از ماشین حساب استفاده می‌کنه و دیگه جمع ساده هم براش سخت میشه.

3⃣ اطلاعات ناقص و اشتباه هم زیاده. و اگه هنگام استفاده از هوش مصنوعی از صحت اطلاعاتش مطمئن نباشیم ، ممکنه مسیر رو اشتباه بریم و حتی متوجه هم نشیم مسیر اشتباهه!


4⃣ استقلال ذهنی رو تضعیف میکنه.یعنی ذهن عادت نمی‌کنه دنبال جواب بگرده و همیشه به دنبال کمک بیرونیه و از راه حل درونی پرهیز می‌کنه.

نظر شما چیه؟ به نظر شما هوش مصنوعی چه فواید و ضررهایی داشته؟
از تجربه هاتون بگید استفاده کنیم.

#ai
5
به عنوان یک شهروند ایرانی ، وظیفه من هست که این موضوع رو به اشتراک بذارم.

وضعیت آب ایران اللخصوص تهران اصلا خوب نیست 💔
طبق بررسی های انجام شده تهران تا چند هفته دیگه بیشتر آب نداره !💧

بعضی از دوستان فکر می‌کنند کاهش مصرف آب از طرف آنها هیچ تاثیری ندارد ، و یا در صورت کاهش مصرف به دولت کمکی کرده‌اند.

ولی در حال حاضر در صورتی که همین روند ادامه پیدا کنه تا چند هفته دیگه شاهد روز صفر آب خواهیم بود!

درسته که یکی از دلایل شکل گیری این فاجعه سوءمدیریت کسانی است که وظیفه‌شان مدیریت بوده. اما در حال حاضر باید در مصرف آب صرفه جویی کنیم تا مبادا روز صفر برسد.

اطلاعات تکمیلی رو می‌توانید با یک سرچ در اینترنت پیدا کنید و یا این ویدیو رو مشاهده کنید تا متوجه عمق فاجعه بشید 💔

https://youtu.be/kcZ1AoHKhcI?si=GZRV3CIzbNP2A7aH

ممنون از همه دغدغه مندانی که به زندگی خود و دیگران ، ارزش قائل‌اند ❤️
👍4
وقتی ما میگیم پروژه ماژولاره یعنی چی؟🤔
ماژولار یعنی پروژه به چند بخش تقسیم شده. و هر بخش مسئولیت مشخص خودشو داره. مثلا بخش user , auth , payment و ... .
هر ماژول می‌تونه شامل کنترلر، سرویس، مدل، روتر، middleware خودش باشه. کد ها از هم مستقل هستند و وابستگی ها مدیریت شده است.

یه مثال از یک پروژه ای که ماژولار نیست :

controllers/
userController.js
productController.js

routes/
userRoutes.js
productRoutes.js

models/
user.js
product.js

در این ساختار همه چیز در دایرکتوری های مختلف پخش شده.

پروژه ماژولار :

src/
modules/
user/
user.controller.js
user.service.js
user.routes.js
user.model.js
product/
product.controller.js
product.service.js
product.routes.js
product.model.js


هر ماژول به صورت مستقل و جداگانه قابل توسعه و نگهداریه.
در نگاه اول شاید با یک معماری اشتباه گرفته بشه ولی ماژولار بودن یک معماری نیست.ماژولار بودن یک ویژگی از طراحی ساختار پروژه‌ست، ولی به‌تنهایی معماری محسوب نمی‌شه.
معماری یعنی: کل فلسفه و ساختار اصلی سیستم، از نحوه لایه‌بندی گرفته تا ارتباط اجزا با هم.
و ماژولار بودن می‌تونه در معماری های مختلف (Clean Architecture، Onion، Hexagonal , ...) پیاده سازی بشه.

مثلا معماری پیشفرض NestJS معماریه لایه‌ای (Layered Architecture) هست و ساختار ماژولار داره.

#architecture #modular
👍31