Storybook چیست؟ + ۵ دلیل استفاده از استوری بوک برای توسعه دهندگان

توسعه‌دهندگان فرانت‌اند (Front-End) از مرحله‌ ایده‌پردازی تا اجرای پروژه با چالش‌های زیادی مواجه هستند. اگر پروژه بزرگ‌تر باشد و تعداد همکاران توسعه‌دهنده بیشتر شود، این چالش‌ها آشکارتر هم خواهند شد. برای مقابله با این چالش‌ها، ابزارهایی طراحی شده‌اند که می‌توان با استفاده از آن‌ها بخش‌های مختلف رابط کاربری (UI) را در قالب کامپوننت‌های مجزا طراحی و بعد به عنوان کتابخانه از آن‌ها استفاده کرد. یکی از این ابزارها Storybook نام دارد که طراحی کامپوننت برای React ، Vue و Angular را امکان‌پذیر می‌کند. شما می‌توانید با استفاده از این ابزار، کامپوننت خود را طراحی کنید و از آن در پروژه‌ها استفاده کنید. این کار به ایجاد یکپارچگی در طراحی‌ها کمک می‌کند، همچنین تضمین می‌کند که یک رابط کاربری بی‌عیب‌ونقص بسازید. ادامه این مقاله از آسا را دنبال کنید تا با این ابزار و نحوه استفاده از آن بیشتر آشنا شوید.

استوری بوک چیست؟

Storybook به معنای «کتاب داستان»، یک ابزار متن‌باز برای توسعه UI است که به توسعه‌دهندگان اجازه می‌دهد هر یک از کامپوننت‌ها را در یک صفحه از این کتاب داستان طراحی کنند. اگر توسعه‌دهندگان بخواهند در پروژه‌های بزرگ، تمامی المان‌های برنامه را به صورت کلی و یکجا طراحی کنند کار سخت و زمان‌بری خواهد بود. اما اگر هر قسمت را مستقل از خروجی کلی به طور جداگانه طراحی کنند، می‌توانند نتیجه هرکدام را به طور مستقل بررسی کنند تا ببینند هر قسمت درست کار می‌کند یا نه!

در نتیجه، توسعه‌دهندگان می‌توانند از استوری‌بوک برای تست و تغییر اجزای UI به‌صورت مجزا استفاده کنند؛ بدون اینکه نگران نحوه قرار گرفتن یا ادغام آن‌ها در پروژه اصلی باشند. با این کار، همکاری با دیگر توسعه‌دهندگان هم ساده‌تر می‌شود. این ابزار، از بیشتر فریم‌ورک‌های فرانت‌اند پشتیبانی می‌کند، از جمله:

• React
• Vue
• Angular
• Mithril
• Marko
• HTML
• Svelte
• Meteor
• Ember
• Riot
• Preact

Storybook چه مزایایی برای توسعه‌دهندگان دارد؟

طبق آماری توسط وب‌سایت webdevstudios.com منتشر شده است، بیش از ۳۰هزار پروژه از Storybook استفاده می‌کنند؛ از جمله تیم‌های توسعه در شرکت‌های بزرگی مانند Airbnb، Slack، Twitterو Lyft. از این آمار می‌توان نتیجه گرفت که این ابزار امروزه به بخشی جدایی‌ناپذیر از توسعه UI تبدیل شده است. اما دلیل این محبوبیت چیست؟

۱- امکان همکاری بی‌درنگ را فراهم می‌کند

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

۲- مدیریت اسناد را ساده می‌کند

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

بیشتر بخوانید: بهترین فریم ورک‌های جاوا اسکریپت

۳- افزونه‌هایی برای صرفه‌جویی در زمان دارد

استوری بوک افزونه‌های بی‌شماری دارد که برخی از آن‌ها را در ادامه معرفی می‌کنیم. یکی از این افزونه‌ها، افزونه وضعیت (Status Plugin) نام دارد که اجازه می‌دهد اعضای تیم وضعیت کامپوننت‌ها را به سرعت با هم‌تیمی‌های خود به اشتراک بگذارند. این افزونه با استفاده از نشانه‌های واضح خود به اعضای تیم نشان می‌دهد که کامپوننت موردنظر آماده‌ استفاده است، در حال تست است یا دیگر موردنیاز نیست. این ویژگی نیاز به مکالمه‌های اضافی بین اعضای تیم را از بین می‌برد و در زمان صرفه‌جویی می‌کند.

۴- امکان توسعه کامپوننت‌های مستقل را فراهم می‌کند

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

۵- می‌توان تست‌های مختلف را روی هر کامپوننت اجرا کرد

امکان اجرای تست‌های مختلف (یونیت تست – اینتگریشن – اسنپ شات و … ) بر هر کامپوننت باعث افزایش کارایی هر کامپوننت می‌شود، همچنین امکان سفارشی‌سازی را برای مطابقت با نیازهای خاص فراهم می‌کند. این ویژگی باعث تشخیص زودهنگام مشکلات، بهبود کیفیت کدها و کاهش خطر انتشار مشکلات در سراسر برنامه هم می‌شود. در نهایت، توسعه‌دهندگان می‌توانند رابط کاربری قابل‌اعتمادتری بسازند.

افزونه‌های قدرتمند استوری بوک

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

برخی از قدرتمندترین افزونه‌های این ابزار عبارتند از:

• کنترل‌ها (Controls): این افزونه یک رابط کاربری مناسب برای تنظیم عناصر مختلف مانند رنگ‌ها، اندازه‌ها و متن فراهم می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا به سرعت تنظیمات مختلف را آزمایش و نتایج را در لحظه مشاهده کنند.
• اسناد (Docs): این افزونه به طور خودکار اسنادی را برای کامپوننت‌های مختلف تولید می‌کند و ویژگی‌ها، توضیحات و نمونه‌های آن را نمایش می‌دهد.
• اقدامات (Actions): به توسعه‌دهندگان اجازه می‌دهد تا نتایج کامپوننت‌های خود را (مانند کلیک روی یک دکمه) ثبت کنند. با این افزونه، آن‌ها می‌فهمند که هر کامپوننت در شرایط مختلف چگونه کار می‌کند.
• دستگیره‌ها (Knobs): با فراهم کردن یک رابط گرافیکی برای ویرایش کامپوننت‌ها، توسعه‌دهندگان می‌توانند با استفاده از چک‌باکس‌ها (Checkboxes) یا ورودی‌های متنی، تغییرات را اعمال کنند.
• پیش‌نمایش (Viewport): جلوه‌ای بصری از نحوه نمایش کامپوننت‌‌ها در دستگاه‌هایی با اندازه‌های مختلف ارائه می‌دهد. این افزونه به توسعه‌دهندگان اجازه می‌دهد تا کامپوننت‌های خود را در نماهای مختلف مشاهده کنند و از پاسخگویی و سازگاری در دستگاه‌ها و اندازه‌های مختلف صفحه نمایش مطمئن شوند.

معایب استوری‌بوک

در حالی که Storybook مزایای زیادی را برای توسعه‌دهندگان UI ارائه می‌دهد، معایبی هم دارد که در این قسمت از مقاله به آن‌ها اشاره می‌کنیم:

• پیچیدگی راه‌اندازی اولیه: نصب این ابزار برای یک پروژه می‌تواند به سفارشی‌سازی، پیکربندی و راه‌اندازی اولیه نیاز داشته باشد، به خصوص برای پروژه‌های بزرگ‌تر یا پیچیده‌تر! این سرمایه‌گذاری اولیه ممکن است برای توسعه‌دهندگان ناآشنا با Storybook یا پروژه‌هایی با منابع محدود، سنگین باشد.
• هزینه تعمیر و نگهداری: استوری بوک نیاز به تعمیر و نگهداری مداوم دارد تا صفحات کامپوننت‌ها را در پایگاه داده به‌روز نگه دارد. همانطور که پروژه تکامل پیدا می‌کند و اجزای مختلف اضافه، اصلاح یا حذف می‌شوند، توسعه‌دهندگان باید مطمئن شوند که صفحات مربوطه مطابق با این تغییرات به‌روزرسانی می‌شوند. عدم تعمیر و به‌روزرسانی Storybook می‌تواند منجر به ایجاد اسناد قدیمی یا نادرست شود که در طول زمان کاربردی بودن خود را از دست می‌دهند.
• مصرف منابع: در حالی که سرور توسعه Storybook معمولا سبک وزن است، اما همچنان می‌تواند منابع اضافی سیستم را مصرف کند، به خصوص هنگامی که در کنار سایر ابزارهای توسعه اجرا می‌شود.
• منحنی یادگیری: یادگیری استفاده مؤثر از این ابزار نیاز به زمان دارد. اعضای تیم باید با مفاهیم، ویژگی‌ها و بهترین روش استفاده از آن آشنا شوند. توسعه‌دهندگانی که به طور کامل با Storybook آشنا نیستند یا تجربه محدودی در توسعه مبتنی بر کامپوننت دارند، ممکن است شروع کار را چالش‌برانگیز بدانند.
• پشتیبانی محدود برای برخی از فریم‌ورک‌ها: در حالی که Storybook از فریم‌ورک‌های فرانت‌اند محبوبی مانند React، Vue.js و Angular پشتیبانی می‌کند، ممکن است پشتیبانی محدودی برای فریم‌ورک‌های نوظهور یا کمرنگ‌تر داشته باشد. بنابراین، برای توسعه‌دهندگانی که با چارچوب‌های خاص کار می‌کنند مناسب نیست.

آیا Storybook برای همه پروژه‌ها مناسب است؟

اگرچه Storybook ابزار قدرتمندی برای توسعه و نمایش اجزای رابط کاربری است، اما برای همه پروژه‌ها مناسب نیست. این ابزار برای پروژه‌هایی مناسب است که معماری‌ مبتنی بر کامپوننت دارند. همچنین پروژه‌های بزرگ با رابط‌های کاربری بزرگ و پیچیده باید استوری بوک را در نظر بگیرند. به طور کلی، هر پروژه‌ای که اعضای تیم آن نیاز به مستندسازی، همکاری و تست داشته باشند، بهتر است از این ابزار استفاده کنند.

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

سخن پایانی

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

منابع:

www.komododigital.co.uk | https://snipcart.com

نویسنده: تیم مارکتینگ آسا