Server communication

Maquette does not prescribe how you should communicate with the server, but there is one gotcha. You must tell the maquette projector to rerender the DOM when data arrives asynchronously.

Using XMLHttpRequest

First let me show you how this can be done when you use plain XMLHttpRequest

var result;
var load = function() {
  var xhr = new XMLHttpRequest();
  xhr.addEventListener('load', function() {
    // Data has arrived asynchronously
    // We must now instruct the projector to update the DOM on the next frame
    projector.scheduleRender();
    result = xhr.responseText.length + ' bytes';
  });
  xhr.open('GET', '/index.html');
  xhr.send();
};
function render() {
  return h('div', [
    h('button', {onclick:load}, ['Load']),
    h('p', [result])
  ]);
}
projector.append(domNode, render);

Using fetch

If you want to use the modern fetch API (Needs polyfilling for IE, Edge and Safari) you can use a function similar to the fetchText function below:

var result;
var fetchText = function(url) {
  return fetch('/index.html')
    .then(function(response) {
      return response.text();
    })
    .then(function(responseText) {
      projector.scheduleRender();
      return responseText;
    });
};
var load = function() {
  fetchText('/index.html')
    .then(function(responseText) {
    result = responseText.length + ' bytes';
  });
};
function render() {
  return h('div', [
    h('button', {onclick:load}, ['Load']),
    h('p', [result])
  ]);
}
projector.append(domNode, render);

Using a library

Most developers do not use XMLHttpRequest or fetch directly, but use some kind of library. Most libraries provide a hook which is invoked whenever a response arrives. You can use such a hook to call projector.scheduleRender(). I will show how this works with the lightweight promise-based axios library.

var result;
// This axios instance calls scheduleRender automatically when data arrives
var axiosInstance = axios.create({
  transformResponse: function(data) {
    projector.scheduleRender();
    return data;
  }
});
var load = function() {
  axiosInstance.get('/index.html').then(function(response) {
    result = response.data.length + ' bytes';
  });
};
function render() {
  return h('div', [
    h('button', {onclick:load}, ['Load']),
    h('p', [result])
  ]);
}
projector.append(domNode, render);

More information about scheduleRender can be found in the API documentation.