extend html

By

Extending HTML means to implement new behavior of existing elements in HTML. There are a number of default behaviors. Like a click on a link open the page defined by the href attribute. A select is able to get changed by the user. A form is able to submit data. And so on. With extending HTML you define new behaviors and rules when they get applied. Once the extension is defined a developer can create elements of a certain type to get the new behavior applied. This will help to reduce code, compared to specifying the making for making an pageLoad stript, that will find the button, apply the custom behavior and has a section for each of the elements on the page with some special requirements. This is useful, if you have a website, that delivers page by page from the server, as it is done my most PHP sides and using systems like wordpress, drupal and in most cases synfony and zend. I will discuss in a future post about the advantages and disadvantages of such systems over single-page applications. Second improvement by building HTML extensions is the separation of concerns you are defining the behavior on one place and the compositions and style of those components is defined in other places, like templates.

I heard about HTML-extensions while a javascript meetup at The NetCircle in Shanghai. There was a talk given by Billy Shen. In his presentation he spoke about his implementation using Promises and jQuery. But in the following I want to show an approach, that I would prefer to implement html-syntax-extensions using jQuery in a small example. The following example will allow to define a button that when clicked to load data from a given url, to get displayed on some other element, given by a selector, but only if the user allow that.

1
2
3
4
5
6
7
8
9
10
11
12
13
// get some event on a certain type of element. in this case buttons with the class of loadJSON.
$(document).on("click", "button.loadJSON", function (e) {
    // when there was a click on a button that has the loadJSON class
    // read parameter from the attributes and validate them, before doing the logic.
    var message = e.target.getAttribute('data-message') || 'should we do it?';
    var url = e.target.getAttribute('data-url');
    var destiny = e.target.getAttribute('data-destiny')
    if(url && destiny && confirm(message)) {
        $.get(url, function(data) {
           $(destiny).text(data);
        });
    }
});

As you can see, the click-Event is registered on the document. That means every click is going to be evaluated with the selector “button.loadJSON”. This approach is good. to add some behaviors to an existing Website. I think this might be ok as link as you don’t have more then a hundred extensions. But for a single-page application where basically very element can show some specific and unique functionality. You should go and bind the events direct on those elements when you create them. Or let that handle by some framework, like Backbone.js, React, Angular, Ember,…

In conclusion, extending HTML is just giving you a new perspective, how you can implement simple components. So, Can you be a great software developer Javascript UI developer without extending the HTML-syntax? Yes. Do you need that to implement apps? no. Is it interesting, and could probably save some time? Yes.

Contents