ساخت یک معماری فرانت اند تمیز و مقیاس پذیر

🔺 همانطور که چشم انداز دیجیتال همچنان به تکامل خود ادامه می دهد، اهمیت معماری frontend برای برنامه های کاربردی وب را نمی توان دست کم گرفت. یک معماری ظاهری خوب طراحی شده نه تنها تجربه کاربر را افزایش می دهد، بلکه قابلیت نگهداری و مقیاس پذیری پروژه را نی...

🌐 : ساخت یک معماری فرانت اند تمیز و مقیاس پذیر

#فرانت_اند #frontend #react #nextjs

چند روز پیش در مورد اینترفیس در گولنگ نوشتم که چقدر زیباست و باعث میشه composability راحت باشه، و اینکه مروج رویکرد composition هست نسبت به inheritance.

دیشب یه ایمیل دریافت کردم از خبرنامه Kent C. Dodds که یکی از افراد فعال و مهم حوزه فرانت و React هست و سازنده Remix هست و دوره Epic Reactش خیلی معروفه و برنامه نویس PayPal بوده

تو این ایمیل داره میگه که چرا React رو دوست داره، یه کلمه در مورد react گفت به عنوان مهم ترین دلیل خوبی react، اونم چیزی نیست جز composition.

React continues to evolve, but one thing remains constant: composition.

Back in 2014 I was driving to the first ng-conf listening to a podcast where I first heard about React.
Smart people I respect recommended it so I gave the framework five minutes.
As I tweeted out bits of my learning experience the recurring theme was my growing appreciation of components and composability.
Fast forward to today.
React continues to evolve, but one thing remains constant: composition.
The React team pushes composition in every direction of the stack while maintaining the simplicity of a JavaScript-first approach instead of some sort of framework-specific domain-specific language.
That’s why I love React so freakin much!
https://kentcdodds.com/about


@gocasts

#composition #react #golang

React 19 Cheat Sheet
by Kent C. Dodds

https://res.cloudinary.com/epic-web/image/upload/v1725974609/react-19-cheat-sheet.pdf

#react

در جاوااسکریپت، مفاهیم "Execution Context"و "Execution Stack"و "Variable Object" و "Scope Chain" به ترتیب با مکانیزم‌های اجرایی و مدیریت متغیرها و توابع در کد ارتباط دارند.

خب این مفاهیم برای درک چگونگی اجرای کدهای جاوااسکریپت و مدیریت فضای حافظه اهمیت دارند. بیاید بیشتر باهاش آشنا شیم:


1. Execution Context:
این مفهوم به معنای فضاییه که کدهای جاوااسکریپت توش اجرا میشن. وقتی یه اسکریپت یا تابع اجرا میشه، یه "بافت اجرایی" براش ساخته میشه که مرورگر بهش نیاز داره تا کد رو درست اجرا کنه.

سه نوع کلی داریم:
- Global Execution Context: وقتی کد برای اولین بار اجرا میشه، این بافت ساخته میشه و همه کدهای خارج از توابع توش قرار میگیرن.
- Function Execution Context: هر بار که یه تابع فراخوانی میشه، یه بافت اجرایی جدید برای اون ساخته میشه.
- Eval Execution Context: وقتی کدها از طریق تابع eval() اجرا میشن، یه بافت اجرایی خاص برای اون ساخته میشه.

هر Execution Context سه بخش اصلی داره:
1.Variable Object: جایی که متغیرها و توابع تعریف‌شده توش ذخیره میشن.
2. Scope Chain: برای دسترسی به متغیرها و توابع در دامنه‌های دیگه استفاده میشه.
3. this: به آبجکت فعلی یا محیط اجرایی خاص در زمان اجرا اشاره داره.

2. Execution Stack:
اینو بهش Call Stack هم میگن. یه جور ساختار داده‌ای از نوع استک (LIFO: Last In, First Out) که بافت‌های اجرایی رو مدیریت میکنه. هر بار که یه تابع فراخوانی میشه، بافت اجرایی اون تابع به استک اضافه میشه و بعد از اتمام اجرا، از استک خارج میشه.

3. Variable Object:
فضایی که تو هر بافت اجرایی ایجاد میشه و متغیرها، توابع و پارامترهای مربوط به اون رو ذخیره میکنه.

دو نوع اصلی داره:
- Global Execution Context: آبجکت متغیر به عنوان Global Object عمل میکنه (معمولاً window تو مرورگر).
- Function Execution Context: شامل پارامترهای تابع، متغیرهای داخل تابع و توابع درونی اون.

۴. Scope Chain:
مکانیزمیه که جاوااسکریپت برای دسترسی به متغیرها و توابع ازش استفاده میکنه. هر بافت اجرایی یه زنجیره‌ای از دامنه‌ها داره که تو اون به دنبال متغیرها و توابع میگرده. وقتی جاوااسکریپت دنبال مقدار یه متغیره، اول از دامنه فعلی شروع میکنه و اگه اونجا پیدا نکرد، میره سراغ دامنه‌های بالاتر (مثلاً دامنه گلوبال).

این مفهوم اجازه میده که متغیرها و توابع تو جاوااسکریپت به طور سلسله‌ مراتبی و براساس مکان تعریفشون تو کد دسترسی‌پذیر باشن.


ANOPHEL I آنوفل

#جاوااسکریپت #javascript #stack #react #vue

دیگه وقتت رو برای نوشتن کاستوم هوک‌ها هدر نده🩸

پکیج usehooks-ts مجموعه‌ای از هوک‌های آماده و کاربردی برای پروژه‌های ریکتی هست که خوشبختانه با تایپ اسکریپت هم سازگاره. در این مجموعه، هوک های مختلفی برای انواع کارها مانند مدیریت ایونت‌ها، مدیریت لوکال استوریج، مدیریت تایمرها، دسترسی به اطلاعات مرورگر و ... پیدا میشه، که باعث ساده‌تر شدن کدنویسی، سرعت بیشتر و همچنین کاهش نیاز به نوشتن کد تکراری میشه.

🔗 Link

#react
@CodeModule

Finally

https://x.com/housecor/status/1857416151153738135

#react

TIL: https://react.dev/learn/separating-events-from-effects

#react #til

درود دوستان و همراهان خوب دیتی 👋

- من بعد از مدت زیادی که بسیار مشغله داشتم برگشتم و قصد دارم طبق روال قبل مرتب فعالیت داشته باشم و براتون چیزهای خوب خوب بنویسم

- مدتیه که پست‌های آموزشی ری‌اکت رو دارم منتشر می‌کنم که شامل پست‌های آموزشی کوتاه میشه حاصل تجارب شخصی من از محیط کاری و همچنین مصاحبه‌ها هست، و تا الان ۱۴ قسمت از اون منتشر شده و البته که قسمت‌های جذاب زیادی از اون هم توی راهه 💥

- پست‌ها رو می‌تونید از اینجا ببینید:
https://ditty.ir/series/react-101

- این پست‌ها رو طوری نوشتم که بتونید ازشون برای آمادگی مصاحبه‌ها استفاده کنین

#react

🔺بایدها و نبایدهای memo توی #ری‌اکت

- توی دنیای توسعه #نرم‌افزار تکنیک‌های بهینه‌سازی یک شمشیر دولبه هستن و استفاده نادرست ازشون ممکنه نتیجه عکس بده و برنامه رو غیر بهینه و توسعه رو پیچیده‌تر کنه!

- توی ری‌اکت شاید memo ویژگی خیلی قدرتمندی به حساب بیاد و کمک ‌کنه از رندرهای اضافی جلوگیری کنیم، اما قبل از استفاده از اون باید نکته‌هایی رو در نظر داشته باشیم، که توی این پست اونها رو بررسی می‌کنیم:
ditty.ir/567

#react

ریویو پروژه NextJS
توی این جلسه یک پروژه تو این جلسه یک پروژه NextJS رو با هم ریویو می‌کنیم.

مشاهده ویدئو

درباره ماب ریویو:
ماب ریویو یه رویداد دوستانه و خودمونی برای انتقال تجربه دانشه.
توی این رویداد دور هم جمع می‌شیم تا یک سورس کد رو با هم ریویو کنیم و درباره پرکتیس‌های بهتر و دلایلش صحبت کنیم.

مباحث:
00:00 درباره ماب ریویو
01:30 خواهش دومم
02:40 درباره پروژه
03:37 وابستگی ها
05:33 مسئله Dead Code و Zombie Code ها
10:10 سلامتی وابستگی ها
11:46 کدهایی که مردن رو پاک کنید!
15:22 چطوری یک خط خالی توی کد روی استخدام شدن شما تاثیر می‌ذاره؟
31:30 اضافه کردن فرمتر و لینتر
33:03 از public چیزی ایمپورت نکنید
34:47 کی و چطوری باید کامپوننتمون رو بشکنیم؟
42:35 مسئله useless fragment
43:51 یکپارچگی پیاده سازی و اسم گذاری
45:15 مسئله layout
48:04 مسئله اسم گذاری
53:46 بررسی کامپوننت Banner
55:11 چرا نباید از z-index و overflow زیاد استفاده کنید
55:54 تعداد خط‌های کامپوننت Code Smell حساب می‌شه.
57:42 نحوده درست مدیریت z-index
59:51 اصل Single Responsibility تو فرانت اند
01:02:52 چه چیزهایی رو نباید توی کامپوننت برد؟
1:08:55 درک مسئله Spacing
1:11:07 پیاده سازی درست تم dark و light با taildinw
1:16:23 انکپسوله کردن مسئولیت های کامپوننت ها
1:20:07 کی از margin استفاده کنیم کی از padding
1:22:00 از grid و flex تو در تو استفاده نکنید.
1:27:34 به CSS فحش ندیم
1:28:32 فرق بین space و gap توی tailwind
1:30:25 جمع بندی

#fullstacksjs #mobreview #css #react #typescript #nextjs

🔺جزییات و نکات پیاده‌سازی تکنیک‌های Debounce و Throttle توی ری‌اکت

- این دو از تکنیک‌های پرکاربرد بهینه‌سازی و افزایش سرعت و کیفیت هر برنامه‌ای هستن و به قول معروف برای Rate Limiting به کار میرن

- تکنیک Debounce تضمین می‌کنه یک قطعه کد زمانی اجرا بشه که یک مدت زمان مشخصی از آخرین تلاش برای اجرای اون گذشته باشه. مثلاً یک تابع ده بار پشت سر هم فراخونی میشه، اما می‌خوایم اجرای واقعی اون موقعی باشه که ۵ ثانیه از آخرین فراخونی گذشته باشه.
آشنایی با این تکنیک:
ditty.ir/577

- تکنیک Throttle هم تضمین می‌کنه که کدهای ما توی یک بازه زمانی مشخص فقط یک بار اجرا بشن. مثلاً می‌خوایم یک تابع توی هر بازه زمانی ۵ ثانیه فقط یک بار اجرا بشه. پیاده‌سازی این تکنیک:
ditty.ir/573

#react

دیدید ۹۰٪ سوالات اینه که؛
- کتاب X یا Y کدوم رو بخونم ؟
+ هردو
- خیلی زیاده
+ یکیش رو بخون، بعد اون یکی رو skim کن
- راه دیگه نداره
+ تغییر رشته بده

LinkedIn Post

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

یه نویسندهٔ جدید و خوش ذوق به دیتی اضافه شده به اسم امیررضا 😉🔥

- بیشتر درباره ری‌اکت می‌نویسه. از پست‌هاش استفاده کنین:

- هرچیزی که باید از کاستوم هوک ها بدونیم
- هدف از ساخت Suspense کامپوننت‌ها چیه؟
- هرچیزی که باید از هوک useDeferredValue بدونیم
- چه روش‌هایی برای دیباگ کردن برنامه ری‌اکتی می‌شناسین؟

#react