Creating a (p)react component library

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

designer friendly

automated unit 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

the future

future wishes specific versioned styling for components ( css

in

js ) cross browser regression testing …

thanks @bartwaardenburg