Se usó la API de Cloud Translation para traducir esta página.

Servicio HTML: recomendaciones

La creación de interfaces de usuario con el servicio HTML sigue muchos de los mismos patrones y prácticas que otros tipos de desarrollo web. Sin embargo, hay algunos aspectos que son exclusivos del entorno de Apps Script o que, de otro modo, vale la pena destacar. A continuación, veremos algunas prácticas recomendadas que debes tener en cuenta cuando desarrolles tus propias IU de servicios HTML.

Separa HTML, CSS y JavaScript

Mantener todo el código HTML, CSS y JavaScript en un archivo puede dificultar la lectura y el desarrollo de tu proyecto. Si bien Apps Script requiere que el código del cliente se coloque en archivos .html, puedes separar tu CSS y JavaScript del cliente en diferentes archivos y, luego, incluirlos en la página HTML principal con una función personalizada.

En el siguiente ejemplo, se define una función include() personalizada del servidor en el archivo Code.gs para importar el contenido de los archivos Stylesheet.html y JavaScript.html al archivo Page.html. Cuando se la llama con secuencias de comandos de impresión, esta función importa el contenido del archivo especificado al archivo actual. Ten en cuenta que los archivos incluidos contienen etiquetas <style> y <script> porque son fragmentos de HTML y no archivos .css o .js puros.

Code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

Stylesheet.html

<style>
p {
  color: green;
}
</style>

JavaScript.html

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

Carga datos de forma asíncrona, no en plantillas

El HTML con plantillas se puede usar para compilar interfaces simples con rapidez, pero su uso debe limitarse para garantizar que la IU sea responsiva. El código de las plantillas se ejecuta una vez cuando se carga la página y no se envía contenido al cliente hasta que se completa el procesamiento. Tener tareas de larga duración en el código de tu secuencia de comandos puede hacer que la IU parezca lenta.

Usa etiquetas de secuencia de comandos para tareas rápidas y únicas, como incluir otro contenido o establecer valores estáticos. Todos los demás datos se deben cargar con llamadas google.script.run. La programación de esta manera asíncrona es más difícil, pero permite que la IU se cargue más rápido y le brinda la oportunidad de presentarle al usuario un ícono giratorio o algún otro mensaje de carga.

No: Carga en plantillas.

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Hacer: Carga de forma asíncrona

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

Carga recursos con HTTPS

Si tu página se publica con el modo de zona de pruebas IFRAME más reciente, incluir archivos JavaScript o CSS que no se publiquen con HTTPS generará errores como el siguiente.

Contenido mixto: La página "https://..." se cargó a través de HTTPS, pero solicitó una secuencia de comandos no segura "http://...". Se bloqueó esta solicitud. El contenido se debe entregar a través de HTTPS.

La mayoría de las bibliotecas populares admiten HTTP y HTTPS, por lo que cambiar de uno a otro suele ser solo cuestión de insertar una "s" adicional en la URL.

Usa la declaración de tipo de documento HTML5

Si tu página se entrega con el modo de zona de pruebas IFRAME más reciente, asegúrate de incluir el siguiente fragmento de código en la parte superior de tu archivo HTML.

<!DOCTYPE html>

Estas declaraciones de tipo de documento le indican al navegador que diseñaste la página para navegadores modernos y que no debe renderizarla con el modo no estándar. Incluso si no planeas aprovechar los elementos HTML5 modernos o las APIs de JavaScript, esto te ayudará a garantizar que tu página se muestre correctamente.

Carga JavaScript al final

Muchos desarrolladores web recomiendan cargar el código JavaScript en la parte inferior de la página para aumentar la capacidad de respuesta, y esto es aún más importante con el servicio HTML. Si mueves tus etiquetas <script> al final de la página, el contenido HTML se renderizará antes de que se procese el código JavaScript, lo que te permitirá presentarle al usuario un ícono giratorio o algún otro mensaje.

Aprovecha jQuery

jQuery es una biblioteca popular de JavaScript que simplifica muchas tareas comunes en el desarrollo web.