Unobtrusive HTML

Long, long time ago, I can still remember it. We had HTML without JavaScript. Slowly but steadily we started to include JavaScript into our HTML. At a certain moment, we noticed that a page with a lot embedded JavaScript was difficult to maintain. We apparently all decided it was time for a change. And with that we separated the JavaScript from the HTML. Hurray! We now had unobtrusive JavaScript. This meant that we first created the working and proper HTML and after we were done, we added some JavaScript goodness to the page. All good and well!

Nah, not all. We were all struggling with the different JavaScript engines and their intrinsic details. So along came jQuery. jQuery allowed us to use a single codebase for all browsers which is awesome. At the same time I started to notice something else. People started to write jQuery plug-ins and a lot of these plug-ins output HTML. And at that moment I started wondering. We moved from embedded JavaScript, which was bad, to embedded HTML. Not alone we were back to where we started, but now we lost all intellisense, tag completion, and refactoring as we edited the HTML inside JavaScript strings. With JavaScript inside HTML script tags, like we had before, we at least had some intellisense. So some people noticed that rendering HTML inside JavaScript, mostly used for some kind of databinding, is bad. And luckily for us, AngularJS version 1 came along.

AngularJS version 1 allowed us to write a controller in JavaScript, a view with binding tags in HTML, and fetch our data from a RESTful API. We now had a real MVC framework! All loosely coupled. We could in effect create several HTML files targeted to different outputs and reuse the controllers. No need to change a single line of code. Awesome! And then AngularJS version 2 was announced.

Angular JS version 2 is supposed to be faster and much better than version 1. Everybody is hyping it. But, when I looked at the code samples, I noticed that they are defining HTML views in class decorators. We are back at writing HTML in JavaScript string properties again and by using decorators we have no way to do dependency injection to define a viewengine, which in turn could select the proper view for the device being used. It almost feels like they are implementing ASP.Net Web Forms user controls in a complex client side way. If you do so, at least implement the composite pattern.

We are running past our goal and are circling right back to where we started again. Only difference is that we now have to find a way to embed unobtrusive HTML inside our JavaScript. With that we might get our intellisense, tag completion and refactoring back.

I honestly don’t understand why we keep running in circles. Anybody?