Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How We Made a Developer-Friendly UI Component Library

How We Made a Developer-Friendly UI Component Library

LINE DEVDAY 2021
PRO

November 11, 2021
Tweet

More Decks by LINE DEVDAY 2021

Other Decks in Technology

Transcript

  1. None
  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