Javascript para programadores impacientes

JavaScript for impatient programmers — a pesar del título, explica con harto detalle incluso los aspectos más básicos del lenguaje.

Está actualizado hasta ES 2019 por lo que es especialmente útil para refrescar cosas de sintaxis y nuevas funcionalidades que se han ido incorporando al lenguaje.

El libro está prácticamente entero, sólo hay un par de capítulos bonus que son de pago.

Getting response headers data from an AJAX request with javascript

Response headers can contain valuable information and may help to keep your API responses simpler by separating the actual response data from accessory metadata.

For instance, when querying the WordPress JSON API for a list of posts, the response body includes just the posts data but the pagination info it’s sent as headers:

HTTP/1.1 200 OK
Access-Control-Allow-Headers: Authorization
Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages
X-WP-Total: 7
X-WP-TotalPages: 2

Whether you’re using jQuery or just plain Javascript, it’s quite simple to get response headers.

Using jQuery

I’ll keep using the same case of getting a list of posts from the WordPress API.

The jQuery code for the AJAX request would look something like this:

var posts = $.ajax({
  type: 'GET'
  url: '/wp-json/wp/v2/posts/',
  data: {
    'per_page': 10
  }
});

In jQuery, an AJAX request returns a promise, so after that we could do something like:

posts.done( function( data, textStatus, jqXHR ){
  var receiver = $('#posts-receiver');
  for ( var i in data ){
    receiver.append( data.title.rendered +':'+ data.link );
  }
  var current_page = parseInt( receiver.data('paged'), 10 ),
      total_pages  = parseInt( jqXHR.getResponseHeader('X-WP-TotalPages'), 10 );
  if ( curent_page == total_pages ) {
    $('button#load-more-posts').attr('disabled', 'disabled');
  }
} );

The jqXHR object it’s a superset of the native XMLHttpRequest object. It exposes a jqXHR.getResponseHeader() method for getting a single response header (which it’s always returned as a string) and jqXHR.getAllResponseHeaders() for getting all of them as a single string.

Using plain javascript

The same getResponseHeader method is available in plain javascript as part of the XMLHttpRequest object; the only thing that changes it’s the way you create and initiate the request:

var request = new XMLHttpRequest;
request.open('GET', '/wp-json/wp/v2/posts', true);
request.onload = function(){
  // do some stuff
  var total_pages = parseInt( request.getResponseHeader('X-WP-TotalPages), 10 );
};
request.send();

Optimización AJAX 3: caché volátil

Poder guardar respuestas en caché nos puede evitar tener que realizar nuevas peticiones a consultas para las cuales ya hemos obtenido los resultados anteriormente.

Por supuesto, no siempre vamos a querer guardar estos resultados: en casos donde es muy probable que la información sea muy dinámica y lo más importante es contar con la información actualizada al segundo lo correcto sería justamente lo contrario, invalidar la caché de modo de siempre contar con datos reales.

Hay básicamente dos puntos donde podemos controlar el almacenamiento en caché de las respuestas AJAX: al momento de realizar la petición o bien al generar y enviar la respuesta. En el primer caso, el control estará de parte del cliente; mientras que en el segundo por la respuesta generada por la aplicación.

Caché volátil

Por caché volátil me voy a referir fundamentalmente al que podemos controlar desde el cliente, y que por lo general está acotado a la duración de la sesión, es decir, dura mientras el documento permanezca abierto — con dos excepciones que mencionaré más adelante.

Continue reading “Optimización AJAX 3: caché volátil”

Optimización AJAX 1: elección del método HTTP

Si bien las interacciones en AJAX nos permiten obtener información de forma dinámica desde el servidor de un sitio web o aplicación, existen varias formas de aumentar la velocidad de estas respuestas para mejorar la experiencia de nuestros usuarios al cargar información bajo demanda, obtener datos de búsquedas u otras interacciones.

Más allá de la parafernalia tecnológica que supone la implementación de una respuesta AJAX (por supuesto, reducida al mínimo con el uso de un framework adecuado), ésta sigue siendo una respuesta HTTP, por lo que se pueden aplicar los mismos principios para mejorar su performance.

En éste y los siguientes posts intentaré revisar la teoría y práctica de las técnicas fundamentales para mejorar la performance de respuestas AJAX y la experiencia de tus usuarios.

Continue reading “Optimización AJAX 1: elección del método HTTP”

Usar moment.js como helper en Ember/Handlebars

moment.js es una librería completísima para trabajar con fechas en Javascript, que puedes registrar como helper para Ember de modo de facilitar todas la tarea de parsear y formatear fechas desde y hacia distintos formatos.

Ember.Handlebars.registerBoundHelper('fecha', function(stringFecha, options){
  // options.hash es un objeto con las opciones
  var args = Ember.$.extend({
    inputFormat: 'M/D/YYYY',
    outputFormat:  'D MMM YYYY'
  }, options.hash );
  var fecha = moment(stringFecha, args.inputFormat);
  return fecha.format( args.outputFormat );
});
  • El método Ember.Handelbars.registerBoundHelper() te permite registrar un helper para propiedades que están ligadas al modelo, de modo que si éste cambia se vuelven a calcular.
  • La función que registra el helper recibe dos argumentos: el valor sobre el cual actúa el helper y un objeto de opciones.
  • El uso de Ember.$.extend() permite definir parámetros variables y opcionales e indicar sus valores predeterminados.

Uso:

// de forma normal, la propiedad post_published va a estar ligada al modelo
{{fecha post_published outputFormat="YYYY/MM/DD"}}

// también puedes usarlo de esta forma para que no cambie al cambiar los datos
{{unbound fecha post_published}}

Automatizar tareas de traducción de WordPress con Grunt

Grunt es una de esas herramientas que al principio parece un poco intimidante, pero al empezar a utilizarla se hace cada vez más necesaria y adictiva.

Por si aún no lo conoces, Grunt es un programita hecho en javascript sobre node.js que permite automatizar una gran cantidad de tareas, y sirve especialmente para poner a punto la versión en producción de un sitio; por ejemplo: optimizar imágenes, compilar estilos desde LESS a CSS (o Coffeescript a javascript), ejecutar pruebas unitarias, minificar y concatenar estilos y scripts, etc.

Hace algunos posts escribí sobre algunas herramientas de localización para WordPress que ayudan a generar el catálogo de traducciones POT necesario para hacer un tema o plugin traducible a otros idiomas, y que es un excelente ejemplo de tareas en las que Grunt se luce.

Afortunadamente bradyvercher adaptó esas herramientas para trabajar como módulos de Grunt, por lo que podemos utilizar las mismas herramientas de localización “oficiales” de WordPress de forma automática con Grunt.

Continue reading “Automatizar tareas de traducción de WordPress con Grunt”