I work with pedagogies, teach, write curricula, coach, manage, mentor, consult, speak publicly, polemicize, and sometimes work as a full-stack web developer, architect, ontologist, and more.
Don't know how I missed this four years ago, but better late than never.
This is an excellent article.
It's not really about "separation of concerns". We can choose whatever "concerns" we want and split the code in different ways. Whether that makes sense or not depends on the circumstance. The arguments around SoC are like arguing how many angels can dance on the head of a pin. Who cares?
What is important is performance. The ability of the devs to understand the code and write it quickly with few or no bugs and little tech debt. The ability of the user to understand the interface quickly and get things done. The ability of the company to make the product profitable.
And the key to all three of these — assuming that you're making the right product for the right people with the right features — is cognitive footprint.
Cognitive footprint is simply the cognitive load over the lifetime of the product. The code has a cognitive footprint. The interface has one, too.
The argument for separating the HTML, CSS, and JS is that doing so greatly reduces cognitive load. If we work with a component architecture and we keep components small and simple (but composable), then we're never dealing with more than a few lines of code at a time.
Throw in good naming and a few design principles (such as grouping like things, proper use of whitespace including indentation, etc.), and the code becomes as easy to read as a nursery rhyme.
You can put all your code — HTML, CSS, and JS — in a single file if that works for you. But using a programming language to generate all your HTML and CSS just makes it very difficult to grok what's happening. This, BTW, is the great feature of JSX: it looks like the HTML it produces.
I don't believe that this argument is a matter of opinion or preference. Cognitive load is measurable. We should be able to measure which approach results in the least load, hence effort.
My money is on keeping HTML, CSS, and JS/TS separate.
Don't know how I missed this four years ago, but better late than never.
This is an excellent article.
It's not really about "separation of concerns". We can choose whatever "concerns" we want and split the code in different ways. Whether that makes sense or not depends on the circumstance. The arguments around SoC are like arguing how many angels can dance on the head of a pin. Who cares?
What is important is performance. The ability of the devs to understand the code and write it quickly with few or no bugs and little tech debt. The ability of the user to understand the interface quickly and get things done. The ability of the company to make the product profitable.
And the key to all three of these — assuming that you're making the right product for the right people with the right features — is cognitive footprint.
Cognitive footprint is simply the cognitive load over the lifetime of the product. The code has a cognitive footprint. The interface has one, too.
The argument for separating the HTML, CSS, and JS is that doing so greatly reduces cognitive load. If we work with a component architecture and we keep components small and simple (but composable), then we're never dealing with more than a few lines of code at a time.
Throw in good naming and a few design principles (such as grouping like things, proper use of whitespace including indentation, etc.), and the code becomes as easy to read as a nursery rhyme.
You can put all your code — HTML, CSS, and JS — in a single file if that works for you. But using a programming language to generate all your HTML and CSS just makes it very difficult to grok what's happening. This, BTW, is the great feature of JSX: it looks like the HTML it produces.
I don't believe that this argument is a matter of opinion or preference. Cognitive load is measurable. We should be able to measure which approach results in the least load, hence effort.
My money is on keeping HTML, CSS, and JS/TS separate.
I talk about this quite a bit on the Craft Code site.