Mixing JavaScript and server-side scripting

Question

I see code like this sometimes (mixed PHP and JS in this case, but could be any server-side language):

<script>
  var data = <?php echo $bigDataStructure ?>;
  // then lots more pure js with no php mixed in which can access the data variable
</script>

Which seems like an appropriate way to pass data from a server-side scripting language to the JS that will run on the client (ignoring the fact that a global var named data is itself an eye-watering notion).

But I also sometimes see code like this (mixed JS and ColdFusion in this case):

<script>
  if ($('#firstName').val() === <cfoutput>#query.firstName != "" ? query.firstName : query.nickName#</cfoutput>) {
    <cfif userHasPermission>
      $('#userForm').validate();
    <cfelse>
      $('#readOnlyNotice').show();
      disableForm();
      <cfif settings.auditEnabled>
        recordAccessAjax();
      </cfif>
    </cfif>
  }
</script>

where the actual final version of the JS logic is dynamic. This, to me, feels like we're nearing the bog of eternal stench. Red flags galore. I could see (and have seen) this willy-nilly mixing get out of hand and create maintenance issues and debugging headaches.

What I'm wondering is whether there's a specific design pattern this violates? Or are there specific arguments that could be made against such dynamic code that I could present as reasons for moving away from the practice?

Note: another question asks whether it's a bad practice. Here, I assume that it is a bad practice and am looking for specific reasons why. The answers on the other question mainly focused on answering "is it bad?" and added suggestions of other ways to code the OP's example.

Answer 1

The question here is "why" is this a bad practice.

The number one reason is the empirical observation over many years that it leads to software that is difficult to understand, maintain and change. These systems are colloquially call big balls of mud.

As a result of these experiences, a number of principles were developed to ensure that it is avoided.

• Separation of concerns
• Single responsibility principle
• Software Encapsulation
• Loose coupling

Answer 2

This is a problem that I never fully understood until I began working with the C# MVC framework. It's not necessarily "bad practice" but using the MVC model making programming much easier, not only to read but to write.

Read more about the MVC framework with PHP here.