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

• 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