How We Made a Developer-Friendly UI Component Library

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Agenda - Background - Problems - Improvement - TypeScript - Storybook

Slide 3

Slide 3 text

User Interface Component Library

Slide 4

Slide 4 text

NPM https://www.npmjs.com 30 Billion downloads 1,750,000 packages

Slide 5

Slide 5 text

Document

Slide 6

Slide 6 text

Life is too short

Slide 7

Slide 7 text

Documentation is difficult

Slide 8

Slide 8 text

How have we done? Universal Video Player

Slide 9

Slide 9 text

Agenda - Background - Problems - Improvement - TypeScript - Storybook

Slide 10

Slide 10 text

Once upon a time Universal Video Player

Slide 11

Slide 11 text

Once upon a time Universal Video Player

Slide 12

Slide 12 text

Once upon a time Universal Video Player

Slide 13

Slide 13 text

Once upon a time Universal Video Player

Slide 14

Slide 14 text

Once upon a time Universal Video Player Contributer !

Slide 15

Slide 15 text

Set package npm install ...

Slide 16

Slide 16 text

Set package npm install ...

Slide 17

Slide 17 text

Once upon a time Universal Video Player

Slide 18

Slide 18 text

Read docs Search more detail from the docs

Slide 19

Slide 19 text

Is this the best option?

Slide 20

Slide 20 text

Developer-friendly Easy to use Kindness Usefulness

Slide 21

Slide 21 text

Developer-friendly Easy to use Kindness Usefulness

Slide 22

Slide 22 text

Developer Maintainer Core value Library enhancement Developer Experience

Slide 23

Slide 23 text

Core value Library enhancement For Developer Kindness Easy to use Usefulness Developer Experience Maintainer Sample Page IDE Workspace

Slide 24

Slide 24 text

Core value Library enhancement For Developer Kindness Easy to use Usefulness For Maintainer Stable Sustainable Document Automation Developer Experience

Slide 25

Slide 25 text

Core value Library enhancement

Slide 26

Slide 26 text

Agenda - Background - Problems - Improvement - TypeScript - Storybook

Slide 27

Slide 27 text

Dev Process Library enhancement Storybook MDX Snapshot Code Sandbox TypeScript TSDoc Declare file Sample Page IDE Workspace

Slide 28

Slide 28 text

Dev Process Library enhancement Storybook MDX Snapshot Code Sandbox TypeScript TSDoc Declare file IDE Workspace Sample Page

Slide 29

Slide 29 text

TypeScript Library enhancement

Slide 30

Slide 30 text

TypeScript Library enhancement

Slide 31

Slide 31 text

TSDoc https://tsdoc.org/

Slide 32

Slide 32 text

TSDoc https://tsdoc.org/

Slide 33

Slide 33 text

Using TSDoc Universal Video Player

Slide 34

Slide 34 text

Using TSDoc Universal Video Player

Slide 35

Slide 35 text

Using TSDoc Universal Video Player

Slide 36

Slide 36 text

Using TSDoc Universal Video Player

Slide 37

Slide 37 text

Using TSDoc Universal Video Player

Slide 38

Slide 38 text

TSDoc Playground https://tsdoc.org/play

Slide 39

Slide 39 text

TSDoc Library enhancement "

Slide 40

Slide 40 text

Declare files Library enhancement

Slide 41

Slide 41 text

Declare files Library enhancement

Slide 42

Slide 42 text

Dev Process Library enhancement Storybook MDX Snapshot Code Sandbox TypeScript TSDoc Declare file IDE Workspace Sample Page

Slide 43

Slide 43 text

Storybook Library enhancement

Slide 44

Slide 44 text

Storybook Ecosystem Addons

Slide 45

Slide 45 text

README.md Universal Video Player

Slide 46

Slide 46 text

Demo pages Universal Video Player

Slide 47

Slide 47 text

Demo pages Universal Video Player

Slide 48

Slide 48 text

Demo pages Universal Video Player

Slide 49

Slide 49 text

Demo pages Universal Video Player

Slide 50

Slide 50 text

Essential Addons Storybook

Slide 51

Slide 51 text

Essential Addons Storybook

Slide 52

Slide 52 text

MDX Storybook https://mdxjs.com

Slide 53

Slide 53 text

MDX Storybook https://mdxjs.com

Slide 54

Slide 54 text

MDX Storybook https://mdxjs.com

Slide 55

Slide 55 text

MDX Storybook https://mdxjs.com

Slide 56

Slide 56 text

MDX Storybook

Slide 57

Slide 57 text

CodeSandbox https://codesandbox.io/

Slide 58

Slide 58 text

:063@4"/%#09@*% storybook-addon-mdx-embed Mdx-embed Addon

Slide 59

Slide 59 text

Viewport Addon Perview per device

Slide 60

Slide 60 text

Storyshots Addon @storybook/addon-storyshots

Slide 61

Slide 61 text

Storybook Static Build

Slide 62

Slide 62 text

Demo pages Universal Video Player

Slide 63

Slide 63 text

Result Library enhancement For Developer Kindness Easy to use Usefulness For Maintainer Stable Sustainable Document Automation Developer Experience

Slide 64

Slide 64 text

Thank you