This article is about the secrets of component thinking to build scalable and maintainable projects.
What are the benefits of components?
Components are units of code that are nestable, reusable and decoupled. They help you to don’t repeat yourself writing the same functionality or HTML tags multiple times. They ease the process of thinking because in a modern architecture everything is just a component. You don’t need to figure out how to structure your project in logical parts. This makes your project also much more maintainable when you work in a team.
Most developers think about React, Vue.js or “Web Components” when they hear components. But you can apply this design pattern to every technology. It works especially well in frontend development.
Principles of “component thinking” you should follow
- Everyhing is a component. Really! All exceptions just will mess up your project.
- Don’t repeat yourself.
- Code your component in a way that works decoupled and standalone.
- Follow naming conventions (BEM).
If you are not using Vue.js or some other bundling tool that allows you to write all parts of a component in one file I recommend following project structure:
If you are not already thinking in components, you should really try out some frameworks that are promoting the usage of components like React, Vue.js or Storyblok - A component composer for the technology you already use.