1 of 41

Component libraries for your framework

2 of 41

Living styleguides for your framework

3 of 41

Table of contents

  1. Who am I?
  2. What's a component library?
  3. Which working solution to pick?
  4. Demos
  5. You can help

3

4 of 41

WHOAMI

Norbert de Langen

https://github.com/ndelangen�@norbertdelangen

​

5 of 41

WHAT IS A COMPONENT LIBRARY

�( intro )

6 of 41

Component Library: �A collection of components, organised in a meaningful manner, and often providing some way to browse and preview those components and their associated assets.

6

7 of 41

As a new team member: �I want to know what reusable UI has already been built, and how to use it properly.

7

8 of 41

As a product owner: �I want to approve changes to UI quickly.

8

9 of 41

As a developer: �I want to build components in isolation to iterate quickly.

9

10 of 41

Isolated Component Driven Development

10

11 of 41

Features

  1. View components in isolation

11

12 of 41

Features

  • View components in isolation
  • Display component in different settings/states

​

12

13 of 41

Features

  • View components in isolation
  • Display component in different settings/states
  • See event/callbacks called from components

​

13

14 of 41

Features

  • View components in isolation
  • Display component in different settings/states
  • See event/callbacks called from components
  • Tweak props/data, see results instantly

​

​

​

14

15 of 41

Features

  • View components in isolation
  • Display component in different settings/states
  • See event/callbacks called from components
  • Tweak props/data, see results instantly
  • Change component code, hot reload of preview

​

​

15

16 of 41

Features

  • View components in isolation
  • Display component in different settings/states
  • See event/callbacks called from components
  • Tweak props/data, see results instantly
  • Change component code, hot reload of preview
  • Change or add variants, hot reload of manager

16

17 of 41

Features

  • View components in isolation
  • Display component in different settings/states
  • See event/callbacks called from components
  • Tweak props/data, see results instantly
  • Change component code, hot reload of preview
  • Change or add variants, hot reload of manager
  • Overridable config

17

18 of 41

Features

  • View components in isolation
  • Display component in different settings/states
  • See event/callbacks called from components
  • Tweak props/data, see results instantly
  • Change component code, hot reload of preview
  • Change or add variants, hot reload of manager
  • Overridable config
  • Explore & Search + View documentation

​

​

18

19 of 41

WHICH SOLUTION TO PICK

�( comparison )

20 of 41

20

21 of 41

21

22 of 41

22

23 of 41

​

DIY

UIengine

sourcejs

SC5

styleguidist

storybook

Supports

?

​

​

​

​

​

Explore / Search

?

✓

✓✓

✓✓

✓✓

✓✓

True isolation

?

✓*

-

-

-

✓

Interactivity

?

-

✓

-

✓

✓

Customizable

-

-

✓

✓

✓

-*

Dev / Docs

?

✓✓

✓✓

✓

✓✓

✓

Maintained

you

✓*

-

-

✓

✓

23

24 of 41

Do It Yourself

24

25 of 41

Do It Yourself

Opening the can of worms

25

26 of 41

DIY

  • Support the framework you use

26

27 of 41

DIY

  • Support the framework you use
  • Rebuild when you switch framework

27

28 of 41

DIY

  • Support the framework you use
  • Rebuild when you switch framework
  • It will take time to get it right, ready for use

28

29 of 41

DIY

  • Support the framework you use
  • Rebuild when you switch framework
  • It will take time to get it right, ready for use
  • Easy to end up with a lot of ad-hoc features

29

30 of 41

DIY

  • Support the framework you use
  • Rebuild when you switch framework
  • It will take time to get it right, ready for use
  • Easy to end up with a lot of ad-hoc features
  • Maintenance is hard

​

30

31 of 41

DIY

  • Support the framework you use
  • Rebuild when you switch framework
  • It will take time to get it right, ready for use
  • Easy to end up with a lot of ad-hoc features
  • Maintenance is hard
  • Open source it? community can be demanding

​

31

32 of 41

So you're saying: �To never ever try and build my own styleguide?

32

33 of 41

No, I'm saying: �Experiment and learn, but when going for long-term consider using an existing system and cooperate with it's maintainers.

33

34 of 41

DEMOS

�( cool part )

35 of 41

https://github.com/nextbigsoundinc/stylemark

​

UIengine

35

36 of 41

https://github.com/styleguidist

​

@styleguidist

​

Styleguidist

36

37 of 41

https://github.com/storybooks

​

@storybookjs

​

37

38 of 41

YOU CAN HELP

�( publicity part )

39 of 41

Support the Open Source you use

39

40 of 41

https://opencollective.com/storybook

https://github.com/storybooks

​

41 of 41

THANK YOU �questions?

https://storybook.js.org�@storybookjs

​

https://github.com/ndelangen�@NorbertdeLangen

​