راهنمای مقدماتی React Spectrum — به زبان ساده

شرکت ادوبی بیش از 5،000 مهندس دارد که در سراسر دنیا روی صدها پروژه کار می‌کنند که در اغلب موارد استانداردهای بالایی را برای رابط کاربری (UI)، دسترس‌پذیری، قابلیت‌های بین‌المللی و کاربردپذیری رعایت می‌کنند. پیروی از این استانداردها در این مقیاس یک چالش برای آدوبی محسوب می‌شود. همگی ما شاهد هستیم که سیستم‌های طراحی اینک از هر زمان دیگری محبوبیت بیشتری یافته‌اند و بسیاری از شرکت‌ها چه کوچک و چه بزرگ در حال پیاده‌سازی کتابخانه‌های کامپوننت خود از صفر تا صد هستند. ما در این راهنمای مقدماتی React Spectrum قصد داریم یک راه‌حل برای این مشکل معرفی کنیم.

علی‌رغم ظهور کتابخانه‌های مدرن برای لایه نما (View)، همچنان طراحی UI به روش کاملاً دسترس‌پذیر با تعامل‌هایی که روی طیف گسترده‌ای از دستگاه‌های مختلف کار کنند، کار فوق‌العاده دشواری محسوب می‌شود. این کار نیازمند آن است که شرکت‌ها مبالغ کلانی را صرف چیزی بکنند که قابلیت اشتراک داشت. به علاوه بسیاری از شرکت‌ها و تیم‌ها منابع یا زمان کافی برای اولویت دادن به قابلیت‌هایی مانند دسترس‌پذیری، بین‌المللی‌سازی، ناوبری کامل با کیبورد و تعامل‌های لمسی ندارند. این وضعیت منجر به این شده است که امروزه بسیاری از اپلیکیشن‌ها دسترس‌پذیری و تعامل‌های ناقصی دارند. از این رو وب در قیاس با اپلیکیشن‌های نیتیو یک پلتفرم ناقص به نظر برسد.

React Spectrum یک مجموعه از کتابخانه‌ها و ابزارها است که شرکت آدوبی برای کمک به ساخت تجربه‌های کاربری تطبیق‌پذیر، دسترس‌پذیر و مستحکم برای وب‌اپلیکیشن‌ها ارائه کرده است. اجزای این مجموعه به شرح زیر هستند:

• React Spectrum – یک پیاده‌سازی از سیستم طراحی آدوبی به نام اسپکتروم است.
• React Aria – یک کتابخانه از قلاب‌های ری‌اکت است که امکان طراحی UI دسترس‌پذیر را برای سیستم طراحی فراهم می‌سازد.
• React Stately – یک کتابخانه از قلاب‌های ری‌اکت است که مدیریت حالت کراس پلتفرم و منطق مرکزی سیستم طراحی را در اختیار ما قرار می‌دهد.

پیش از آن که هر یک از این کتابخانه‌ها را بررسی کنیم، باید با چهار مفهوم کلیدی آشنا شویم.

مفاهیم کلیدی React Spectrum

React Spectrum چهار قابلیت کلیدی را در اختیار توسعه‌دهندگان قرار می‌دهد تا بتوانند استانداردها را رعایت کرده و تجربه‌های کاربری را ارتقا ببخشند.

فیلم آموزش پروژه محور ری اکت جی اس – طراحی وب اپلیکیشن پیشرو PWA با React.js در فرادرس

کلیک کنید

دسترس‌پذیری

دسترس‌پذیری و رفتار بر اساس رویه‌های مجوزدهی WAI-ARIA (+) پیاده‌سازی شده است که شامل نرم‌افزار قرائت تمام صفحه و پشتیبانی از ناوبری کامل با کیبورد می‌شود. همه کامپوننت‌ها روی طیف گسترده‌ای از نرم‌افزارهای قرائت صفحه و دستگاه‌ها تست می‌شوند تا مطمئن باشیم که بهترین تجربه کاری ممکن در اختیار کاربران قرار می‌گیرد.

تطبیق‌پذیری

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

قابلیت بین‌المللی

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

قابلیت سفارشی‌سازی

کامپوننت‌های React Spectrum از تِم‌های سفارشی پشتیبانی می‌کنند و به طور خودکار با حالت تاریک تطبیق می‌یابند. حتی برای سفارشی‌سازی بیشتر می‌توانید کامپوننت‌های خاص خود را با ساختار DOM و قلاب‌های React Aria و React Stately برای ارائه رفتار، دسترس‌پذیری و تعامل‌پذیری بیشتر بسازید.

معماری React Spectrum

برای این که امکان استفاده مجدد از رفتار کامپوننت بین سیستم‌های طراحی وجود داشته باشد، React Spectrum هر کامپوننت را به سه بخش حالت، رفتار و کامپوننت رندر شده تقسیم می‌کند. این معماری به لطف قلاب‌های ری‌اکت میسر شده است که امکان استفاده مجدد از رفتار را بین کامپوننت‌ها فراهم می‌سازد.

فیلم آموزش پروژه محور ری اکت جی اس ReactJS با فریم ورک Tailwind CSS در فرادرس

کلیک کنید

React Stately

React Stately (+) یک مجموعه از قلاب‌ها است که امکان مدیریت حالت و منطق اساسی را برای هر کامپوننت فراهم می‌سازند. این قلاب‌ها هیچ پیش‌فرضی در مورد پلتفرمی که روی آن اجرا می‌شوند، ندارند و از هیچ نوع تِم یا منطق خاص سیستم طراحی بهره نمی‌گیرند.

قلاب‌‌های React Stately اقدام به پذیرش prop-های رایج از کامپوننت‌ها کرده و مدیریت حالت را ارائه می‌کنند. این قلاب‌ها منطق اساسی را برای کامپوننت پیاده‌سازی کرده و یک اینترفیس برای خواندن و به‌روزرسانی حالت کامپوننت بازگشت می‌دهند. React Stately را می‌توان به صورت مستقل در کامپوننت‌های شخصی استفاده کرد و یا آن را با قلاب‌های React Aria ترکیب کرد تا امکان بیشتری برای مدیریت رفتار و تعامل‌های کاربر در وب‌اپلیکیشن‌ها پدید آید.

React Aria

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

React Aria رفتار و دسترس‌پذیری را برای وب بر اساس رویه‌های مجوزدهی WAI-ARI پیاده‌سازی کرده است. این مورد شامل پشتیبانی از نرم‌افزار قرائت تمام صفحه و ناوبری کامل کیبوردی همراه با تعامل‌های ماوس و لمسی است که روی طیف گسترده‌ای از دستگاه‌ها و مرورگرها پشتیبانی می‌شوند. همچنین قابلیت بین‌المللی‌سازی برای بیش از 30 زبان و نمایش راست به چپ و قالب‌بندی بومی تاریخ و زمان نیز ارائه شده است.

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

ساخت یک کامپوننت با قلاب‌های React Aria و React Stately به این صورت است که قلاب‌ها را فراخوانی می‌کنیم و prop-های حاصل را به عناصر مناسب DOM می‌فرستیم:

1function Switch(props) {
2  let state = useToggleState(props);
3  let {inputProps} = useSwitch(props, state);
4  let {isFocusVisible, focusProps} = useFocusRing();
5
6  return (
7    <label style={{display: 'flex', alignItems: 'center'}}>
8      <VisuallyHidden>
9        <input {...inputProps} {...focusProps} />
10      </VisuallyHidden>
11      <svg width={40} height={24} aria-hidden="true" style={{marginRight: 4}}>
12        <rect
13          x={4}
14          y={4}
15          width={32}
16          height={16}
17          rx={8}
18          fill={state.isSelected ? 'orange' : 'gray'}
19        />
20        <circle cx={state.isSelected ? 28 : 12} cy={12} r={5} fill="white" />
21        {isFocusVisible && (
22          <rect
23            x={1}
24            y={1}
25            width={38}
26            height={22}
27            rx={11}
28            fill="none"
29            stroke="orange"
30            strokeWidth={2}
31          />
32        )}
33      </svg>
34      {props.children}
35    </label>
36  );
37}
38
39<Switch>Test</Switch>

برای کسب اطلاعات بیشتر در مورد React Aria و مشکلاتی که حل می‌کند می‌توانید این صفحه (+) از مستندات آن را بخوانید.

React Spectrum

React Spectrum (+) همه این اجزا را که تا اینجا معرفی کردیم، در کنار هم قرار می‌دهد و استایل‌بندی خاص آدوبی را پیاده‌سازی می‌کند. این کتابخانه به منظور ارائه یک تجربه تطبیق‌پذیر که در همه نوع تعامل‌های ماوس، لمسی و کیبورد و روی دستگاه‌هایی با اندازه متنوع صفحه کار می‌کند ارائه شده است. این کتابخانه از طراحی تم و از جمله از تم تاریک و مقیاس‌بندی واکنش‌گرا برای هدف‌گیری دستگاه‌های لمسی بزرگ پشتیبانی می‌کند.

اگر آن را با نرم‌افزار آدوبی یکپارچه می‌سازید و یا یک کتابخانه کامپوننت سربه‌سر می‌خواهید که در پروژه خود مورد استفاده قرار دهید، در این صورت React Spectrum مکانی عالی برای آغاز کار محسوب می‌شود. با استفاده از Project Firefly می‌توانید به میزان زیادی در وقت خود صرفه‌جویی کنید. Project Firefly یک فریمورک کامل برای ساخت اپلیکیشن‌های سفارشی آدوبی است که کلود-نیتیو هستند. مشتریان سازمانی و شرکا می‌توانند کارکرد پلتفرم Adobe Experience و راهکارهای Adobe Experience Cloud را در یک اپلیکیشن سفارشی که نیازهای تجاری و گردشکار خاصی را رفع می‌کنند، بسط دهند.

API-ها در React Spectrum طوری طراحی شده‌اند که استفاده آسانی داشته باشند. مثال زیر میزان سادگی ایجاد یک عنصر انتخابی را با پشتیبانی از بخش‌بندی و گزینه‌های پیچیده نشان می‌دهد.

1<Picker label="Options">
2  <Section title="Permission">
3    <Item textValue="Read">
4      <Book size="S" />
5      <Text>Read</Text>
6      <Text slot="description">Read Only</Text>
7    </Item>
8    <Item textValue="Write">
9      <Draw size="S" />
10      <Text>Write</Text>
11      <Text slot="description">Read and Write Only</Text>
12    </Item>
13    <Item textValue="Admin">
14      <BulkEditUsers size="S" />
15      <Text>Admin</Text>
16      <Text slot="description">Full access</Text>
17    </Item>
18  </Section>
19</Picker>

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

کتابخانه‌های مدرن نما مانند React Spectrum به تیم‌ها امکان می‌دهند که کامپوننت‌ها را به روشی آسان‌تر از پیش ساخته و نگهداری کنند.