آیا بحث برانگیز است که بگوییم ادغام عمیق سیستم های طراحی، حذف نیاز به حفظ کد و نسخه طراحی هر جزء، جام مقدس فعلی طراحی وب است؟
به طور سنتی “جام مقدس” طرح سه ستون تمام قد بود، اما اکنون به تاریخ سپرده شده است. به طور مشابه، وسط عمودی دیگر نمی تواند نقطه عطف یک شوخی CSS باشد. حتی پرس‌وجوهای Container که اغلب به عنوان یک کار غیرممکن در نظر گرفته می‌شوند، راه خود را به مرورگرها باز می‌کنند.
این تقدم تاریخی به من خوش بینی می دهد. افراد در سراسر صنعت وب، هم به صورت مشارکتی و هم به صورت رقابتی، با هم کار کردند تا به تدریج، گام به گام، وب را بهبود بخشند. برای بهبود اساسی روش کار همه ما. همین امر در حال حاضر در مورد سیستم های طراحی اتفاق می افتد. با وجود تمام مزایایی که وجود دارد، ما هنوز چیزهای زیادی برای حل کردن داریم. UXPin بر هدف از بین بردن شکاف بین ابزارهای طراحی و توسعه متمرکز شده است.
معرفی یکپارچه سازی npm UXPin
ما قبلاً در مورد دوستانمان در UXPin نوشته‌ایم، و تماشای آنها در حال تکرار محصول خود برای نزدیک‌تر کردن طراحان و مهندسان بسیار عالی بود. اخیرا UXPin خود را گسترش داده است عملکرد قدرتمند ادغام با افزودن یکپارچه سازی npm، به طراحان اجازه می دهد تا کتابخانه های مؤلفه React را بدون نیاز به ورودی توسعه دهنده همگام کنند.
قبلاً ادغام مهندسین مورد نیاز برای صادرات اجزا به UXPin در خط لوله ساخت/استقرار… هنگام وارد کردن مؤلفه‌ها از بسته‌های npm، این مورد ضروری نیست.
برای اینکه بفهمیم این چگونه کار می کند، باید به عقب برگردیم و تفاوت UXPin را با سایر ابزارهای طراحی بررسی کنیم. معمولاً بومی که روی آن طراحی می کنید یک تصویر است. در گذشته، اینها شطرنجی و امروزه وکتور بودند، یک گام در جهت درست، اما شما همچنان در حال کشیدن تصاویری هستید که قرار است جهت ظاهر و احساس محصول شما را نشان دهند.
وقتی از اجزای خود روی بوم در UXPin استفاده می‌کنید، مستطیل‌هایی را طراحی نمی‌کنید که درست به نظر برسند. اجزای واقعی توسعه دهندگان در محصول نهایی استفاده خواهند کرد. این بدان معناست که می‌توانید به راحتی طرح‌های کاملاً تعاملی با وفاداری بالا را که قبلاً به نمونه‌های اولیه کدگذاری‌شده نیاز داشتند، بدون هیچ کدنویسی با استفاده از اجزای دقیقاً مشابه محصول نهایی، نمونه‌سازی کنید. این شکاف بین طراحان و توسعه دهندگان را هم از نظر تلاش های همپوشانی و هم از نظر شکاف بین آنچه طراحی شده و آنچه کاربران با آن تعامل دارند کاهش می دهد.
اما npm برای توسعه دهندگان است، اینطور نیست؟
بیایید واضح بگوییم: برای وارد کردن کتابخانه های مؤلفه با استفاده از ادغام npm، نیازی به نصب هیچ چیزی روی رایانه خود ندارید. شما نیازی به نوشتن هیچ کدی ندارید. تنها چیزی که نیاز دارید یک بسته موجود است که در npm میزبانی شده است. این ممکن است بسته ای باشد که منبع باز است و به طور گسترده مورد استفاده قرار می گیرد، مانند Ant UI یا Material، یا ممکن است مختص شرکت شما باشد و قبلاً توسط توسعه دهندگان استفاده می شود.
Node Package Manager (npm) ابزاری برای وارد کردن نسخه های مشخص شده کد است. توسعه دهندگان از این برای مدیریت نسخه های «بسته» کدهایی که شخص دیگری نوشته است استفاده می کنند. مثلا بهش میگفتن کدوم نسخه React رو دانلود کنه و اگه نسخه جدید منتشر شد وقتی آماده شد میتونن آپدیتش کنن. این اساسا یک روشی خودکار برای جلوگیری از کپی و چسباندن فایل های فشرده در همه جا.
با ادغام npm UXPin، می‌توانید اجزای بسته‌های npm را بگیرید و در ابزار طراحی استفاده کنید.
باشه… چگونه از آن استفاده کنم؟
در UXPin، کتابخانه مؤلفه UI را با افزودن یک کتابخانه جدید به بخش «Merge: Component Manager» تعریف می‌کنید. گزینه هایی به شما داده می شود و باید «وارد کردن اجزای واکنش با یکپارچه سازی npm» را انتخاب کنید. در اینجا از شما خواسته می شود که نام کتابخانه را بنویسید، و این می تواند هر چیزی باشد. شما همچنین به نام بسته و نسخه (که می تواند باشد latest)، مسیر به دارایی های یک ظاهر طراحی، و هر مجوزی که می خواهید تنظیم کنید. برای توضیح کامل تر، مستندات را ببینید.
پس از تکمیل، کتابخانه مؤلفه خود را از npm به UXPin وارد کرده اید!
با این حال، این پایان فرآیند نیست. با وارد کردن مؤلفه‌ها، باید «Merge Component Manager» را برای کتابخانه‌ای که وارد کرده‌اید پیکربندی کنید. شما باید هر جزء را به صورت جداگانه مشخص کنید و هر یک از ویژگی های مربوط به آن را تنظیم کنید.
اگرچه راه‌اندازی، به‌ویژه یک کتابخانه بزرگ، می‌تواند تلاش زیادی را به همراه داشته باشد، اما واقعاً ارزش آن را دارد که از قبل برای بهره‌گیری از مزایای یک سیستم طراحی یکپارچه وقت بگذارید. در این مرحله، شما قادر خواهید بود نمونه های اولیه ای بسازید که به اندازه هر نمونه اولیه واقعی و واقعی به رسانه وب باشند. اگر می‌خواهید از فرآیند یکپارچه‌سازی اجتناب کنید و از راه‌حل‌های منبع باز استفاده کنید، می‌توانید از کتابخانه‌های داخلی نیز استفاده کنید. طرح مورچه و MUI.
این عالی به نظر می رسد، اما آیا برای تیم من مناسب است؟
توسعه دهندگان شما از قبل یک بسته npm برای سیستم طراحی شما دارند
این وضعیت عالی برای یک سیستم طراحی یکپارچه است. یک موقعیت رایج این است که مؤلفه‌ها را هم در کد و هم در یک ابزار طراحی ایجاد می‌کنیم و هدف همگام‌سازی آنهاست. ابزارهای مستندسازی مانند Storybook اغلب برای ارائه دانش مشترک و منبع حقیقت بین طراحان و توسعه دهندگان استفاده می شود. با ادغام npm، می‌توانید با استفاده از فناوری‌های مشابه، بدون گام در وسط، فرآیند تحویل را کاهش دهید.
طراحی بدون دسترسی به توسعه دهندگان
اگر در مرحله کشف پروژه جدید هستید و هنوز به هیچ توسعه دهنده ای دسترسی ندارید، UXPin به شما مزیتی می دهد. می‌توانید با استفاده از کتابخانه‌های مؤلفه منبع باز (به عنوان مثال MUI) نمونه اولیه را تهیه کنید و آنها را بر اساس نیازهای خود تنظیم کنید. وقتی توسعه‌دهندگان به تیم ملحق می‌شوند، می‌توان آنها را با اجزایی که از ابتدا طراحی می‌کنید جایگزین کرد و توسعه‌دهندگان سپس کدنویسی کردند.
تیم تمام عیار با شیوه های موجود
در یک تیم کارکشته، تغییر ابزارهای شما می تواند آخرین کاری باشد که هر کسی می خواهد انجام دهد و توافق بر سر آن سخت است. اما حتی برای این تیم‌ها، پاداش داشتن یک راه‌حل منسجم و یکپارچه برای اشتراک‌گذاری اجزا بین طراحان و توسعه‌دهندگان احتمالاً ارزش سرمایه‌گذاری را دارد.
نتیجه
تیم UXPin گامی چشمگیر در جهت دسترسی بیشتر به فناوری Merge خود با ادغام npm برداشته است. با هر نسخه جدید Merge، ما می‌توانیم دید آنها را ببینیم که چگونه تیم‌ها می‌توانند با سیستم‌های طراحی خود که در طول فرآیندشان یکپارچه شده‌اند، همکاری نزدیک‌تری داشته باشند. ما می‌توانیم آینده را ببینیم، و به تدریج به آنجا می‌رسیم، درست مانند دور شدن آنها از استاندارد طراحی مبتنی بر برداری و نزدیک‌تر شدن به کار با توسعه‌دهندگان. سفر طولانی بود اما در نهایت ارزشش را داشت.
ادغام npm را با ثبت نام در an امتحان کنید آزمایش UXPin یا سایر ادغام های مشترک را توسط درخواست دسترسی به اینجا.
بیشتر خواندن
(yk, il)
