Running many Maquette Projectors on a Page

Question

Some Background

I work with a front end component based UI framework that manages its UI completely via jQuery. At the time it was initially created, this didn't sound so crazy and jQuery was the stable logical choice for making interactive web componentry. However, these days manually keeping track of every variable and every change of data, then reflecting that in the DOM, is no longer the only feasible option. And as the framework has grown, so has the the burden to maintain consistent code style as well as code efficiency.

I've been checking out Maquette.js recently, and it looks like it might be just the framework to help solve these challenges and more.

The Question

I'm aware of using this technique to integrate Maquette with other libraries. However, my framework is large, many people depend upon it, and it is not feasible to convert all of our rendering to Maquette. At least not in one fell swoop. Because of this, if I do use Maquette I foresee myself being forced to use new projector for every instance of a component. This is what I am concerned about.

Does having a large number of projectors present on the page negatively affect performance when compared to using a single projector to render everything? In other words, how desirable, in terms of performance, is it to minimize the number of projectors on a page?

If code is helpful, I've modified the simple example from Maquette's homepage to illustrate the point. 1000 projectors all running at once. It seems fine, but it feels like I'm doing something the Maquette wasn't designed to do.

document.addEventListener('DOMContentLoaded', function () {
  var h = maquette.h;
  var domNode = document.body;
  var yourName = ''; // Piece of data
  var numbers = [];

  // Load up our array
  for(var i = 0; i < 1000; i++){ numbers.push(i); };

  numbers.forEach(function(){
     var projector = maquette.createProjector();
    // Plain event handler
    function handleNameInput(evt) {
      yourName = evt.target.value;
    }

    // This function uses the 'hyperscript' notation to create the virtual DOM. 
    function renderMaquette() {
      return h('div', [
        h('input', { 
          type: 'text', placeholder: 'What is your name?', 
          value: yourName, oninput: handleNameInput 
        }),
        h('p.output', ['Hello ' + (yourName || 'you') + '!'])
      ]);
    }

    projector.append(domNode, renderMaquette);

    });
});

Answer 1

Good question. Projectors are lightweight and they are passive. I only forsee some performance penalty if you call scheduleRender on all 1000 projectors at the same time. This would mean that every projector calls requestAnimationFrame. If you only call scheduleRender on a few projectors at the same time, the overhead should be minimal.