Consider you wanting to implement a simple game of checkers. There would be a rectangular game board and the player would able to move the pieces around according to a particular set of rules.

General good design principles suggest that we decouple the display of the game from it’s data and logic.

That is, the display of the game board and the ability to click and move stuff around would be decoupled from the actual representation of a game board in memory. The data in memory doesn’t know what displays it.

Now, let’s talk about JavaScript specifically. JavaScript is a language designed mainly to be used as a lightweight client-side language. (I know, JS has grown far beyond it’s original intended usage, but it is still generally regarded and used as what I described). All JavaScript does on the client side is manipulate Html and Css.

This means that, by it’s nature, JavaScript is very coupled to the Html and Css; the GUI. That is it’s nature.

So my question is: when designing a client-side JavaScript app, how loosely coupled should I make the business logic and data, and the user interface?

Should I make an effort to entirely separate the display and the logic, as I would have done in a e.g. a C# app? Or is it acceptable in JavaScript to allow a certain amount of coupling between logic and display?