کتابخانه های مؤلفه ui شکسته شده اند – این کاری است که من در مورد آن انجام می دهم

بیایید واقعی باشیم: استفاده از بیشتر کتابخانه های مدرن UI احساس می کند که توسط تیم هایی با آنها ساخته شده اند 100+ مهندس… نه روزهای روزمره سعی در حمل چیزی دارند.

با گذشت سالها ، من تقریباً با هر کتابخانه اصلی در آنجا کار کرده ام. و در حالی که بسیاری از آنها صیقل داده شده است ، آنها همیشه عملی نیستند. بنابراین تصمیم گرفتم خودم را بسازم – معرفی عنصربشر

اما اول – بیایید در مورد آنچه شکسته است صحبت کنیم.

یک تاریخچه سریع: چرا این کتابخانه ها ساخته شدند

بیشتر کتابخانه های محبوب UI امروز از آنجا متولد شده اند نیازهای خاص در یک زمان خاصبشر

• MUI (مواد-UI) با هدف ایجاد قوام بصری و دسترسی به برنامه ها ، به عنوان یک اجرای وفادار از طراحی مواد Google برای React آغاز شد.
• چاکرا متمرکز بر تجربه توسعه دهنده و دسترسی به خارج از جعبه – نفس هوای تازه هنگامی که سایر کتابخانه ها به صورت لفظی یا سفت و سخت بودند.
• طراحی مورچه برای داشبوردهای در مقیاس سازمانی طراحی شده است ، و اولویت بندی UI متراکم با الگوهای داخلی برای برنامه های سنگین داده است.
• UI Tailwind ناشی از موفقیت CSS اول ابزار ، پاسخ به تقاضا برای سرعت و انسجام بینایی در طراحی جلوی.

همه آنها موارد استفاده معتبری داشتند – و هنوز هم در زمینه های مناسب انجام دهیدبشر

اما مسئله اینجاست:

آنها برای پشته های خاص، گردش کار خاص و فرضیات خاص که در بین پروژه ها ، تیم ها یا چارچوب ها به خوبی مقیاس نمی شوند.

و دنیای dev امروز؟ این مسدود کننده (و هیجان انگیز تر) از همیشه است:

• تیم ها بین واکنش ، VUE ، زاویه ای، و حتی Astro یا Svelteبشر
• جبهه های میکرو یک هنجار است.
• سیستم های طراحی باید از پروژه های انفرادی پیشی بگیرند.
• توسعه دهندگان انفرادی باید بدون گذراندن یک هفته در پیکربندی مضامین یا منطق دولت در حال جادوگری سریع حرکت کنند.

نتیجه؟

شما به یک دیوار ضربه می زنید – سریع.

بیشتر کتابخانه ها شما را وارد می کنند راه آنها انجام کارها … و بیرون آمدن بیشتر از ساختن این کار تلاش بیشتری می کند.

چشم انداز مؤلفه UI: جوانب مثبت و منفی

در اینجا سریعتر از برخی از کتابخانه های گسترده UI امروز ، آنچه آنها ارائه می دهند ، و جایی که کوتاه می شوند ، آورده شده است.

🧩 MUI (مواد-UI)

• جوانب مثبت:
  • اجزای صیقلی و آماده تولید
  • مستندات گسترده
  • دسترسی داخلی
  • جامعه واکنش قوی
• منفی ها:
  • محکم همراه برای واکنش – نمی توان از خارج از اکوسیستم React استفاده کرد
  • یک ظاهر طراحی شده می تواند بیش از حد مهندسی و عقیده داشته باشد
  • مضامین غالباً مانند کشتی با کتابخانه احساس می شود و با آن کار نمی کند

🎯 چاکرا

• جوانب مثبت:
  • نحو سازگار با توسعه دهنده
  • دسترسی داخلی
  • اصول طراحی مداوم
• منفی ها:
  • فقط واکنش – بدون پشتیبانی از چارچوب های دیگر
  • انعطاف پذیری مؤلفه گاهی به “راه چاکرا” محدود می شود
  • به خوبی در سیستم های شرکت های بزرگ مقیاس نمی شود

📦 طراحی مورچه

• جوانب مثبت:
  • مجموعه عظیم مؤلفه
  • احساس درجه شرکت
  • جدول غنی و پشتیبانی فرم
• منفی ها:
  • اندازه بسته نرم افزاری سنگین
  • سفارشی سازی سبک یک درد است
  • بومی سازی و زبان طراحی می تواند بیش از حد سفت و سخت باشد

🛠 UI Tailwind

• جوانب مثبت:
  • عالی برای کاربردهای اول در حال حاضر با استفاده از tailwindcss
  • طرح های زیبا و پاسخگو
  • نمونه سازی سریع
• منفی ها:
  • یک کتابخانه جزء نیست – این قطعه HTML+Tailwind است
  • بدون تعامل (شما خودمان را سیم می کنید)
  • بدون استفاده از دولت ، دسترسی به شما بستگی دارد

🌐 کفش

• جوانب مثبت:
  • مبتنی بر مؤلفه وب (بله!)
  • چارچوب
  • ادغام آسان در جبهه های میکرو
• منفی ها:
  • تنوع کمترین مؤلفه
  • از مقیاس بندی سیستم طراحی پشتیبانی نمی کند
  • مستندات و فرزندخواندگی هنوز محدود است

بنابراین من ساختم: عنصر

بعد از سالها کشتی با آن محدودیت ها ، تصمیم گرفتم ساختم عنصر – یک سیستم UI که به روشی که توسعه دهندگان در واقع به آن احتیاج دارند ، کار می کند.

من چیزی می خواستم:

• سریع
• قابل تنظیم
• استفاده آسان
• چارچوب
• مقیاس پذیر از یک Dev انفرادی تا تیم های کامل محصول

عنصر پاسخ من به همه موارد فوق است. این کاری است که من به طور متفاوتی انجام می دهم:

• ✅ ساخته شده در استنسیل برای پشتیبانی مؤلفه وب واقعی (در همه جا کار می کند)
• ✅ پر شرح حمایت
• ✅ با سبک SCS و متغیرهای CSS را برای مضمون در معرض دید
• ✅ بر اساس طراحی اتمی – اجزای مقیاس از اتمها به الگوها
• ✅ توسط یک جامعه باز نگهداری می شود (نه نقشه راه شرکت)

این طراحی شده است با توسعه دهنده رشد کنید، آنها را در یک سیلو به دام بیندازید.

⚖ مقایسه واقعی

بیایید آن را تجزیه کنیم:

| Feature                  | Elementrix-UI                    | MUI / Chakra / Ant / Tailwind UI |
|--------------------------|----------------------------------|----------------------------------|
| Framework Support        | ✅ Works with React, Vue, Angular, JS | ❌ Usually React-only             |
| Language                 | ✅ TypeScript                     | ⚠️ Mixed JS/TS                   |
| Customization            | ✅ CSS variables, SCSS, override anything | ❌ Often overly complex          |
| Design System            | ✅ Atomic Design, scalable        | ⚠️ Varies, often inconsistent     |
| Theming                  | ✅ Straightforward & flexible     | ❌ Deep config / tokens required |
| Bundle Size              | ✅ Lightweight via StencilJS      | ⚠️ Varies, often bloated          |
| Community Input          | ✅ Built from user feedback       | ❌ Mostly roadmap-locked          |
| Usage Goals              | ✅ Indie to Enterprise-ready      | ⚠️ Usually geared toward large teams |

چرا “چارچوب-آگنوستیک” در واقع مهم است

وقتی در حال ساخت سیستم UI هستید ، یکی از بدترین تصمیماتی که می توانید بگیرید این است که خود را در یک اکوسیستم قفل کنید.

• چه اتفاقی می افتد که تیم شما از واکنش به Vue حرکت کند؟
• اگر می خواهید از چیزی در Webflow ، WordPress یا Astro استفاده کنید ، چه می کنید؟
• اگر می خواهید سیستم طراحی شما از چارچوب فعلی شما بیشتر شود ، چه می شود؟

بیشتر کتابخانه های UI کاملاً شکسته می شوند در آن سناریو

با استفاده از مؤلفه های وب، ElementRix-UI در هر چارچوب اصلی-بدون بازنویسی کل UI شما-به طور بومی اجرا می شود. این است نوشتن-یکپارچه ، رها کردن در هر کجا رویکردی که فقط معنی دارد.

ساخته شده برای توسعه دهندگان – توسط یک توسعه دهنده

ElementRIX-UI برخی از پروژه های تیم 12 نفره با VC نیست. این فقط من است – یک انفرادی که یک LTD ثبت شده را اجرا می کند – برای ساختن یک سیستم UI بهتر تلاش می کند با جامعه

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

یعنی:

• 💬 ورودی منظم در اولویت بندی مؤلفه ها
• 🎨 جهت بصری مشترک برای زبان طراحی
• strchitecture معماری تمیز که با پشته شما مبارزه نمی کند
• 🔧 آسان بیش از حد ، بنابراین برای تغییر یک رنگ نیازی به مبارزه با موتور موضوع ندارید

tl ؛ دکتر

اگر از کیت های UI بیش از حد مهندسی ، سیلوهای فقط واکنش و جنگل های پیکربندی خسته شده اید-احساس می کنم.

عنصر پاسخ من است

این است:

• سریع
• چارچوب
• قابل تنظیم
• ساخته شده در اطراف نقاط درد توسعه دهنده واقعی

MVP در حال توسعه است و ما آن را باز می کنیم با حمایت جامعه از طریق پاترون

👉 از وب سایت زنده دیدن کنید: elyndrastudios.com

👉 برای به روزرسانی ها دنبال کنید: elyndrastudios

💭 افکار شما؟

• چه چیزی شما بزرگترین شکایت با کتابخانه های فعلی UI؟
• چه مؤلفه ای همیشه به نیاز به بازنویسی کامل پایان می یابد؟
• “ایده آل” برای شما چگونه به نظر می رسد؟

در نظرات به من ضربه بزنید 👇 – من این کار را برای devs مثل شما می سازم.