How to write javascript/html code quickly

If we mix the javascript code into html file as below:

<ul>
  <% for(var key in service.get('Detail')){ %>
    <% if(key!='creditcard_number){ %>
      <li>
        <label for='<%= key %>'><%= key %></label>
          <div id='<%=key %>'><%= service.get('Details')[key] %></div>
        </li>
    <% }%>
<% } %>
</ul>

Then it's hard to write/debug/fix the javascript code because:

1. html code becomes noise for javascript development.
2. The syntax checker for javascript will not work properly.

If we mix the html code into javascript file as below:

for(var key in service.get('Detail')){
  if(key!='creditcard_number'){
    htmlRender(formatString("<li><label for='%s'>%s</label><div id='%s'>%s</div>",key,key,service.get('Details')[key]));
  }
}

Now html code becomes hard to write/debug/fix because:

1. javascript code becomes noise for html development.
2. The syntax checker for html will not work properly.

In summary, mixing code in different language syntax will:

1. make code hard to read
2. make syntax checker dysfunctional

These are the top two causes why we can not code fast in real application.

So here is our objective:

1. We need put the business logic into javascript file. The logic usually contains "for/while/if" statements.
2. Html tags like "<div>/<span>/<ul>/<li>" need be placed in html file.

The solution is actually simple. We just need apply a little bit of functional programming skill.

So here is our html file in functional programming style:

<% forEachAttributeInService(service,function(service,key) { %>
   <li>
     <label for='<%= key %>'><%= key %></label>
     <div id='<%=key %>'><%= formatServiceAttributes(service,key) %></div>
   </li>
<%  }); %>

Here is the javascript file:

function forEachAttributeInService(service,fn) {
  for(var key in service.get('Detail')){
    if(key!='creditcard_number'){
      fn(service,key)
    }
  }
}
function formatServiceAttributes(service,key) {
  return service.get('Details')[key];
}

Now let's check what happens.

In the html file, the business logic is converted into combination of functional calls.

In javascript file, all the code dealing with hard coded html tags are converted to the call of anonymous functions. Those anonymous function is basically dump of html tags which is defined in html file.

You can use this technique to convert any existing code into new style. For example, a simple "if else" statement could be re-written in new style:

/ code in old style /
if (true){
  console.log('<li>YES</li>');
} else {
  console.log('<li>NO</li>');
}
/ code in new style /
function func_if_else(f1,f2,f3){
  if(f1()){
    f2();
  } else {
    f3();
  }
}
/ the execution of func_if_else() /
func_if_else(function(){ return true },
           function(){
             console.log('<li>YES</li>');
           },
           function(){
             console.log('<li>NO</li>');
           });

This is a kind of radical example. I'm only demonstrating the power of new style. I'm not suggesting you should convert any logic statement into function call. New style is not a silver bullet. It's only a useful if used properly in right timing.