Creating a (p)react component library

A presentation at Rotterdam - The Hague Front-end Meetup in March 2018 in The Hague, Netherlands by Bart Waardenburg

building a component framework @ bartwaardenburg

the casus

~150 apps

“How can we work together on ~200 front
end applications with ~30 developers spread out over ~ 15 scrum teams?”

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

the situation

“Every team builds their own applications based on their own front
end tech stack”

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

the vision

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

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

“We need consolidation in frameworks to effectively work together”

framework wishes focused on components high performance small size pleasant learning curve available in
house knowledge large community stable server side rendering possible

in practice

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

well documented style guide

developer friendly

developer friendly

developer friendly

designer friendly

automated unit testing

automated unit testing

automated regression testing

automated regression testing

automated regression testing

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

individually versioned components

individually versioned components

individually versioned components

individually versioned components

the future

future wishes specific versioned styling for components ( css
in
js ) cross browser regression testing …

thanks @bartwaardenburg

Bart Waardenburg
@bartwaardenburg

1 / 39

Working with multiple teams on multiple applications brings a whole new set of challenges to software development. Which code do you share, where do you draw the line and how do you work together keeping a certain amount of consistency. At the ANWB we’re currently tackling these problems and building a component library using (p)react.

The need for a structured component library. The tradeoffs between complete developer freedom and a rigid code regime.
I want to share our learnings on how to use React or Preact on a generic component level and our decisions to move from React to Preact.
How to build and use an individually versioned component system using tools like Lerna and Storybook.
Challenges for the future