Attribute-Centric Programming

attributes_in_dev_tools.jpg
That's what I call it at least. Perhaps there is another name for it that I am not aware of.

Attribute-Centric Programming is a style of coding which makes use of two very important facts: most scripting on a page reuses functions, only changing arguments passed to them; and data-* attributes allow valid markup while still allowing custom attributes which can be retrieved by JavaScript, in addition to standard attributes such as href.

A simple example of where this could be achieved is AJAX form submission, as all of the information necessary for an XMLHttpRequest is contained within the form itself. You simply have to map the attributes of the form to the arguments of the request. True, you could instead use inline JavaScript using onsubmit="someAjaxCall", but that is inefficient because it requires a lot of repeated code, and also has the issue of mixing content and scripting (inline JavaScript should be avoided where possible).
  • The form's method is used as the first argument of xhr.send()
  • The form's method is used as the second argument of xhr.send()
  • The various inputs of the form can be obtained via FormData()
Links can be done in a very similar way using the href attribute, making it easier to have a website that has complete AJAX navigation (though you will have to find a way of determining if links are internal or external/pointing to another website). For anything else, you can be creative with data-* attributes and determine how to handle those... It's up to you.

Also, not all AJAX requests need to be used for navigation. You could like for the list attribute on inputs and load the datalist that it would use, when supported.

Combined with Mutation Observers and addEventListener(), you can have completely automatic AJAX submission of forms. Use Mutation Observers to look for newly added Elements or changed attributes and attach listeners where appropriate, thus allowing for you to maintain a page that almost magically knows what to do with user interaction, even as content on it changes through a series of AJAX requests and responses.

Handling responses from your server is another matter and a separate topic, but you could come up with some clever uses for json_encode() on the server side and JSON.parse() on the client side to allow a whole lot of possibilities in a server controlling a page (See my json_response class as well as my handleJSON function on GitHub for how I get PHP and JavaScript to interact). You could also use Promises in creating your AJAX function and have it pass along the response, making it so that you can reuse that single AJAX function for everything and chain together the AJAX function with the code to handle the response.

After all, the goal of programming is to avoid repeating yourself, so why should you write multiple variations of the same functions when you could instead just use standard or custom attributes and reuse the same code again and again? If you are very clever, you can write very dynamic and interactive websites without ever having to write any JavaScript other than what you already have because you change the behavior of your website through you HTML rather than requiring specific handlers in your JavaScript. Also, it makes modifying your existing work a lot easier!