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
Narzędzia
Home›Narzędzia›Storybook 6.0 z nowościami dla frontendowców

Storybook 6.0 z nowościami dla frontendowców

By Bernadeta Zapała
14 sierpnia 2020
102
1
Share:

Zespół pracujący nad zbiorem wydał właśnie Storybook 6.0. Wśród nowości znajduje się konfiguracja zerowa, obsługa wizualizacji kilku książek w tym samym oknie eksploratora oraz edycję komponentów na żywo.

Storybook jest katalogiem historii stosowanym przez gigantów branżowych czy projekty open source. Historia jest prostą funkcją renderującą komponent przy użyciu zestawu argumentów – właściwości , dane wejściowe, miejsca itp.). Korzystają z niego zespoły takie jak Airbnb, Slack, Lyft, IBM czy Shopify. Dla każdej warstwy widoku organizuje małe funkcje JavaScript, by ustrukturyzować rozwój interfejsu użytkownika, testowanie oraz dokumentację.

Konfiguracja zerowa w Storybook 6.0

Celem twórców przy tworzeniu tej funkcji była szybka konfiguracja, ale jednocześnie zachowując solidne opcje dla zaawansowanych zespołów. Konfiguracja zerowa znacznie ułatwia wdrażanie składników interfejsu użytkownika.

We wcześniejszych wersjach najlepsze funkcje istniały w formie dodatków. Teraz są one dostarczane bezpośrednio ze Storybook 6.0.

Args – opowieści nowej generacji

Nową opcją jest konstrukt fabularny Args. Jest on usprawnieniem w pisaniu historii.

export const Basic = (args) => <Button {... args} />; 
Basic.args = {label: 'cześć'};

Użytkownicy dostają możliwość deklarowania danych wejściowych do argumentów swoich historii. Args posiada kilka zalet ergonomicznych:

  • Zmniejszanie rozmiaru i złożoności historii
  • Przetwarzanie historii przy użyciu szerszej gamy narzędzi
  • Ponowne wykorzystanie danych urządzeń w różnych historiach

Controls – edycja na żywo bez kodu

Nowym dodatkiem w Storybook 6.0 jest Controls, pozwalający na dynamiczną edycję danych wejściowych komponentu bez ruszania kodu.

Storybook 6.0 - Controls

Controls jest automatycznie generowanym interfejsem użytkownika do szybkiego eksperymentowania z komponentami. Sam interfejs zawiera także graficzne elementy sterujące generowane na podstawie opisu komponentu.

Composition

Opcja Composition daje możliwość przeglądania komponentów dowolnego Storybook wewnątrz lokalnego Storybooku.

  • Połącz wiele książek w jeden
  • Szybsze środowisko programistyczne dla dużych książek Storybook i monorepos
  • Przeglądaj komponenty z różnych frameworków obok siebie

Storybook 6.0 Composition

Jest to opcja zamówiona przez zespoły IBM, Chromatic oraz Cisco. Oprócz tego dostępne są nowe przypadki użycia – m.in. można opracować system projektowania międzyfirmowego w React, Vue czt Angular w jednym Storybooku.

Podsumowanie Storybook 6.0

Przede wszystkim Storybook jest standardem tworzenia komponentów interfejsu użytkownika. Storybook jest jednym z 10 najszybciej rozwijających się projektów OSS w 2019 roku według GitHub. Dostarczone ustawienia wstępne pozwalają programistom na używanie Storybook z React, Vue, Angular, Web Components a także z Ember. Storybook 6.0 jest dostępny na licencji open source MIT. Wydano także podręcznik migracji do nowej wersji.

Źródła: InfoQ, Storybook Medium

TagsStorybookStorybook 6.0

Share:

  • Systemy i przeglądarki

    Google Chrome – prace nad uwierzytelnianiem i baterią

  • FrontendQA

    Jest 26 – lżejsza wersja z implementacją Fake Timers

  • QA

    React Native Testing Library 2.0

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 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

 

 

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