primer.js

!function() {
  var doc     = document,
      htm     = doc.documentElement,
      lct     = null,   // last click target                                              
      nearest = function(elm, tag) {
        while (elm && elm.nodeName != tag) {
          elm = elm.parentNode;
        }
        return elm;
  };

  // Listeners for our most common interations                                            
  htm.onclick = function(e) {
    e = e || window.event;
    lct = e.target || e.srcElement;

    var elem = nearest(lct, 'A') || htm,
        href = elem.getAttribute('ajaxify') || elem.href;

    switch (elem.rel) {
    case 'dialog':
    case 'dialog-post':
      Bootloader.loadComponents('dialog', function() {
        Dialog.bootstrap(href, null, elem.rel == 'dialog');
      });
      break;
    case 'async':
    case 'async-post':
      Bootloader.loadComponents('async', function() {
        AsyncRequest.bootstrap(href, elem);
      });
      break;
    default:
      return;
    }

    return false;
  };

  htm.onsubmit = function(e) {
    e = e || window.event;
    var elem = e.target || e.srcElement;

    if (!elem || elem.nodeName != 'FORM' || !elem.getAttribute('ajaxify')) {
      return;
    }

    Bootloader.loadComponents('dom-form', function() {
      bootstrap_form(elem, lct);
    });

    return false;
  };

  // Remove the no JS class, if it is here                                                
  htm.className = htm.className.replace('no_js', '');
}();

wow. Very elegant solution. Freakin' awesome!

Nowadays, this code still being a good solution?

I think load javascript dynamically is a key rule of performance optimization forever, it's never outdate.
The Web is absolutely a resource enhanced Web, more and more javascript and css could load in an single page as time past, and the usage of memory increased continuously. We can choose a point to reload the page one time, but before that point, partial refresh and load on demand is necessary.

🎖

You dropped this 👑

👑

👑

Not sure, but I think these are the corresponding slides to provide context for ignorant devs like me who got excited by the HTMX post but have not much clue what it's about:
https://www.slideshare.net/makinde/javascript-primer (archived, although it will be tough to reconstruct it from there...)