In house... (coupled)

mikemiles86.github.io/drupal8day-ajax/

https://www.lullabot.com/articles/understanding-javascript-behaviors-in-drupal​

Tips

$.extend(Drupal.theme, {
    vendorProjectPopup: function (title, city, url) {
      return '<div class="map-info-content">'
        + '<h4 class="info-title">' + title + '</h4>'
        + city + '<br/><br/>'
        + '<a href="' + url + '" class="btn-arrow arrow-left-right">' + Drupal.t('View project') + '</a>'
        + '</div>';
    },
    vendorProjectsMapContainer: function() {
      return '<section class="view-content-map">'
        + '<div id="map" style="width: 100%; height: 500px"></div>'
        + '</section>'
    }
  });

Tips

Drupal.behaviors.syfyGlobalHideMenu = {
  attach: function (context, settings) {
    $('.nav-flyout', context).once('remove-modals', function () {
      $(document).keyup(function (e) {
        if (e.keyCode == 27) {
          $('.nav-flyout', context).removeClass('js-flyout-active');
        }
      });
    });
  }
};

Tips

function loadResources(key, callback) {
    var mapApiBaseUrl = 'https://maps.googleapis.com/maps/api/js';
    $.getScript(mapApiBaseUrl + "?key="+ key +"&callback=" + callback, function() {});
    loadResources = function() {};
  }

Drupal.behaviors.vendor_projects_map = {
    attach: function (context, settings) {
      var mapElement = Drupal.theme('vendorProjectsMapContainer');

      setTimeout(function() {
        $("article .tile-image img").lazyload({
          effect : "fadeIn"
        });
      },100);

      $('.view-content-grid').once().before(mapElement);
      
      loadResources(
        drupalSettings.vendor_projects.mapKey,
        'Drupal.vendorProjectsMap.initMap'
      );
    }
    
  };

Front-end IoC 😉?

(headless)

REST / GraphQL

rest / graphql (+ views)

REST vs GraphQL

https://habrahabr.ru/post/335158/