Storybook 4.0 büyük yükseltmesi: RN için birinci seviye destek sağlayın, 6 yeni görünüm katmanı tanıtın
Yazar Michael Shilman
Çevirmen Xie Li
Zamanla, ön uç geliştiriciler tarafından geliştirilen uygulamalar her zamankinden daha büyük hale geldi ve uygulamalar, mantık ve işlevler istemciye geçtikçe giderek daha karmaşık hale geliyor. Derleme araçlarından (Webpack gibi) görünüm katmanına (React gibi) kadar ön uç yığınının farklı bölümlerini basitleştirmek için birçok harika kitaplık vardır. Ancak şimdiye kadar, uygulamanın atomik birimi olan UI bileşenlerini oluşturmak için evrensel bir araç yok.
Storybook'un amacı, bir çerçeve veya teknoloji yığını olsun, her geliştiricinin UI bileşenleri oluşturmasına yardımcı olmaktır. Son zamanlarda, Storybook 4.0'ın piyasaya sürülmesi bizi bu hedefe bir adım daha yaklaştırıyor.
Storybook 4.0 (SB4), 6 yeni görünüm katmanını destekleyecek ve hızlı bir şekilde modern bir kullanıcı arayüzü oluşturmak için zaman kazandıran özellikler sunacak:
- Katmanı görüntüle: Ember, MarkoJS, Mithril, HTML, Svelte, Riot
- Yapı: Webpack 4, Babel 7
- Mobil: Mobil cihaz görünümü React Native
- UI: Tema
- Çekirdek: Öykü parametreleri
Hikaye kitabı 6 yeni görünüm katmanını destekliyor
Storybook'un kullanıcı arayüzü bileşen araçlarına ve en iyi uygulamalar ekosistemine altı yeni görünüm katmanı sunmaktan mutluluk duyuyoruz. Storybook ve eklentilerinin görünüm katmanıyla hiçbir ilgisi yoktur. Bu, bir kişi bir özellik eklediğinde veya bir hatayı düzelttiğinde, hangi çerçeveyi seçerse seçsin her kullanıcının bundan faydalanabileceği anlamına gelir.
Örneğin, Storybook Angular'ın tanıtımı Typescript desteğini büyük ölçüde iyileştirdi ve React Native'deki iyileştirmeler gelecek nesil Web kullanıcı arayüzüne fayda sağlayacak ve yeni görünüm katmanı herkese fayda sağlayacak.
- Ember (Gabriel J Csapo ve Robert Jackson tarafından yaratılmıştır)
- MarkoJS (Neville Mehta tarafından yaratılmıştır)
- Mithril (Sangmin Yoon tarafından oluşturuldu)
- HTMLSnippets (Filipp Riabchun tarafından oluşturulmuştur)
- Svelte (Gavin King tarafından yaratılmıştır)
- Riot.js (Lionel Ben ychou tarafından oluşturulmuştur)
Derleme hızını artırmak için Webpack4 ve Babel7'yi kullanın
Webpack 4 ve Babel 7'nin yükseltilmesiyle Storybook 4, önemli performans iyileştirmeleri elde etti. Storybook, artık oluştur-yanıt-uygulama 2, Gatsby 2 ve Next 7 gibi bazı popüler ön uç araçlarla uyumlu.
Webpack 4 ve Babel 7 ayrıca Webpack 4'te WebAssembly desteği, Babel 7'deki JS yapılandırması, Typescript ve JSX parçaları dahil olmak üzere yüzlerce başka iyileştirme içerir.
Daha eski bir sürümden yükseltme yapıyorsanız, Storybook 4.0 için geçiş kılavuzunu öğrenebilirsiniz:
https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c
React Native için birincil destek sağlayın
Bileşenler Web ile sınırlı değildir. React Native, bileşenleri mobil alana getiriyor.
Storybook 4.0, Storybook'u bir ekibin mobil cihazında yayınlamayı çok kolaylaştırır. Storybook uygulamasını Storybook sunucusuna bağlanmaya gerek kalmadan çalıştırmak için gereken tüm özellikleri sağlar.
@ Storybook / react-native güncellemesi, uygulamayla bütünleşme şeklini iyileştiriyor. Ek olarak, Storybook artık düğmeler, notlar ve arka planlar gibi popüler eklentiler için kullanılabilecek yerleşik bir kullanıcı arayüzüne sahiptir.
Hikaye kitabı teması
Storybook 4.0 siyah bir tema sağlar
Geliştiriciler artık Hikaye Kitabının görünümünü tam olarak kontrol edebilir. Norbert de Langen, stili markanıza uyacak şekilde ayarlamanıza izin veren temalar sundu.
Storybook 4.0, bu olasılıkları sergilemek için "siyah" bir tema içerir. Konu açıklaması için lütfen belgeye bakın (https://storybook.js.org/configurations/theming/).
Mobil web uygulaması geliştirmeyi basitleştirin
Ön uç geliştiriciler, masaüstü ve mobil cihazlar için web uygulamaları oluşturur ve Storybook 4, özel bir mobil görünüm içerir.
Bir mobil cihaz kullanıcı aracısı algılandığında Storybook, hikaye kataloğunu, ana bileşen ön izlemesini ve eklenti panelini üç ayrı sekmede görüntüler.
Resmi Hikaye Kitabı örneğimize telefonunuzda göz atabilir, bir demo programına göz atabilir veya web tarayıcınızın geliştirme aracında bir mobil kullanıcı aracısı ayarlayıp sayfayı yeniden yükleyebilirsiniz.
Story parametresi API
Tom Coleman tarafından geliştirilen yeni parametre API'si ile kullanıcılar ve eklenti yazarları artık hikayeleri yapılandırmak için standart bir formata sahip.
Örneğin, her hikaye için beceriksiz withNotes değiştiricisini kullanmak gerekli değildir:
storiesOf ('Benim bileşenim', modül) .add ('hikaye1', withNotes ('bazı notlar') (() = > < Bileşen ... / > )) .add ('hikaye2', withNotes ('diğer notlar') (() = > < Bileşen .../ > ))Bir hikaye eklerken ek bir parametre ileterek hikayeyi işaretleyebilirsiniz:
// .storyook / config.js (global değiştirici, yerel değiştirici de desteklenir) addDecorator (notlarla) // Component.stories.js storiesOf ('Benim bileşenim', modül) .add ('hikaye1', () = > < Bileşen / > , {notlar: 'bazı notlar'}) .add ('hikaye2', () = > < Bileşen / > , {notlar: 'diğer notlar'})Tüm resmi Storybook eklentileri, hikaye parametrelerini kullanmak için dönüştürülecek. Yeni API'nin nasıl kullanılacağı hakkında daha fazla bilgi için lütfen belgelere bakın:
https://github.com/storybooks/storybook/blob/master/MIGRATION.md#addon-story-parameters
Storybook 4.0'a yükseltin
Storybook 4.0'a sadece bir dakika içinde geçebilirsiniz.
Storybook'a aşina değilseniz, şimdi başlamak için en iyi zaman. Hikaye kitabı, uzun ömürlü UI bileşenleri oluşturmanıza yardımcı olmak için en popüler görünüm katmanlarını ve ön uç teknolojilerini destekler. React / Angular / Vue'da adım adım ilerlemek için ya da hemen başlamak istiyorsanız Storybook eğitimine göz atın:
cd projem npx -p @ hikaye kitabı / cli sb init iplik hikaye kitabıStorybook, hala dünyadaki en popüler UI bileşen tarayıcısıdır. Son zamanlarda, projenin Github'da 30.000'den fazla yıldızı, NPM'de aylık 1 milyondan fazla indirmesi ve 500 katılımcısı var.
Storybook Open Collective hız kazanıyor. Facebook, Chromatic, Percy, Tipe ve Applitools gibi sitelerden aylık sponsorluk alıyor Algolia ve Airbnb, yakın zamanda tek seferlik büyük bağışlarda bulundu.Ayrıca, topluluktan da birçok destekçi var.
Orijinal İngilizce
https://medium.com/storybookjs/storybook-4-0-is-here-10b9857fc7de
