Separation of concerns in HTML/CSS/JS

I probably get in the most trouble when I fight with the front end. When I work with it in the way it is designed to work, I am a happier man.

But with so many approaches, libraries, methodologies and frameworks, is it becoming more and more challenging to see the front end for what it is?

One exercise that I put myself through from time to time, when the waters seem muddied and confusion reigns supreme, is to imagine that the front end is all we have. I imagine that all the server side work has disappeared, and that the entire world of web development lives in my browser.

In this world, I imagine that all the data I have, all of it, is modeled in the markup of the page. I imagine that the view into this data is fully accommodated by the default styling of the browser, minimally modified by the user style sheet. I imagine that the controller is fully expressed by native element behaviors, minimally enhanced by JavaScript.

I'm afraid this mindset seems overly simple in light of the world of single page apps that we supposedly live in, but this mindset shocks me back to a very basic and fundamental attitude about where front end has been and how to stay true to that. Then I can jump back into the present with a better outlook.

How can we practically apply, and benefit from this outlook?.