فرادرسکتابخانه React Spectrum ادوبی | راهنمای شروع به کار
React Spectrum (+) مجموعه‌ای از کتابخانه‌ها است که تیم «ادوبی» (Adobe) برای کمک به توسعه‌دهندگان جهت ساخت اپلیکیشن‌های با امکانات زیاد به وسیله React ارائه کرده است. این مجموعه سه کتابخانه عمده به شرح زیر دارد که می‌توانید در کنار هم یا به شکل منفرد مورد استفاده قرار دهید:
- React Spectrum – یک پیاده‌سازی از اسپکتروم است که سیستم طراحی آدوبی محسوب می‌شود.
- React Aria – مجموعه‌ای از قلاب‌ها برای ارائه موارد ابتدایی دسترسی UI از قبیل روش‌های بین‌المللی ساخت و تعامل منسجم در سراسر دستگاه‌ها است.
- React Stately – مجموعه دیگری از قلاب‌ها است، اما روی فراهم ساختن امکان مدیریت حالت کراس‌پلتفرم متمرکز شده است.
همه این‌ها در کنار هم React Spectrum را می‌سازند که امکان توسعه وب‌اپلیکیشن‌هایی را فراهم می‌سازد که فراتر از سطح کمینه می‌رود و تجربه کاربری برتری ارائه می‌کند.
در این مقاله به توضیح مسائلی می‌پردازیم که React Spectrum تلاش دارد حل کند و شیوه آغاز به استفاده از آن را توضیح می‌دهیم. همچنین پیشنهاد می‌کنیم کامپوننت‌های دمو را از این آدرس (+) نصب کنید.
مشکل سیستم‌های طراحی
حتی با وجود کتابخانه‌های مدرن فرانت‌اند از قبیل ری‌اکت، ویو و انگولار، ساخت وب‌اپلیکیشن‌هایی که استانداردهای بالایی در زمینه انسجام UI، دسترس‌پذیری، قابلیت‌های بین‌المللی و کاربردپذیری داشته باشند، کار دشواری محسوب می‌شود. به همین جهت است که امروزه سیستم‌های طراحی چنین محبوبیت کسب کرده‌اند.
اما ساخت یک چنین سیستم طراحی که استاندارد طراحی رعایت کند، هم از نظر زمان و هم صرف پول پرهزینه است. غالب توسعه‌دهندگان و طراحان عمده تلاش خود را مصروف استایل کامپوننت می‌کنند در حالی که دسترس‌پذیری و بین‌المللی‌سازی توجه چندانی برنمی‌انگیزد. زمانی که شرکت به شدت در حال تقلای ارائه محصول است، هیچ کس به این چیزها اهمیت نمی‌دهد.
این موضوع زمانی که در نظر بگیریم، بومی‌سازی یک اپلیکیشن چه قدر دشوار است، بیشتر قالب درک خواهد بود. در این زمان باید در مورد ترجمه متن، قالب‌های تاریخ و عدد لوکال، ایجاد امکان تعامل راست به چپ و موارد بسیار دیگر تأمل بکنید.
به همین جهت است که React Spectrum بسیار ارزشمند است. React Spectrum از تجربه شرکت معظمی به نام آدوبی در طراحی و توسعه UI با امکانات زیاد بهره گرفته و به شما در زمینه پیاده‌سازی همه این جزییات ظریف که باعث می‌شود UI روی همه دستگاه‌های عالی باشد، کمک می‌کند.
React Spectrum چه کمکی به ما می‌کند؟
React Spectrum کامپوننت‌هایی در اختیار شما قرار می‌دهد که قابلیت انطباق با تعامل‌ها و اندازه‌های متفاوت صفحه‌ها را دارند. این موارد شامل ابزار قرائت تمام صفحه و پشتیانی از ناوبری کیبورد برای ایجاد امکان دسترس‌پذیری است.
کامپوننت‌های ارائه شده از سوی این کتابخانه از خطوط راهنمای طراحی اسپکتروم پیروی می‌کنند و از این رو نیازی به استفاده از خصوصیت‌های معمولی HTML مانند class و aria-label ندارید. همچنین قابلیت طراحی و استفاده از theme پیاده‌سازی شده است که به این ترتیب می‌توانید به سهولت بین قالب‌های مختلف اپلیکیشن سوئیچ کنید.
برای استفاده از React Spectrum باید پکیج کتابخانه زیر را نصب کنید:
npm install @adobe/react-spectrum
در ادامه از کانتینر Provider آن برای تعریف theme ،locale و دیگر تنظیمات اپلیکیشن استفاده می‌کنیم:
1import {Provider, defaultTheme, Button} from '@adobe/react-spectrum';
2function App() {
3 return (
4 <Provider theme={defaultTheme}>
5 <Button variant="cta">Hello React Spectrum!</Button>
6 </Provider>
7 );
8}برای مشاهده دموی عملیاتی مثال فوق به این صفحه (+) بروید.
React Spectrum سیستم لی‌آوت Flex و Grid را نیز در اختیار ما قرار می‌دهد و از این رو می‌توانیم انتخاب کنیم باید از کدام لی‌آوت استفاده کنیم:
1import {Flex} from '@adobe/react-spectrum'
2// the component
3<Flex direction="column" width="size-2000" gap="size-100">
4 <View backgroundColor="celery-600" height="size-800" />
5 <View backgroundColor="blue-600" height="size-800" />
6 <View backgroundColor="magenta-600" height="size-800" />
7</Flex>کد فوق به صورت زیر رندر می‌شود:
از سوی دیگر کامپوننت گرید به صورت زیر است:
1import {Grid} from '@adobe/react-spectrum'
2// the component
3<Grid
4 areas={['header header', 'sidebar content', 'footer footer']}
5 columns={['1fr', '3fr']}
6 rows={['size-1000', 'auto', 'size-1000']}
7 height="size-6000"
8 gap="size-100">
9 <View backgroundColor="celery-600" gridArea="header" />
10 <View backgroundColor="blue-600" gridArea="sidebar" />
11 <View backgroundColor="purple-600" gridArea="content" />
12 <View backgroundColor="magenta-600" gridArea="footer" />
13</Grid>که نتیجه رندر آن چنین است:
جدا از همه UI مناسب مبتنی بر کامپوننت، React Spectrum یک راهنما در مورد شیوه تست اپلیکیشن نیز ارائه کرده است. از این رو اگر به ساخت اپلیکیشن ری‌اکت با پیروی از طراحی آدوبی برای عناصر UI علاقه‌مند هستید، حتماً از آن استفاده کنید.
طرز کار React Aria چگونه است؟
هدف اصلی React Aria (+) نیز مانند اسپکتروم این است که به پیاده‌سازی دسترس‌پذیری روی همه دستگاه‌ها و برای همه افراد کمک کند. این موضوع شامل افرادی با انواع معلولیت‌ها از جمله نقص بینایی، شنوایی، حرکتی و ناتوانی‌های شناختی نیز می‌شود.
نکته جالب در مورد React Aria این است که هر قلاب تحت یک پکیج خاص گروه‌بندی شده است که می‌توان آن را به صورت مستقل نصب کرد. به این ترتیب می‌توانیم قلاب را به صورت افزایشی و مورد به مورد در کامپوننت‌های خود مورد استفاده قرار دهیم.
React Aria برخی قلاب‌های کامپوننت دارد که به ما امکان می‌دهد تا کامپوننت‌های غیر استایل‌دار سازگار برای همه دستگاه‌های مختلف بسازیم که البته در صورت نیاز می‌توانیم آن‌ها را استایل‌بندی نیز بکنیم.
برای نمونه یک قلاب به نام useButton (+) وجود دارد که یک دکمه را با قابلیت‌های زیر رندر می‌کند:
- پشتیبانی نیتیو HTML از <button>
- پشتیبانی از <a> و نوع عنصر سفارشی از طریق Aria
- مدیریت رویدادهای ماوس و لمسی و مدیریت حالت فشرده شدن
- مدیریت فوکوس کیبورد و نرمال‌سازی بین مرورگر
- پشتیبانی از رویداد کیبورد برای کلیدهای اسپیس و اینتر
روش پیاده‌سازی این قلاب به صورت زیر است:
1function Button(props) {
2 let ref = useRef();
3 let {buttonProps} = useButton(props, ref);
4 let {children} = props;
5return (
6 <button {...buttonProps} ref={ref}>
7 {children}
8 </button>
9 );
10}
11<Button onPress={() => alert('Button pressed!')}>Test</Button>قابلیت منحصر به فرد دیگر React Aria قلاب‌های فوکوس است. FocusRing به کاربران کیبورد امکان می‌دهد که تعیین کنند کدام عنصر روی یک صفحه دارای فوکوس کیبورد است. این کار از طریق ارائه استایل‌بندی خاص به هر عنصر انجام می‌گیرد که عموماً یک حاشیه آبی رنگ است:
1function Button(props) {
2 let ref = useRef();
3 let {buttonProps} = useButton(props, ref);
4 let {children} = props;
5return (
6 <button {...buttonProps} ref={ref}>
7 {children}
8 </button>
9 );
10}
11<Button onPress={() => alert('Button pressed!')}>Test</Button>دموی عملیاتی این مثال را نیز می‌توانید در این نشانی (+) ببینید.
زمانی که از کلاس‌های CSS برای استایل‌بندی چیزهایی مانند کامپوننت‌های استایل‌دار استفاده نمی‌کنید، می‌توانید از قلاب useFocusRing بهره بگیرید:
1function Example() {
2 let {isFocusVisible, focusProps} = useFocusRing();
3return (
4 <button
5 {...focusProps}
6 style={{
7 WebkitAppearance: 'none',
8 appearance: 'none',
9 background: 'green',
10 border: 'none',
11 color: 'white',
12 fontSize: 14,
13 padding: '4px 8px',
14 outline: isFocusVisible ? '2px solid dodgerblue' : 'none',
15 outlineOffset: 2
16 }}>
17 Test
18 </button>
19 );
20}در نهایت باید اشاره کنیم که React Aria از بین‌المللی‌سازی اپلیکیشن نیز پشتیبانی می‌کند تا بتوانید اپلیکیشن خود را با تنظیمات یک زبان یا منطقه خاص تطبیق دهید. کامپوننت i18nProvider آن امکان دور زدن locale پیش‌فرض مرورگر را با یک لوکال تعریف شده از سوی اپلیکیشن فراهم می‌سازد:
1import {I18nProvider} from '@react-aria/i18n';
2<I18nProvider locale="fr-FR">
3 <YourApp />
4</I18nProvider>طرز کار React Stately چگونه است؟
React Stately یک کتابخانه از قلاب‌ها است که مدیریت حالت کراس پلتفرم را برای سیستم طراحی فراهم می‌سازد. این کتابخانه می‌تواند از وب، ری‌اکت‌نیتیو و یا هر پلتفرم دیگر اجرا شود.
برای نمونه می‌توانید useRadioGroupState را برای کمک به ذخیره حالت یک گروه دکمه‌های رادیویی بدون نیاز به تعریف تابع خاص onChange پیاده‌سازی کنید:
1import {useRadioGroupState} from '@react-stately/radio';
2function RadioGroup(props) {
3 let state = useRadioGroupState(props);
4return (
5 <>
6 <label>
7 <input
8 type="radio"
9 name={state.name}
10 checked={state.selectedValue === 'dogs'}
11 onChange={() => state.setSelectedValue('dogs')}
12 />
13 Dogs
14 </label>
15 <label>
16 <input
17 type="radio"
18 name={state.name}
19 checked={state.selectedValue === 'cats'}
20 onChange={() => state.setSelectedValue('cats')}
21 />
22 Cats
23 </label>
24 </>
25 );
26}
27<RadioGroup
28 defaultValue="dogs"
29 onChange={(value) => alert(`Selected ${value}`)}
30/>دموی عملیاتی مثال فوق را در این صفحه (+) مشاهده کنید.
اغلب قلاب‌های کتابخانه React Stately مانند یک قلاب معمولی useState هستند که به صورت تغییرناپذیر bake شده است. زمانی که از آن برای وب استفاده می‌کنیم، می‌توانیم آن را به همراه React Aria استفاده کنیم تا امکان دسترس‌پذیری و تعامل را برای کامپوننت‌ها فراهم سازیم. React Stately نیز می‌تواند دقیقاً همانند React Aria به روش افزایشی پیاده‌سازی شود.
سخن پایانی
بسیاری از کامپوننت‌ها و تیم‌ها منابع کافی برای اولویت دادن به قابلیت‌هایی مانند دسترس‌پذیری، بین‌المللی‌سازی، ناوبری کامل کیبورد و تعامل‌های لمسی را ندارند. اغلب ما آن قدر درگیر قابلیت‌های اصلی اپلیکیشن هستیم که به این چیزها اهمیت نمی‌دهیم.
به همین دلیل است که React Spectrum برای اغلب تیم‌ها حائز اهمیت فراوانی است. این کتابخانه‌ها طوری طراحی شده‌اند که بتوانید منطق اپلیکیشن خود را با بسیاری از کامپوننت‌های دیگر روی دستگاه‌های مختلف به روش افزایشی به اشتراک بگذارید. با استفاده از React Spectrum دیگر به صرف زمان و هزینه زیادی برای خلق یک سیستم طراحی که از دسترس‌پذیری و بین‌المللی‌سازی پشتیبانی کند، نیاز نخواهید داشت.
