devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Frontend
Home›Frontend›React Spectrum – zbiór bibliotek React firmy Adobe

React Spectrum – zbiór bibliotek React firmy Adobe

By Bernadeta Zapała
20 lipca 2020
132
0
Share:

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.

React Spectrum

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>
https://www.devnews.pl/wp-content/uploads/2020/07/Introducing-React-Spectrum-–-React-Spectrum-Blog-Google-Chrome-20.07.2020-14_22_18.mp4

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

TagsAdobeReactReact AriaReact SpectrumReact Stately

Share:

  • Narzędzia

    Corticon.js – bezserwerowy silnik reguł dla aplikacji JavaScript

  • Narzędzia

    Outlook – nowe funkcje dla wszystkich platform

  • Frontend

    Biblioteka React Flow do tworzenia interaktywnych grafów

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

  • 24 listopada 2020

    Tailwind CSS 2.0 z narzędziami kontroli tekstu

  • 20 listopada 2020

    Angular 11 – stabilne wydanie platformy

  • 19 listopada 2020

    Chakra UI React v1 wydany z ulepszeniami

  • 19 listopada 2020

    Chrome 87 z szybszym startem i zmianami w kartach

  • 18 listopada 2020

    Silnik WebKit w przeglądarce Safari 14

  • 17 listopada 2020

    Poznańska konferencja POZITIVE TECHNOLOGIES 2020 platformą wymiany wiedzy i doświadczeń najlepszych specjalistów IT

  • 16 listopada 2020

    Babylon.js 4.2 z edytorem cząsteczek i Babylon React Native

  • 13 listopada 2020

    Apple Silicon M1 i MacBooki – spotkanie One More Thing

  • 12 listopada 2020

    .NET 5.0 Microsoftu z poprawioną wydajnością

  • 12 listopada 2020

    Windows Terminal 1.5 Preview z nowymi funkcjami

  • 10 listopada 2020

    GIMP 2.99.2 – pierwszy krok do głównej wersji

  • 6 listopada 2020

    iOS 14.2 dostępny z nowymi emotikonami

  • 6 listopada 2020

    Node.js 15.1.0 – pierwsza aktualizacja stabilnego wydania

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT