استوری بوک از ابزارهای کارآمد برای طراحی ، تست و پیاده سازی UI پروژه شماست. کتابخانه بزرگ و قدرتمندی که با زبان جاواسکرپیت و به صورت open source منتشر شده.همانطور که از اسم آن پیداست استوری بوک یعنی کتاب داستان و به شما این قابلیت را میدهد که هر یک از کامپوننت های اپلیکیشن را در یک صفحه از این کتاب داستان نمایش دهیم .
ابزاری است که به شما این امکان را می دهد که یک محصول تحت وب را که می تواند یک وب سایت شخصی یا یک وب اپلیکیشن باشد را به اجزای کوچک تری تبدیل کنید و سپس هر کدام از این اجزا را در یک محیط ایزوله بسازید. ساخت یک جزء در یک محیط ایزوله این مزیت را دارد که فقط بر روی آن جزء تمرکز می کنید بدون این که تاثیر بقیه المان های سیستم بر روی آن جزء را در نظر بگیرید. همچنین این ابزار به صورت خودکار هر جزء را مستندسازی می کند و محیطی را در اختیار شما قرار می دهد که هر جزء را تست و بررسی کنید و ورودی های آن را تغییر دهید و نتیجه را بررسی کنید و این مزیت باعث می شود افراد مختلف با مهارت های مختلف مانند: UX/UI Designer, Backend Developer و دیگر Frontend Developerهای تیم بتوانند بدون درگیر شدن با پیاده سازی، یک جزء را تست و بررسی کنید.
از دیگر قابلیت های این ابزار علاوه بر مستندسازی و محیط تست و بررسی می توان به پشتیبانی از کتابخانه و فریم ورک های متعدد مثل: React JS, VUE JS, Angular, React Native اشاره کرد.
۱- توسعه کامپوننت های UI به صورت جداگانه و غیر وابسته به سایر کامپوننت ها
۲- اجرا خارج از محیط برنامه اصلی (کاهش نگرانی در مورد کدهای پروژه و ...)
۳- افزونه های قدرتمند به همراه API بسیار ساده برای شبیه سازی و توسعه کامپوننت ها ( لینک - نویگیشن - کلیک و ... )
۴- افزایش کارایی کامپوننت های نوشته شده
۵- داشتن قسمتی در پروژه برای دیدن همه کامپوننت های ساخته شده
۶- کمک به داکیومنت نویسی پروژه
۷- اجرای تست های مختلف بر روی کامپوننت (یونیت تست - اینتگریشن - اسنپ شات و ... )
۸- اشتراک گذاری کامپوننت ها
۹- دوباره استفاده کردن از کامپوننت های موجود و کاهش کدها و پیچیدگی پروژه
این همه ویژگی های این فریمورک نیست و بقیه موارد در حین کار بهتر قابل درک خواهد بود.
باید تو جه داشته باشید که استوری بوک فقط در حالت توسعه قابل مشاهده است و بعد از build گرفتن هیچ خبری از آن نیست . استوری بوک و همه افزونه هاش در قسمت devDependencies نصب میشوند.
در زیر ما فقط به یک نمونه از استفاده های استوری بوک در یک پروژه نکست اشاره میکنیم شما میتوانید بسته به نیاز خود و مطالعه بیشتر به داکیومنت آن مراجعه کنید .
# Add Storybook: npx sb init
بعد از نصب برای مشاهده تغییرات
# Starts Storybook in development mode yarn storybook
myComponent :
stories MyComponent :
حالا برای مشاهده نتیجه دستور آن را وراد کنید مشاهده خواهید کرد که به راحتی یک کامپوننت با قابلیت تست با پراپس های فیکی که استوری بوک به ما داده را توانستیم بسازیم.
و باید بدانید که استوری بوک بعد از اضافه شدن در روت پروژه شما فولدری به نام .storybook برای خود اضافه میکند که میتواند آن را براساس نیازهای خود کانفیک کنیدو همچنین فولدری به نام stories که شامل مثال هایی از نحوه استفاده استوری بوک هست.
جمع بندیاستوری بوک ابزار پیشرفته و قدرتمندی هست که توصیه میشه همه توسعه دهندگان فرانت اند حداقل یکبار ازش استفاده کنن و باهاش آشنا بشن.
