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...)

@toraritte There's also a video about Primer on YouTube from jsconf, but I can't find it now :/

I think it's this one Makinde Adeagbo: Primer

@josuebrunel - That's the one! Thanks for the link.

I work at Meta and Primer is still in the codebase, but isn't in use in any new development. It's mostly only used on legacy pages that are rendered server-side with XHP and Hack (XHP being the precursor to BoltJS components, which were the precursor to React's JSX).

I kinda miss using it since it was so simple to get basic interactions working pretty well. All the new stuff is React and Relay, which are great for highly interactive apps, but the barrier to entry and amount of boilerplate to build a basic page is a lot higher compared to just server-rendering a chunk of HTML, especially in small internal tools that just show some data and aren't very interactive (and where the team building tool may consist entirely of backend engineers with limited frontend experience). React definitely has its place, but I do still really like the Primer / htmx model.