سیستم‌های طراحی در React Native

به صورت کلی زمانی که از سیستم طراحی یا Design System صحبت می‌شود به یک نوع از فایل راهنما اشاره می‌شود. سیستم طراحی به تیم‌های توسعه و طراحی این کمک را می‌کند تا بتوانند محصولاتی با سازگاری بصری بالا را ایجاد بکنند. معمولا سیستم‌های طراحی شامل المان‌های پایه‌ای مانند تایپوگرافی، سیستم لایه‌بندی، پالت رنگی و… می‌شود. بگذارید با یک مثال ساده اهمیت استفاده از سیستم طراحی را برای‌تان توضیح دهم.

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

سیستم طراحی به شما این اطمینان را می‌دهد که همه جنبه‌های طراحی با همدیگر سازگار باقی خواهند ماند. 

فواید استفاده از یک سیستم طراحی

• صرفه‌جویی در زمان:‌ زمانی که یک سیستم طراحی داشته باشید، طراحان‌ نیازی به ساخت تمام المان‌ها از پایه را ندارند. آن‌ها می‌توانند تمام کامپوننت‌های مورد نیازشان را از طریق کتابخانه یا همان سیستم طراحی که دارید فراخوانی کنند. برای توسعه‌دهندگان نیز دقیقا چنین حالتی وجود دارد. تنها کاری که باید بکنند این است که کدهای داخل سیستم طراحی را کپی کرده و در پروژه قرار دهند.
• کم کردن خطاها: ساخت یک سیستم طراحی و تست کردن آن می‌تواند در انجام پروژه‌های مختلف خطاهای‌تان را بسیار کم کند. تصور کنید که شما در یک بازه زمانی همراه با تیم توسعه یک سیستم طراحی را ساخته‌اید، حال در زمان پیاده‌سازی پروژه نیازی نیست که هر بار نگران وجود خطا باشید چرا که یکبار برای همیشه آن‌‌ها را حل کرده‌اید.
• رضایت: اگر مطمئن باشید که زمان‌تان هدر نمی‌رود، طراحی‌تان سازگار است و خطایی در آن وجود ندارد، رضایت خاطر زیادی پیدا خواهید کرد.

حال هدف ما در این مطلب آن است که بتوانیم چنین قابلیت‌هایی را به یک پروژه React Native بیاوریم. 

ابزارهایی برای پیاده‌سازی سیستم طراحی در React Native

در این بخش از مطلب قصد داریم تا کتابخانه‌ها و ابزارهایی را به شما معرفی کنیم که در جهت پیاده‌سازی سیستم طراحی و یا کتابخانه‌های رابط کاربری استفاده می‌شوند. این موارد قابلیت ادغام‌سازی با پروژه‌های مبتنی بر React Native را نیز دارند:

• StoryBook یک محیط توسعه برای رابط کاربری و کامپوننت‌های آن است. این ابزار به توسعه‌دهندگان قابلیت ساخت کامپوننت‌های سفارشی و مستقل را می‌دهد، همچنین از طریق آن می‌توانید به صورت تعاملی در یک محیط توسعه ایزوله با کامپوننت‌ها کار بکنید. Storybook وابسته به یک اپلیکیشن خاص نیست از این رو می‌تواند در هر محیطی فارغ از آنکه چه اپلیکیشنی در دست توسعه است استفاده شود.
• Zeplin یک اپلیکیشن همکاری برای طراحان و مهندسانی است که قصد ساخت یک سیستم طراحی را دارند. این اپلیکیشن با خودکارسازی برخی از کارها، فرایند ساخت سیستم/راهنمای طراحی را بسیار آسان می‌کند. با استفاده از Zeplin می‌توان کامپوننت‌های طراحی شده را به کدهای React Native تبدیل کرد.
• IcoMoon یک کتابخانه آیکونی است که به شما این قابلیت را می‌دهد تا بتوانید سیستم/کتابخانه آیکونی خودتان را داشته باشید. با استفاده از این کتابخانه می‌توانید تنها در چند دقیقه تمام آیکون‌های مورد نیازتان را به یک پروژه موبایلی اضافه نمایید.
• Jest یک فریمورک تستینگ برای اپلیکیشن‌های React Native است. با استفاده از این فریمورک می‌توانید تمام رفتارهای کامپوننت‌ها را تست کرده و در نهایت کدهای بدون اشکالی را تحویل دهید.
• Style-components به شما این قابلیت را می‌دهد تا کدهای CSSتان را از طریق جاوااسکریپت بنویسید. این موضوع باعث می‌شود که برای استایل‌‌دهی به کامپوننت‌های React Native به صورتی یکپارچه‌تر عمل کرده و سیستم طراحی را راحت‌تر پیاده‌سازی کنید. به لطف وجود چنین قابلیتی شما کدهای ساختارمند‌تر و خواناتری خواهید داشت.
• React-native-shadow یک پکیج npm است که به توسعه‌دهندگان قابلیت ساخت سایه‌های سفارشی را در اپلیکیشن‌های آندرویدی می‌دهد. متاسفانه خود React Native یکسری مشکلات کوچک در رابطه با پیاده‌سازی سایه در نسخه آندرویدی دارد. به همین دلیل کمی ناسازگاری به وجود خواهد آمد. اما این پکیج به ما کمک می‌کند تا چنین موضوعی را به سادگی حل کنیم.
• React-native-svg یک پکیج دیگر npm است که به توسعه‌دهندگان اجازه می‌دهد تا بتوانند از SVG در اپلیکیشن‌های React Native استفاده بکنند. زمانی که در سیستم طراحی خود از SVG استفاده کردید و مجبور بودید که آن را در React-Native پیاده‌سازی کنید این پکیج را فراموش نکنید. 

محدودیت‌های استفاده از سیستم‌های طراحی در React Native

استفاده از سیستم‌های طراحی در React Native یکسری محدودیت‌ها را به همراه دارد، برای مثال پکیج‌های Third-Party، مشکل اصلی استفاده از پکیج‌های خارجی محدودیت‌های پشتیبانی و تکنیکی آن‌هاست. گاهی اوقات بهتر است که برای استفاده از یک ویژگی آن را به صورت کامل از ابتدا، منحصرا برای اپلیکیشن‌تان ایجاد کنید. مشکل دیگر چارت‌های پیچیده بود. ما برای استفاده از چارت در یک اپلیکیشن React Native از کتابخانه victory-native استفاده کردیم، در ابتدا مشکلی وجود نداشت اما زمانی که حجم بزرگی از داده را در آن قرار دادیم مشکلات کارایی و رندر بوجود آمد. همچنین ری‌اکت نیتیو با مشکلات Visual Regression Test همراه است که Loki تا حدی توانست مشکلات را رفع کند اما چندان کامل نبود.

نکته‌ای مهم در رابطه با سیستم طراحی

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

در پایان

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

منبع