Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

How thinking in components can increase your productivity

Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

  • Home
  • Tutorials
  • How thinking in components can increase your productivity

This article is about using the secrets of component thinking to build scalable and maintainable projects.

Section titled What are the benefits of components? What are the benefits of components?

Components are units of code that are nestable, reusable and decoupled. They help you to avoid repeat yourself by 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 also makes your project 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

Section titled Principles of "component thinking" you should follow Principles of "component thinking" you should follow

  • Everything is a component. Really! All exceptions will just mess up your project.
  • Don't repeat yourself.
  • Code your component in a way that works decoupled and standalone.
  • Follow naming conventions (BEM).

Section titled Example 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 the 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

Section titled Conclusion 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.


Alexander Feiglstorfer

Alexander Feiglstorfer

Passionate developer and always in search of the most effective way to resolve a problem. After working 13 years for agencies and SaaS companies using almost every CMS out there he founded Storyblok to solve the problem of being forced to a technology, proprietary template languages and the plugin hell of monolithic systems.