[React Advanced]. Storybook-2

Transcript

1. http://www.thinknetica.com STORYBOOK – 2 ПРОДВИНУТЫЙ REACT.JS 1
2. http://www.thinknetica.com STORYBOOK – 2 ЦЕЛЬ ▸ Создание, развитие и поддержка библиотеки презентационных компонентов ▸ Быстрая разработка (горячая замена, изолированное окружение, итеративный подход, оффлайн) ▸ Style Guide ▸ Документация ▸ Отладка ▸ Совместная работа 2
3. http://www.thinknetica.com STORYBOOK – 2 ПРАКТИЧЕСКИЕ ВОПРОСЫ ▸ Как использовать статические ресурсы в story? ▸ Как настроить, стилизовать и кастомизировать storybook? ▸ Что делать со сложной иерархией компонентов? ▸ Как решать проблему зависимостей презентационных компонентов от контейнерных, других HOC- компонентов, провайдеров состояния? ▸ Как тестировать компоненты с помощью storybook? 3
4. http://www.thinknetica.com STORYBOOK – 2 СОДЕРЖАНИЕ ▸ Истории ▸ Организация историй компонентов в каталоге ▸ Использование статических ресурсов ▸ Тестирование 4
5. http://www.thinknetica.com STORYBOOK – 2 STORY ▸ Представление состояния одного или нескольких презентационных компонентов (UI) ▸ Визуализированный вариант тестирования (тестовый случай, test case) ▸ Кнопка ▸ Обычная ▸ Уменьшенная ▸ Нажата ▸ Недоступна ▸ С иконкой ▸ С цветом ▸ Анимация наведения 5
6. http://www.thinknetica.com STORYBOOK – 2 STORY 6
7. http://www.thinknetica.com STORYBOOK – 2 STORY 7 Высокое качество Детализация Предсказуемость и контролируемость
8. http://www.thinknetica.com STORYBOOK – 2 STORY ▸ Комплект из одной “Default” истории для компонента принесет мало пользы (но больше, чем ничего) ▸ При создании комплекта историй нужно продумать основные возможные состояния (тестовые варианты) и описать их 8
9. http://www.thinknetica.com STORYBOOK – 2 ЧТО ДЕЛАТЬ, КОГДА КОМПОНЕНТОВ МНОГО ▸ и они разные ▸ Элемент (простой компонент; строка, колонка, картинка) ▸ Комплект элементов (составной компонент; форма, карточка, список) ▸ Представление страницы (Главная, контакты, поиск) 9
10. http://www.thinknetica.com STORYBOOK – 2 ЧТО ДЕЛАТЬ, КОГДА КОМПОНЕНТОВ МНОГО ▸ Варианты ▸ Ничего не делать, складывать истории в одноуровневый каталог ▸ Завести storybook для каждого вида компонентов ▸ Использовать storybook-chapters для организации иерархии историй ▸ Полезен не только, когда компонентов много ▸ но и когда есть один очень сложный 10
11. http://www.thinknetica.com STORYBOOK – 2 ЧТО ДЕЛАТЬ, КОГДА КОМПОНЕНТОВ МНОГО 11
12. http://www.thinknetica.com STORYBOOK – 2 STORYBOOK-CHAPTERS ▸ Специальный addon для организации неограниченного количества уровней вложенности в каталоге историй ▸ npm install —dev @storybook/addon-chapters ▸ yarn install -D @storybook/addon-chapters 12 // .storybook/config.js: import '@storybook/addon-chapters'; //addons.js: import '@storybook/addon-chapters/register';
13. http://www.thinknetica.com STORYBOOK – 2 ATOMIC DESIGN 13 // stories.js: storiesOf('React App', module) .addChapter('Atoms', chapter => chapter .add('Atom 1', render(1)) .add('Atom 2', render(2)) .addChapter('Molecules', chapter => chapter .addChapter('Organisms', chapter => chapter .add('Organism 1', render(7)) .add('Organism 2', render(8)), ) .add('Molecule 1', render(1)) .add('Molecule 2', render(2)), ) .add('Atom 3', render(3)) .add('Atom 4', render(4)), ) .add('new API docs', render(3)) .add('prev API docs', render(4)); http://bradfrost.com/blog/post/atomic-web-design/ storiesOf('Button', module) .add('with text', () => ( <Button onClick={action(‘clicked')}> Hello Button </Button> )) .add('with some emoji', () => ( <Button onClick={action(‘clicked')}> </Button> ));
14. http://www.thinknetica.com STORYBOOK – 2 ATOMIC DESIGN 14 http://bradfrost.com/blog/post/atomic-web-design/
15. http://www.thinknetica.com STORYBOOK – 2 STORYBOOK-CHAPTERS ▸ Elements: Header, Paragraph, Link, Image ▸ Widgets: Pagination, Card, CardsList, SearchForm ▸ Views: Contacts, SearchIndex 15
16. http://www.thinknetica.com STORYBOOK – 2 ТЕСТИРОВАНИЕ И STORYBOOK ▸ Storybook-addon-specifications – инструмент для созданий тестов прямо в процессе создания историй ▸ Storyshots – инструмент для автоматического snapshot- тестирования 16