Building a Reusable Component Library on iOS
Article Summary
Michael Caylus from BlaBlaCar reveals how his iOS team built a component library that cut development time and unified their UI across 117 screens. The secret? Treating UI components like Lego bricks.
After designers introduced Atomic Design principles, BlaBlaCar's iOS team spent three months building a Swift component library. The framework separates each component into three distinct concerns: Data, Style, and Layout. This architectural decision became the foundation for faster development and consistent user experiences.
Key Takeaways
- Each component splits into three generic structures: Data, Style, and Layout
- Fixed frame computation over AutoLayout for better tableview performance
- Facebook Snapshot tests caught UI regressions during refactoring and PRs
- StyleGuide abstraction enables switching fonts and colors across the entire app
- Sample app helped designers spot edge cases missed in Sketch designs
BlaBlaCar reduced boilerplate code and improved UI consistency by architecting reusable components around separated data, style, and layout concerns.
About This Article
BlaBlaCar's iOS team found it hard to read code when they wrote frame computations by hand. Even with support libraries in place, teammates struggled to understand the layout logic.
They switched to the Framing library, which made the syntax for frame computation much simpler. The layout code became easier to read and maintain across the codebase.
The clearer code helped new team members get up to speed faster and reduced bugs when refactoring layouts. Later, the team realized that fixed frame computation was probably premature optimization compared to what hybrid approaches could offer.