- **Epistemic status:** #seedlings Component-based development or [[Modularity]]-based development is where code is split into reusable chunks. Making a change in a component updates every instance of it across the application, keeping the UI consistent and the development faster. In front-end development there are various frameworks that developers pick like Bootstrap, Material UI, Ant Design, etc. Most of these UI frameworks contain a lot of different kinds of components, making it attractive since it saves a lot of development time instead of creating your own. There are a few downsides: - Designers might not have a relevant design file to use the components in this framework - Trying to create a distinctive UI for branding purposes the level of customization in these frameworks is not very flexible and requires a lot of work to get right - They contain a lot of different components that may not be needed for a particular application making the download of the bundle heavier Style guides are a common approach to have a component-based [[Design Language System]] that creates uniformity. You can build these pretty quick from scratch, and it makes design faster. There are a few downsides: - A large scale project can be difficult to track the inheritance of components since a button could have a lot of different styles - Documentation of components if not done properly would make the implementation be incorrect - If a developer cannot find a specific component because the [[Design Language System]] is big most likely they will implement their idea of the component they are trying to find defeating the purpose of the style guide. [[Storybook Component Encyclopedia]] is a great resource of libraries that follow this design pattern. --- ## References - “Building Design Systems with Atomic Design | by Igor Syvets | Muzli - Design Inspiration.” Accessed January 30, 2022. <https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676>.