Foad Labs
82 subscribers
46 photos
2 videos
2 files
45 links
Building modern web experiences.
React • Next.js • TypeScript

🪐 DM For collaborates: @foad_ebrahiml
🌐 Personal website: https://foad-ebrahimi.ir
Download Telegram
https://t.me/labs_gp/73

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

همینطور که می‌بینین، همه چیز حول و حوش یک پوشه پیش میره
🔥1
رسما دارم هر ۲ روز یه بسته ۴ گیگ یک هفته میخرم 🫪🫪
🚀 سری ۵ قسمتی : معماری‌های کلاس جهانی در Next.js 🔴
پارت ۴ — معماری قلمرو‌محور (Domain-Driven Design - DDD)

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

تو معماری DDD، ما کدها رو بر اساس دپارتمان‌های واقعی یک شرکت میچینیم.
مثلا دپارتمان "فروش" با دپارتمان "انبار" کاملا جدا هستن و تیم‌های برنامه‌نویسی‌شون هم تو کدهای هم دخالت نمیکنن.
هر قلمرو (Domain) دیتابیس و لاجیک خودش رو داره و فقط از طریق یک‌سری API مشخص با بقیه قلمروها حرف میزنه.
این یعنی پایان دعوای تیم‌های بزرگ!

وقتی بیزینس تبدیل به فولدر میشه :
src/
├── domains/
│ ├── inventory/ # قلمرو انبارداری
│ │ ├── api/
│ │ ├── components/
│ │ └── core/ # لاجیک تخصصی انبار
│ ├── billing/ # قلمرو حسابداری و پرداخت
│ │ ├── api/
│ │ ├── components/
│ │ └── core/ # لاجیک تخصصی مالی
└── shared/ # کدهای مشترک بین همه قلمروها
👍1
این دو دسته از ساختار و معماری رو من خودم به شخصه هنوز تجربه استفاده ازش رو ندارم که در اختیارتون بزارم ولی اگر پروژه اپن سورسی دیدم حتما رفرنس میدم براتون ❤️
خروجی کد زیر چیه؟

🔰 مبحث Closures توی JS رو مطالعه کنین
🚀 سری ۵ قسمتی: معماری‌های کلاس جهانی در Next.js 🟣
پارت ۵ — ساختار Monorepo (Turborepo)

فرض کن رسیدی به جایی که یه پنل مدیریت داری، یه سایت اصلی برای مشتری‌ها، و یه سایت دیگه برای وبلاگ.
هر سه تا هم با Next.js نوشته شدن. اگه بخوای دکمه‌های سایت رو عوض کنی، باید بری تو هر سه تا پروژه دستی کد رو کپی‌پیست کنی؟ قطعا نه! کابوس میشه.

اینجا مونو‌ریپو (با ابزارهایی مثل Turborepo یا Nx) میاد وسط. تو این مدل، تمام اپلیکیشن‌های تو داخل یک ریپازیتوری (پوشه اصلی) قرار میگیرن. یه پوشه مشترک میسازی برای کامپوننت‌های UI یا هوک‌های مشترک، و همه اپلیکیشن‌ها از همون یدونه استفاده می‌کنن. سرعت توسعه و بیلد گرفتن تو این روش فوق‌العاده بالاست.

ساختار جذاب یه مونو‌ریپو :
my-company-monorepo/
├── apps/ # اپلیکیشن‌های اصلی تو
│ ├── web/ # سایت اصلی (Next.js)
│ ├── admin-panel/ # داشبورد مدیریت (Next.js)
│ └── docs/ # سایت داکیومنت‌ها
└── packages/ # پکیج‌های مشترکی که خودت ساختی
├── ui-kit/ # دیزاین سیستم مشترک (دکمه‌ها، مودال‌ها)
├── typescript-config/ # تنظیمات مشترک TS
└── eslint-config/ # تنظیمات مشترک لینتر


#Labs_Next5Architecture
مینی سری 5 قسمته معماری‌های کلاس جهانی next.js‌مون به پایان رسید 💣

مینی سری بعدی چی باشه ؟ شما بگین 🧐❤️
🔥41
امروز هم پایه JS رو مرور کردیم و هم معماری Next.js رو حرفه‌ای‌تر چیدیم.

کدوم بخش امروز براتون چالش‌برانگیزتر بود؟ تو کامنت‌ها بنویسید.
شبتون خوش و کدتون بدون باگ! ✌️🌌
1
امروز قراره روی یه مهارت نرم شیفت کنیم که خیلی از برنامه‌نویس‌ها ندارنش 🤔
هنرِ پرزنت کردن و فروختنِ مهارت! 🎤🚀

خیلی‌ها کدهای فوق‌العاده‌ای می‌نویسن 💻، اما چون نمی‌تونن خودشون رو درست پرزنت کنن، پروژه‌های خوب رو از دست میدن 💸📉
2
یه واقعیت تلخ هست که 📉
—— بهترین کدهای دنیا اگه درست پرزنت نشن، هیچ‌وقت تبدیل به قرارداد و پول نمیشن 💸 ——

ما برنامه‌نویس‌ها عادت کردیم همه‌چیز رو تو ترمینال و ادیتور ببینیم 💻. اما کارفرما (مخصوصا کارفرماهای بین‌المللی) کدهای ما رو نمیبینه 👀
اون رزومه، پورتفولیو، نحوه معرفی و خروجیِ کارمون رو میبینه 📄.

امروز قراره یه سوییچ بزنیم و از مود کدنویس دربیایم 🔄 و به مود یه بیزینس‌من / ارائه‌دهنده حرفه‌ای در بیایم 🚀🤝
2👌1
فرض کنین رفتین تو یه گروه تلگرامیِ تخصصی (یا لینکدین) و میخواین خودتون رو برای گرفتن پروژه معرفی کنین ، چطوری شروع میکنین شما

براساس تجربه 90 درصد افراد یه همچین متنی رو میفرستن =>
سلام، من برنامه‌نویس فرانت‌اند هستم. ری‌اکت و نکست‌جی‌اس بلدم. اگه پروژه سایت داشتید در خدمتم.

⚠️ که دقیقا میشین یکی از هزاران نفری که هیچ فرقی باهم ندارن.

در صورتی که پیش رفتن با این فرمول میتونه یه تفاوت اساسی ایجاد کنه =>
❗️ [تخصص] + [ابزارها] + [ارزشی که خلق می‌کنی] ❗️
سلام، من توسعه‌دهنده مدرن فرانت‌اند هستم و تمرکزم روی خلق تجربه‌های کاربری مینیمال و پرسرعت با Next.js و TypeScript است. تخصص من اینه که لود اولیه سایت رو به زیر ۱ ثانیه برسونم تا هم سئوی سایتتون بهینه بشه و هم نرخ تبدیل مشتریتون بالا بره. برای دیدن نمونه کارهام می‌تونید به سایتم سر بزنید.
لینکش : .....


⁉️ خودتونو جای کارفرما جا بزنین و تصور کنین اگر یه پروژه داشته باشین چند درصد احتمال داشت با اولی پروژه رو بدین و چند درصد دومی ؟؟
با صداقت توی کامنت‌ها بگین
2🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
💣 تکنیک Show, Don't Tell ( نشونشون بده بجای صحبت کردن )

یکی از مهم‌ترین تکنیک‌های پرزنت کردن، تکنیک اثباته.
بزرگ‌ترین اشتباه تو رزومه اینه که از کلمات کلیشه‌ای مثل مسلط به توسعه وب یا متخصص سئو استفاده کنیم.

در صورتی که وقتی حرف از دستاوردهای واقعی خودمون بزنیم مثل این مثال =>

به جای اینکه بگی من می‌تونم سایت‌های شرکتی رو با نکست‌جی‌اس بیارم بالا
بگو : توسعه و بهینه‌سازیِ وب‌سایت [نوع پروژه] با Next.js، رسیدن به رتبه ۱ گوگل در کلمات کلیدی هدف، و کاهش زمان لود اولیه سایت به زیر ۱ ثانیه

همین یدونه جمله مثل بمب میترکونه،
توی رزومتون از اعداد و ارقام و نتایجی که دادن استفاده کنید، مردم به اعداد بیشتر از کلمات اعتماد میکنن 🤝
غروبتون بخیر رفقا ☕️💻

یه بحث داغ برای همین الان🔥
همیشه یکی از بزرگترین دغدغه‌های ما تو پروژه‌های سطح بالا، رسوندن زمان لود اولیه سایت (Initial Load) به زیر ۱ ثانیه است. این عدد تو پروژه‌های واقعی برای سئو و نرخ تبدیلِ کارفرما معجزه می‌کنه.
حالا فرض کنید یه پروژه Next.js (یا ریکت) اومده زیر دستتون که لود اولیه‌اش ۳ تا ۴ ثانیه طول می‌کشه. اولین قدمی که برای دیباگ و بهینه‌سازی برمی‌دارید چیه؟

۱. اول می‌رید سراغ بهینه‌سازی Assetها (حجم عکس‌ها، فرمت WebP، فونت‌ها)؟
۲. استراتژی رندرینگ (SSR vs SSG) رو تغییر میدین؟
3. باندل سایز جاوااسکریپت (Bundle Size) و پکیج‌های سنگینِ اضافی رو چک می‌کنید؟
۴. مستقیم میرید سراغ کشینگِ سرور و تنظیمات CDN؟

تو کامنت‌ها برام بنویسید اولویت اولتون کدومه و چرا.
امشب نظراتتون رو میخونم و فردا به عنوان کسی که بارها سایت‌ها رو به زیر یک ثانیه رسونده، تجربیات و راه‌حلِ اصلی خودم رو براتون می‌شکافم! 👇
1
آخر هفتتون رو چطور شروع کردین
من که با داکیومنت خوندن 🫪
بعد از دو روز
انشالا از شنبه شروع میکنیم
🔥1
🙄🫪🫪
👀1
صبح مهندسین آینده بخیر و پر کد باشه ☕️💻
🗿1
همونطور که قولشو داده بودم
امروز میخایم یکم از کد زدن و تریک‌ها فاصله بگیریم و بریم سراغ مباحث معماری و دیزاین سیستم‌ در مقیاس جهانی

پس ....

اولین قهوه رو بریزین که روزِ سنگین و به‌ شدت جذابی در پیش داریم...
1