خواندن ۵ دقیقه·۵ سال پیش

معرفی storybook.js

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

تو این مقاله قصد معرفی ابزار استوری بوک رو دارم. در مقاله بعدی در مورد نصب و راه اندازی استوری بوک روی پروژه توضیح میدم و در مقاله های آینده بیشتر در مورد افزونه های قدرتمندش صحبت میکنم.

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

سازنده استوری بوک در موردش میگه:

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

محیطی ایزوله برای توسعه المان های UI برای React , Vue و Angular و غیره !
خوب پس تا اینجا متوجه شدیم که موضوع مربوط به توسعه دهندگان فرانت اند هست !

ویژگی‌های استوری بوک چیست؟‌

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

۱- توسعه کامپوننت های UI به صورت جداگانه و غیر وابسته به سایر کامپوننت ها
۲- اجرا خارج از محیط برنامه اصلی (کاهش نگرانی در مورد کدهای پروژه و ...)
۳- افزونه های قدرتمند به همراه API بسیار ساده برای شبیه سازی و توسعه کامپوننت ها ( لینک - نویگیشن - کلیک و ... )
۴- افزایش کارایی کامپوننت های نوشته شده
۵- داشتن قسمتی در پروژه برای دیدن همه کامپوننت های ساخته شده
۶- کمک به داکیومنت نویسی پروژه
۷- اجرای تست های مختلف بر روی کامپوننت (یونیت تست - اینتگریشن - اسنپ شات و ... )
۸- اشتراک گذاری کامپوننت ها
۹- دوباره استفاده کردن از کامپوننت های موجود و کاهش کدها و پیچیدگی پروژه

من فقط ۹ مورد از ویژگی های استوری بوک رو گفتم. برای اینکه به همه ویژگی هاش پی ببرید باید خودتون دست به کار شید و یه پروژه خیلی ساده رو باهاش اجرا کنید. تو مقاله بعدی استوری بوک رو روی یک پروژه خیلی ساده ری اکت راه میندازم و چند مورد از مثال های ساده اش رو بررسی میکنیم.

نصب و راه اندازیش کار سختی است ؟‌

خیر ، به راحتی سایر پکیج ها نصب میشه و با انجام تغییرات کوچیکی تو package.json به صورت اسکریپت CLI قابل اجراست.

استوری بوک فقط در محیط توسعه است ؟

بله در واقع همراه با پروژه‌ای که شما بیلد میکنید و روی سرور قرار میدید هیچ خبری از استوری بوک نیست. استوری بوک و همه افزونه هاش در قسمت devDependencies نصب میشوند.

برای چه چیزهایی باید استوری بنویسیم؟

برای همه کامپوننت هایی که تو پوشه Component پروژه قرار گرفته میشه استوری نوشت. همه کامپوننت‌های پروژه رو میشه توی استوری ها وارد کرد و ازشون استفاده کرد.

نوشتن استوری برای همه کامپوننت چه قدر وقت گیر هست؟

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

افزونه های استوری بوک چه کمکی به ما میکنند؟

استوری بوک به تنهایی به اندازه کافی کارایی زیادی داره اما برای اینکه از همه قدرت و ویژگی هاش بتونیم استفاده کنیم لازم هست که یک سری افزونه بهش اضافه کنیم که به صورت پکیج در اختیار ماست.

وضعیت گیت استوری بوک چه طوری هست؟‌

کافیه به رپوزیتوری گیت استوری بوک نگاهی داشته باشیم:

تا لحظه نگارش این مقاله نزدیک به ۴۰ هزار ستاره دریافت کرده و بیش از ۳ هزار فورک ازش گرفته شده .با بیش از ۷۰۰ نفر نویسنده و آپدیت های منظم و ورژن های استیبل و ... استوری بوک یکی از قوی ترین کتابخونه های جاواسکریپتی موجود برای FrontEnd Developers محسوب میشه.

از کجا شروع کنیم؟

بعد از نصب و اجرای اون میتونید شروع کنید. برای کامپوننت هاتون استوری بنویسید و در محیط مرورگر بدون نیاز به سرور و ... کامپوننت هاتون رو اجرا کنید.

استوری بوک از چه تکنولوژی هایی پشیبانی میکنه؟

اگه توسعه دهنده فرانت هستید و با تکنولوژی های زیر کارمیکنید پس میتونید از استوری بوک تو پروژه‌هاتون استفاده کنید :
React - React Native - Vue - Angular - Ember - HTML - Svelte - Mithril - Riot

پروژهای کوچک هم به استوری بوک نیاز دارن ؟‌

بله به نظر من برای پروژه های مقایس کوچیک هم میشه از استوری بوک استفاده کرد.

پروژه های بزرگ به اندازه کافی پیچیده هستند. بازم به استوری بوک نیاز هست؟

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

اگه وسط پروژه باشیم چی؟

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

اگه پروژه ای با سایر تکنولوژی های باشه چی ؟‌

مثلا اگه شما پروژه ای رو با Next.js‌ کار کرده باشید (‌در جریان باشید که ساختارش متفاوفت با App هایی هست که با Create-react-app میسازید) باز هم میتونید از استوری بوک برای پروژه استفاده کنید و هیچ محدودیتی وجود نداره!‌ هر کجا که دنیای جاواسکریپت باشه و موضوع کارمون در مورد FrontEnd ، میتونیم از استوری بوک استفاده کنیم.

آیا با Bootstrap و یا sass و .. هم سازگار است؟

در واقع استوری بوک از سرور خودش برای نمایش UI بهره میگیره و کاری به تنظیمات وب سرور شما نداره. برای این منظور از وب پک مخصوص به خودش استفاده میکنه !
یه فایلی به اسم webpack.config.js توی پوشه storybook هست که باهاش میتونید همه کاری انجام بدید. مثلا معرفی پری پروسسرهای به پروژه و یا استفاده از روش css module و یا sass module برای استایل دهی هم با تغییرات خیلی ساده قابل اجراست.