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…

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


Print Share Comment Cite Upload Translate
APA
Takuya Kikuchi | Sciencx (2024-03-28T16:45:32+00:00) » Separation of concerns: Templates, Component. Retrieved from https://www.scien.cx/2021/07/24/separation-of-concerns-templates-component/.
MLA
" » Separation of concerns: Templates, Component." Takuya Kikuchi | Sciencx - Saturday July 24, 2021, https://www.scien.cx/2021/07/24/separation-of-concerns-templates-component/
HARVARD
Takuya Kikuchi | Sciencx Saturday July 24, 2021 » Separation of concerns: Templates, Component., viewed 2024-03-28T16:45:32+00:00,<https://www.scien.cx/2021/07/24/separation-of-concerns-templates-component/>
VANCOUVER
Takuya Kikuchi | Sciencx - » Separation of concerns: Templates, Component. [Internet]. [Accessed 2024-03-28T16:45:32+00:00]. Available from: https://www.scien.cx/2021/07/24/separation-of-concerns-templates-component/
CHICAGO
" » Separation of concerns: Templates, Component." Takuya Kikuchi | Sciencx - Accessed 2024-03-28T16:45:32+00:00. https://www.scien.cx/2021/07/24/separation-of-concerns-templates-component/
IEEE
" » Separation of concerns: Templates, Component." Takuya Kikuchi | Sciencx [Online]. Available: https://www.scien.cx/2021/07/24/separation-of-concerns-templates-component/. [Accessed: 2024-03-28T16:45:32+00:00]
rf:citation
» Separation of concerns: Templates, Component | Takuya Kikuchi | Sciencx | https://www.scien.cx/2021/07/24/separation-of-concerns-templates-component/ | 2024-03-28T16:45:32+00:00
https://github.com/addpipe/simple-recorderjs-demo