Storybook X Styleguidist

Transcript

1. Storybook Styleguidist X With Component Driven Development — Phil Lee —
2. Index I. Mordern Web Front-End II. Challenges III. Storybook IV. Styleguidist V. Wrap Up
3. — Special thanks to Liam
4. Modern Web FrontEnd
5. • Get data from Database • Generate HTML by data • Send it • Get HTML file • Reder Traditional Web App
6. • Get data from Database • Send it • Get data • Generate HTML • Render Mordern Web App
9. BOOM!!
11. I’ll quit this shit…
12. Component
14. Container (state, logic) Presenter (stateless) Root Container Presenter Presenter Presenter Presenter Presenter Container Presenter props props props How Components Works
15. How Components Works Flux Architecture
17. Happy now?
18. NOPE
19. Challenges
20. Component Independent Reusable
22. Document Independent Reusable State Dependency Combined Components Routing Nullable Component Hard to understand Component dependencies
23. “We can’t focus on UI.”
24. Container (state, logic) Presenter (stateless) Root Container Presenter Presenter Presenter Presenter Presenter Container Presenter props props props How Components Works
25. Normalize Presenter Presenter Presenter Presenter Presenter Presenter Presenter Presenter Presenter Presenter Presenter Presenter
26. Inject state Fake state Presenter Presenter Presenter Presenter Presenter Presenter Fake state Fake state Fake state Fake state Fake state
27. “How?”
28. The UI Development Environment
29. Storybook • Build & Test components • Mature ecosystem(addons) • Support isolated environment 
 without application’s requirements
30. Live
31. Living Document For UI
32. Styleguidist • Simplifies creating and maintaining 
 a UI documentation • Support isolated environment 
 without application’s requirements
33. Live
34. WRAP UP
35. Why we should use it • Tool for UI components • De-facto standard • Communication for product team (Design, PM) • Prevent design/planning specification error • Easy (without configuration…)
36. Which one is the best? • It depends on your preference • Almost same, but slightly different • Storybook as workshop, Styleguidist as storefront
37. — End
38. https://storybook.js.org References https://www.youtube.com/watch?v=jc9xKzdkYDg https://hyunseob.github.io/2018/01/08/storybook-beginners-guide/ https://www.vobour.com/ܻঘ౟-झషܻ࠘-react-storybook-ਸ-ాೠ-ஹನք౟-ѐ ߊҗ-ഝਊ-ߑߨ-1 https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06 https://vue-styleguidist.github.io/