번역된 한국어 스크립트 보는 방법
상단메뉴 “보기” -> “발표자 노트 표시" 체크 후 슬라이드 하단 영역 크기 키우기
Storybook
A Comprehensive Introduction to Streamline Your UI Development Process
#FEFFFF
#191D20
Helvetica Neue
WHOAMI
Florian Ludot
Co-founder & CTO @ Avanssion inc.
Born and raised 🇫🇷 / 4yrs 🇯🇵 / now 🇰🇷
Working with dev and design teams for +8yrs
florianldt.com or @florianldt
Who is this for?
Designers (we will use Figma & design principles)
Front-end developers (there will be code)
Team leaders & PMs (we will talk about collaboration)
Everyone curious about design and dev, and everything in between
Before starting
Every underlined texts, images and Demo have links to their resources
This talk is recorded
All materials used is open source and will be provided
Prepare your questions for the Q&A session at the end of the talk
We have a lot to cover in a short time
Most importantly and hopefully, enjoy the talk
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
What’s Storybook?
“Storybook is a frontend workshop for building UI components and pages in isolation.”
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Why should you care?
Component-Driven Development (CDD)
Component documentation
Involve all stakeholders as soon as possible
Improve testing
Isolate UI from business logic
Iterate on your product quickly
Save time & money
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Prepare the design
Introduced by Brad Frost in 2013
Methodology for creating design systems
Originally composed of 5 distinct levels extended to 6
atomicdesign.bradfrost.com
Atomic Design
Prepare the design
bradfrost.com/blog/post/extending-atomic-design
Atomic Design
Prepare the design
Prepare the design
Don’t forget “easy to forget” component states (disabled, loading, …)
Document your design as much as possible
Avoid as much cognitive overhead for developers during the handoff
Involve stakeholders in your design process
Best Practices and Tips
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Storybook: implementation
Installation
Storybook: implementation
Storybook: implementation
Provide static and sandbox stories
Document your storybook as much as possible
Test accessibility right into your stories
storybook-addon-designs to embed Figma previews
Implementing templates and pages don’t suit every projects
Involve stakeholders in your development process
Best Practices and Tips
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Storybook: deployment
Choosing a hosting provider
with plenty of other alternatives
Storybook: deployment
Easy setup
Publish public or private Storybooks
All your Storybooks in one place
Git-style review & merge system for UI
Collaboration
Regression testing
Why Chromatic
Storybook: deployment
With Chromatic
Storybook: deployment
With Chromatic
Storybook: deployment
Storybooks are private by default
5,000 free snapshots/month
Sync your Chromatic project with the GitHub repo
Use Continuous Integration
Best Practices and Tips
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Publish the library
+
Choose between a public or private library
Rollupjs
npm
Publish the library
Configuration
rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript
Publish the library
npm publish
Publish the library
Should you really publish your component library?
If yes, should it be a public or private one
Build your library using Typescript or provide types
Document your library
Write tests and provide code coverage
Use a changelog to keep track of changes
Best Practices and Tips
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Integration
For npm
npm install tkcreativekit styled-components
For yarn
yarn add tkcreativekit styled-components
Integration
Integration
Use npm link x or npm install /local/path/to/x while testing integrations
Best Practices and Tips
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Final key takeaways
Study Human Interface Guidelines (Web, Apple platforms, Android platforms)
Onboard and communicate with stakeholders early on
The Storybook is a living document
Start using Storybook for new projects
Gradually adopt it for existing projects
Study top company Storybooks
Get your hands dirty
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
To learn more
Figma: figma.com/file/xzj8gzuhGNqVyGfFNtCglC/Creative-Tokyo-Kit
Comp. library + Storybook repo + slides: github.com/florianldt/tkcreativekit
Storybook preview: master--63f12fea8a787fc74f71d1b8.chromatic.com
npm package: npmjs.com/package/tkcreativekit
Integration repo: github.com/florianldt/tkcreativekit-integration
Inspirations: SAP, Microsoft, IBM Carbon, Uber Base (not using Storybook)
Atomic Design Methodology : atomicdesign.bradfrost.com/chapter-2/
Alternatives: Pattern Lab, React Cosmos, Ladle, …
Agenda
What’s Storybook?
Why should you care?
Prepare the design
Storybook: implementation
Storybook: deployment
Publish the library
0
Integration
Final key takeaways
To learn more
Q&A
1
2
3
4
5
6
7
8
9
Thank you
Q&A