How We Made a Developer-Friendly UI Component Library

Sangchul Lee
LINE Plus / Web Service Dev 4 / Front-end Engineer

https://linedevday.linecorp.com/2021/ja/sessions/100
https://linedevday.linecorp.com/2021/en/sessions/100
https://linedevday.linecorp.com/2021/ko/sessions/100

Transcript

2. Agenda - Background - Problems - Improvement - TypeScript - Storybook
3. User Interface Component Library
4. NPM https://www.npmjs.com 30 Billion downloads 1,750,000 packages
5. Document
6. Life is too short
7. Documentation is difficult
8. How have we done? Universal Video Player
9. Agenda - Background - Problems - Improvement - TypeScript - Storybook
10. Once upon a time Universal Video Player
11. Once upon a time Universal Video Player
12. Once upon a time Universal Video Player
13. Once upon a time Universal Video Player
14. Once upon a time Universal Video Player Contributer !
15. Set package npm install ...
16. Set package npm install ...
17. Once upon a time Universal Video Player
18. Read docs Search more detail from the docs
19. Is this the best option?
20. Developer-friendly Easy to use Kindness Usefulness
21. Developer-friendly Easy to use Kindness Usefulness
22. Developer Maintainer Core value Library enhancement Developer Experience
23. Core value Library enhancement For Developer Kindness Easy to use Usefulness Developer Experience Maintainer Sample Page IDE Workspace
24. Core value Library enhancement For Developer Kindness Easy to use Usefulness For Maintainer Stable Sustainable Document Automation Developer Experience
25. Core value Library enhancement
26. Agenda - Background - Problems - Improvement - TypeScript - Storybook
27. Dev Process Library enhancement Storybook MDX Snapshot Code Sandbox TypeScript TSDoc Declare file Sample Page IDE Workspace
28. Dev Process Library enhancement Storybook MDX Snapshot Code Sandbox TypeScript TSDoc Declare file IDE Workspace Sample Page
29. TypeScript Library enhancement
30. TypeScript Library enhancement
31. TSDoc https://tsdoc.org/
32. TSDoc https://tsdoc.org/
33. Using TSDoc Universal Video Player
34. Using TSDoc Universal Video Player
35. Using TSDoc Universal Video Player
36. Using TSDoc Universal Video Player
37. Using TSDoc Universal Video Player
38. TSDoc Playground https://tsdoc.org/play
39. TSDoc Library enhancement "
40. Declare files Library enhancement
41. Declare files Library enhancement
42. Dev Process Library enhancement Storybook MDX Snapshot Code Sandbox TypeScript TSDoc Declare file IDE Workspace Sample Page
43. Storybook Library enhancement
44. Storybook Ecosystem Addons
45. README.md Universal Video Player
46. Demo pages Universal Video Player
47. Demo pages Universal Video Player
48. Demo pages Universal Video Player
49. Demo pages Universal Video Player
50. Essential Addons Storybook
51. Essential Addons Storybook
52. MDX Storybook https://mdxjs.com
53. MDX Storybook https://mdxjs.com
54. MDX Storybook https://mdxjs.com
55. MDX Storybook https://mdxjs.com
56. MDX Storybook
57. CodeSandbox https://codesandbox.io/
58. :063@4"/%#09@*% storybook-addon-mdx-embed Mdx-embed Addon
59. Viewport Addon Perview per device
60. Storyshots Addon @storybook/addon-storyshots
61. Storybook Static Build
62. Demo pages Universal Video Player
63. Result Library enhancement For Developer Kindness Easy to use Usefulness For Maintainer Stable Sustainable Document Automation Developer Experience
64. Thank you