دیزاین سیستم بدون وابستگی به فریمورک
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
نویسنده میگه یکی از عادتهای اشتباه دوران رونق دیزاینسیستمها اینه که کتابخونهٔ کامپوننت رو با یه فریمورک خاص (که معمولاً ریاکته) میسازن. به نظرش این کار با چیزی که از دیزاینسیستم انتظار داریم یعنی قابلحمل بودن و ترکیبپذیری در تضاده، چون از همون روز اول قفلشدگی به فریمورک رو وارد کار میکنه.
راهحلی که پیشنهاد میده ساختن کامپوننتها مستقیماً با وبکامپوننتهای استاندارده. میگه روزهای اول وبکامپوننتها از فریمورکهای واکنشی عقب بودن، ولی الان دیگه اینطور نیست و ابزارهای خوبی براشون هست. به نظرش وبکامپوننت الان بهترین پایه برای یه کتابخونهٔ کامپوننته، چون استاندارد وبه و تقریباً هر فریمورکی ازش پشتیبانی میکنه.
اون چند تا اصل کلیدی میده. اولی پایینترین سطح ممکن هست؛ یعنی تا جای ممکن نزدیک به استانداردهای وب کار کنی نه روی لایههای انتزاعی فریمورک. دومی سادهترین کامپوننت ممکن هست؛ کامپوننت باید مثل یه ماشین حالت ساده باشه و منطق پیچیده و state اشتراکی رو بسپری به سطح اپلیکیشن نه خود کامپوننت.
اصل سوم آیندهنگری هست. نویسنده میگه فریمورکهای نظردار بالاخره قدیمی میشن و حتی ریاکت هم داره به سمت legacy میره، ولی استانداردهای وب همیشه میمونن. اگه کامپوننتهای اتمی دیزاینسیستم رو از کامپوننتهای اپلیکیشن جدا کنی، موقع بازنویسی اپ با فریمورک جدید مجبور نیستی کل کتابخونه رو هم از نو بنویسی.
اصل چهارم اینه که تصمیمهای سیستمی باید تو کد گرفته بشن نه تو ابزار طراحی. به گفتهٔ نویسنده که خودش بیشتر طراحه تا برنامهنویس، فیگما برای آزمایش ایده خوبه ولی منبع حقیقت ضعیفیه و خیلی از مفاهیم واقعی دیزاینسیستم رو نمیتونه نشون بده. اصل پنجم هم اینه که حین ساختن، همونجا مستندسازی کنی.
برای بخش عملی، اون یه ساختار شبهمونوریپو میسازه: کتابخونهٔ کامپوننت با ابزار Elena (یه لایهٔ سبک روی وبکامپوننتهای استاندارد که props و reactivity ایزوله و lifecycle میده) و مستندات با VitePress. تنظیم workspaces تو فایل package.json ریشه باعث میشه کتابخونهٔ ساختهشده مثل یه پکیج رفتار کنه بدون اینکه واقعاً منتشر بشه:
{
"name": "my-ds",
"private": true,
"workspaces": [
"packages/components"
]
}نکات کلیدی:
- وابستهکردن دیزاینسیستم به یه فریمورک خاص از روز اول قفلشدگی میسازه
- وبکامپوننت استاندارد قابلحمل و آیندهنگره و تقریباً همهجا پشتیبانی میشه
- کامپوننتها رو ساده و اعلانی نگه دار، منطق پیچیده رو بذار برای سطح اپ
- تصمیمهای نهایی دیزاینسیستم رو تو کد بگیر نه تو ابزارهایی مثل فیگما
- ابزارهای Elena و VitePress برای ساختن کتابخونه و مستنداتش کنار هم استفاده میشن
