Save Ukraine

Classic Forum 4.0: Why the heck embed JS?! Or: why web development is at an impasse at the moment

Christian Kruse,

Lately there were some discussions on the IRC claiming that HTML templates with embedded JS as a template language is very ugly, especially with the <?js ?> syntax. Well, maybe. But besides my latest thoughts about perfectionism there is a very good reason why I'm planning to do so. To explain this, I must go back a bit.

In the „pre web2.0 era” web applications were simple. You delivered HTML, you got data from the user, you answered the request. That's it. Of course I simplified things a little bit, but basically that's all what web applications did.

Today it is much more complicated. We try to avoid page reloads since they disturb users, we use techniques like AJAX to load data from the server into existing pages without reloads. We validate user input on client side, etc, pp. Have a look on applications like GMail, Facebook, the new 9elements website and many more.

But there is a problem with it: basically you have to write the application twice. Once server side, the „traditional way” and once on in JS browser-side. Slowly other people notice it, too. Web applications geht bigger and bigger, and it's more and more work to do this.

There are two obvious solutions for this problem: either drop the traditional server-side way or drop the AJAX approach. Both are problematic. If you drop the traditional way, there are problems with search engines, with users not able to use JS, etc, pp. If you drop the AJAX approach, there will be no innovation, no new amazing web applications, etc, pp. There has to be a different way to solve this.

My attempt to solve this dilemma for the Classic Forum is as follows: embed a language which can be executed on the client side. That's the cause why I use JS templates: they will get transformed to a JS function and they generate a HTML string with it. Have a look at the following example:

<html>
<head>
<title><?js _e("test document") ?></title>
</head>
<body>
</body>
</html>

This template will get compiled completely to JS, e.g. as follows:

function() {
_e("<html>\n <head>\n  <title>");
_e("test document");
_e("</title>\n </head>\n <body>\n </body>\n</html>");
}

This way we could use the same templates server side and client side. I just have to load the JS to the browser and execute it to get the HTML. This is a huge step towards DRY, the more complex the templates get the more work you save. I planned a similar approach for the logic of the application, but I'm not really sure now how it would look like technically. I will blog about this when I have more code to show.