It’s all about Components

A presentation at BeJS Brussels in May 2022 in Brussels, Belgium by Debbie O'Brien

Slide 1

Slide 1

It’s all about Components

debs_obrien

Slide 2

Slide 2

Debbie O’Brien Head Developer Advocate at Bit Open Source Contributo Speaker,Teacher, Blogger, YouTube Cycling, Running, Padel, Skiin 4th degree black belt in Taekwondo r g r debs_obrien

Slide 3

Slide 3

The Modern Web is Component Driven

Slide 4

Slide 4

Component Driven Is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems

Slide 5

Slide 5

Slide 6

Slide 6

base shoe-store ecommerce

Slide 7

Slide 7

So how do we build Component Driven?

Slide 8

Slide 8

Think about every component as a product for anyone to use

Slide 9

Slide 9

Your Component: e s e I Great Dev Experienc Different context Easy to us Great AP Loosely coupled

Slide 10

Slide 10

Developers e e e Better softwar Maintainable softwar Testable softwar Dev Experience

Slide 11

Slide 11

Organizations e y e Better softwar Save tim Save mone Happier Devs

Slide 12

Slide 12

Component Driven Re usa ble Theme-able e l b a s o p m o C Components t n e d n e p e d n I Enc aps ula ted

Slide 13

Slide 13

Theme-able Design components with themes so they can be used differently in other apps

Slide 14

Slide 14

Theme-able Apply different themes

Slide 15

Slide 15

Composable Compose smaller components together to form more

complex components

Slide 16

Slide 16

Composable

Slide 17

Slide 17

Encapsulated Exposes interfaces which allow the caller to use its functionalit y Hides details of internal variables or state

Slide 18

Slide 18

Encapsulated title text src alt currency buttonText

Slide 19

Slide 19

Independent Components are independen Components have their own version and revision histor Components have their own build pipelin y e t Minimal dependencies on other components

Slide 20

Slide 20

Independant Each component has its own version

Slide 21

Slide 21

Reusable Reused in different scenarios in the same or in different applications

Slide 22

Slide 22

Reusable

Slide 23

Slide 23

Slide 24

Slide 24

Decoupled

Slide 25

Slide 25

Depend on others or build your own?

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Let’s talk Design Systems

Slide 29

Slide 29

It all starts with the designers

Slide 30

Slide 30

Design Tokens

Slide 31

Slide 31

Design Tokens

Slide 32

Slide 32

Base Theme

Slide 33

Slide 33

Design Tokens

Slide 34

Slide 34

Design Tokens

Slide 35

Slide 35

CSS Vars

Slide 36

Slide 36

Base Theme

Slide 37

Slide 37

Theme Provider

Slide 38

Slide 38

Pink Theme

Slide 39

Slide 39

It’s Component Time

Slide 40

Slide 40

Cart Page

Slide 41

Slide 41

Cart Page

Slide 42

Slide 42

List the Components t s y g n e t t • headin imag • • tex • currenc • butto remove from car • • cart item • car • cart page

Slide 43

Slide 43

Think about the API

Slide 44

Slide 44

Heading Component

Slide 45

Slide 45

Image Component

Slide 46

Slide 46

Text Component

Slide 47

Slide 47

Button Component

Slide 48

Slide 48

Remove From Cart Component

Slide 49

Slide 49

Now It’s Time to Build

Slide 50

Slide 50

Cart Page cart page cart heading cart item image heading text currency

remove from cart

Slide 51

Slide 51

Component Library

Slide 52

Slide 52

Keep Building

Slide 53

Slide 53

Slide 54

Slide 54

Compose Components to create Apps

Slide 55

Slide 55

Slide 56

Slide 56

Reuse Components in any App

Slide 57

Slide 57

Reuse Components in any App

Slide 58

Slide 58

Reuse Components in any App

Slide 59

Slide 59

Reuse Components in any App

Slide 60

Slide 60

Configs as a Component

Slide 61

Slide 61

Sharing ESLint config

t Create your config as a componen Add your rules

Slide 62

Slide 62

Sharing ESLint config Export the config

Slide 63

Slide 63

Sharing ESLint config

g Import the confi All projects stay up to date

Slide 64

Slide 64

Prettier, Tailwind, TSConfig g Create one confi Apply it to all your projects

Slide 65

Slide 65

Component Driven d p m d d • • • • • • Components are truly isolate Scoped to a Particular Tea Independently Versione Independently Release No longer coupled to the Ap Can be consumed in the app, any app, many apps

Slide 66

Slide 66

thanks for listening debs_obrien

Slide 67

Slide 67

Demo Projects Demo Projects on bit.dev debs_obrien