React Spectrum – zbiór bibliotek React firmy Adobe
React Spectrum jest specjalnie utworzonym zbiorem bibliotek i narzędzi. Ich celem jest pomoc w tworzeniu niezawodnego środowiska użytkownika.
Przede wszystkim w skład Spectrum wchodzą trzy biblioteki React:
- Aria – Biblioteka React Hooks, zapewnia dostępne prymitywy UI.
- Stately – Biblioteka React Hooks, pomaga zarządzać stanem między platformami oraz podstawową logikę systemu projektowania.
- Spectrum – implementacja Spectrum, systemu projektowania firmy Adobe.
Funkcje React Spectrum
W Adobe każdy z produktów spełnia wysokie standardy spójności UI, jego dostępności oraz międzynarodowości.
Adaptacja
Każdy komponent zaprojektowano z myślą o pracy z myszką, dotykiem oraz klawiaturą. Zbudowane zgodnie z zasadami projektowania responsywnego. Celem tego działania jest zapewnienie wygody korzystania i wrażeń bez względu na urządzenie z którego korzystamy.
Dostępność
Zgodnie z praktykami autorskimi WAI-ARIA realizuje się dostępność i zachowanie. Wszystkie komponenty przetestowano na wielu czytnikach ekranu i urządzeń.
Możliwość dostosowania
W bibliotekach React Spectrum można dostosować odpowiednio motywy, a także dopasować automatycznie każdy z komponentów do trybu ciemnego. Ponadto, korzystając z hooków Aria i Stately, buduje się własne komponenty z własną strukturą DOM, aby uzyskać jeszcze większe możliwości dostosowywania.
Międzynarodowość
Po wpakowaniu React Spectrum dostępna jest obsługa ponad 30 języków, także tych pisanych z prawej do lewej strony. Wśród dostępnych opcji jest również formatowanie daty oraz liczb.
Budowa React Spectrum
Każdy komponent podzielono na trzy części – stan, zachowanie oraz renderowany komponent. Jest to możliwe dzięki React Hooks, a po to by umożliwić ponowne wykorzystanie zachowania komponentów w systemach projektowych.
React Aria
React Aria wdraża zachowanie i dostępność. Oprócz funkcji adaptacyjnej, czyli obsługi nawigacji i czytnika ekranu przy pomocy klawiatury, zajmuje się także internacjonalizacją. Aria nie posiada logiki oraz stylistyki charakterystycznej dla systemu projektowania. Wprowadza obsługę zdarzeń, internacjonalizację, dostępność – to, co może być współużytkowane przez wiele systemów projektowych. Tworzenie w React Aria zaczyna się od wyższego poziomu, także nie buduje się wszystkiego od zera. Zapewnia to pełną kontrolę nad renderowaniem i stylizowaniem komponentów. Mają one już wbudowane zachowanie i dostępność, więc można szybciej tworzyć nowe komponenty.
React Stately
Przede wszystkim React Stately jest zbiorem punktów zaczepienia. Zapewniają one zarządzanie stanem oraz podstawową logiką dla każdego z komponentów. Tak jak Aria nie posiadają logiki i stylistyki charakterystycznej dla systemu. Hooki React Stately zapewniają zarządzanie stanem. Oprócz tego akceptują charakterystyczne rekwizyty z komponentu. Ze Stately korzysta się niezależnie we własnych komponentach. Inną opcją jest połączenie z hookami React Aria. W związku z tym otrzymujemy więcej informacji o interakcji i zachowaniu użytkownika z aplikacjami internetowymi.
React Spectrum
React Spectrum łączy wszystkie wcześniejsze elementy razem. Wprowadza stylistykę charakterystyczną dla Adobe. Funkcje dostępności pozwala na obsługę motywów, zarówno trybu ciemnego, jak i czułego skalowania dla urządzeń dotykowych. Zaprojektowany właśnie z myślą o adaptacji – działa z użyciem myszy, klawiatury a także dotyku, na różnych urządzeniach (o dowolnym rozmiarze ekranu).
Poniżej znajduje się przykład utworzenia elementu wyboru z obsługą przekrojów oraz opcji złożonych.
<Picker label="Options"> <Section title="Permission"> <Item textValue="Read"> <Book size="S" /> <Text>Read</Text> <Text slot="description">Read Only</Text> </Item> <Item textValue="Write"> <Draw size="S" /> <Text>Write</Text> <Text slot="description">Read and Write Only</Text> </Item> <Item textValue="Admin"> <BulkEditUsers size="S" /> <Text>Admin</Text> <Text slot="description">Full access</Text> </Item> </Section> </Picker>
Zakończenie
React Spectrum zawiera początkowy zestaw komponentów. Wraz z rozwojem, w nadchodzących miesiącach zostaną dodane inne. Twórcy uważają, że istnieje możliwość dzielenia się zachowaniem i logiką komponentów między systemami projektowymi i różnymi platformami. Dzięki temu może poprawić się ogólna jakość aplikacji, a także pozwoli oszczędzić wielu firmom zarówno czas jak i pieniądze.
Źródło: Adobe React Spectrum