Creating a (p)react component library

Slide 1

building a component framework @ bartwaardenburg

Slide 2

the casus

Slide 3

~150 apps

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

“How can we work together on ~200 front

end applications with ~30 developers spread out over ~ 15 scrum teams?”

Slide 11

“We want developers to have as much autonomy as possible while maintaining a certain amount of alignment .”

Slide 12

the situation

Slide 13

“Every team builds their own applications based on their own front

end tech stack”

Slide 14

ui

related libraries in use angular@1.5.x preact@x.x.x react@16.x.x react@15.x.x angular@4.x.x jQuery@x.x.x angular@1.6.x home

grown@x.x.x moustache@x.x.x

Slide 15

the vision

Slide 16

“No two developers should have to build the same user interface component twice.”

Slide 17

ecosystem wishes single framework well documented style guide developer friendly designer friendly automated unit testing automated regression testing individually versioned components

Slide 18

“We need consolidation in frameworks to effectively work together”

Slide 19

framework wishes focused on components high performance small size pleasant learning curve available in

house knowledge large community stable server side rendering possible

Slide 20

in practice

Slide 21

preact just user interface components only ~ 3kb in size if you know react you know preact great templating with JSX possibility to use react components high performance in benchmarks server side rendering possible

Slide 22

well documented style guide

Slide 23

developer friendly

Slide 24

developer friendly

Slide 25

developer friendly

Slide 26

designer friendly

Slide 27

automated unit testing

Slide 28

automated unit testing

Slide 29

automated regression testing

Slide 30

automated regression testing

Slide 31

automated regression testing

Slide 32

individually versioned components each component has its own package.json and version lerna & yarn workspaces handle all node modules we use conventional commits for our commit messages we use commitizen and commit

lint to help with commit messages new semver component versions are derived from commit messages changelogs are generated based on commit messages components are privately hosted on our nexus repository