DEV Community


Posted on

Separation of concerns: Templates, Component

Pete Hunt: React: Rethinking best practices -- JSConf EU - YouTube

What is "Separation of concerns"

  • the idea that each module or layer in an application should only be responsible for one thing
  • Reduce coupling, Increase cohesion
    • coupling: each modules relies on each of the other modules, cascading changes
    • cohesion: elements of a module belong together


  • Templates encourage a poor separation of concerns
  • "View model" tightly couples templates to display logic
  • display logic and markup are inevitably tightly coupled
  • display logic and markup are highly cohesive
  • Templates separate technologies, not concerns

React Component

  • A highly cohesive building block for UIs loosely coupled with other components
  • composable

Take aways

Separation of concerns !== Separate technologies

Top comments (0)