Building a component framework

Working with multiple teams on multiple front-end 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.

1. The need for a structured component library. The tradeoffs between complete developer freedom and a rigid code regime.
2. 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.
3. How to build and use an individually versioned component system using tools like Lerna and Storybook.
4. Challenges for the future

(https://medium.com/@BartWaardenburg/creating-a-react-component-library-using-storybook-e7c3fd105fd5)

Transcript

1. building a component framework @bartwaardenburg
2. the casus
3. ~150 apps
10. “How can we work together on ~200 front-end applications with ~30 developers spread out over ~15 scrum teams?”
11. “We want developers to have as much autonomy as possible while maintaining a certain amount of alignment.”
12. the situation
13. “Every team builds their own applications based on their own front-end tech stack”
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
15. the vision
16. “No two developers should have to build the same user interface component twice.”
17. ecosystem wishes single framework well documented style guide developer friendly designer friendly automated unit testing automated regression testing individually versioned components
18. “We need consolidation in frameworks to effectively work together”
19. framework wishes focused on components high performance small size pleasant learning curve available in-house knowledge large community stable server side rendering possible
20. in practice
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
22. well documented style guide
23. developer friendly
24. developer friendly
25. developer friendly
26. designer friendly
27. automated unit testing
28. automated unit testing
29. automated regression testing
30. automated regression testing
31. automated regression testing
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
33. individually versioned components
34. individually versioned components
35. individually versioned components
36. individually versioned components
37. the future
38. future wishes specific versioned styling for components (css-in-js) cross browser regression testing …
39. thanks @bartwaardenburg