How thinking in components can increase your productivity

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.

Component Thinking and how to reduce brain cycles

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).

Example

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:

  • css/components/header.css
  • js/components/header.js
  • templates/components/header.html

Now you can easily find all the javascript logic, styling and templates relating to the header. Even better, inspecting the code in your browser will already tell you where to look for the files if you follow the BEM convention.

Components in HTML, CSS and Javascript

Conclusion

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.


More to read...

About the author

Alexander Feiglstorfer

Passionate developer and always in search of the most effective way to resolve a problem. Thinking in components helped him to be five times more productive. After working for big agencies and developing a scalable e-commerce platform he founded Storyblok.