Características útiles del sistema de Javascript de Drupal

Drupal tiene un sistema de Javascript muy útil que permite a los desarrolladores de back end comunicarse efectivamente con el front end. El sistema realmente nos permite olvidarnos de toda clase de código auxiliar que se usaría para pasar datos de un lugar a otro, especialmente si la aplicación que se está construyendo hace uso fuertemente de AJAX. De este sistema, hay características que considero las más útiles. ### Ajustes de Javascript La primera característica del sistema de Javascript de Drupal que me parece extremadamente útil es la habilidad de Drupal para pasar variables dinámicas desde el backend al front end para que cualquier script en el front end las pueda usar. Con una línea de código se puede hacer esto.

drupal_add_js(array('ajax_example' => array('some_setting' => 'value')), 'setting');

La llave ‘ajax_example’ se refiere al namespace donde serán encapsuladas las variables. Esto evita colisiones. La llave ‘some_setting’ será el nombre de la variable en el lado del front end. El último setting le dice a Drupal que lo que quieres agregar al Javascript son variables y ajustes. Es necesario marcar esto ya que con esta misma función también se pueden pasar scripts enteros al front end. Supongamos que necesitamos crear algunas gráficas que representen estadísticas de uso de una aplicación web. Para tal propósito, decidimos usar una librería para generar gráficos escrita en Javascript. ¿Cómo pasaríamos los datos de uso para que Javascript pudiera utilizarlos para generar las gráficas? Podríamos hacer algunos endpoints que pudieran ser llamados por las librerías para obtener los datos en formato JSON o XML pero esto es fácil usando el sistema de Javascript de Drupal. Sería cuestión de generar o leer la data cuando se crea la página, se llama a drupal_add_js y listo, problema resuelto. Todo en una línea de código. ### Comandos de AJAX Los comandos de AJAX de Drupal permite a los desarrolladores de back end llamar funciones en Javascript en el front end, añadir HTML, esconder HTML y un número de otras cosas que querrían hacer en el front end. Es más, los ajustes de Javascript mencionados enteriormente se pasan al front end vía comandos de AJAX.

function ajax_example_some_ajax_callback($form, &$form_state) {
  // Código para preparar otras variables.
  
  // Preparar los comandos de AJAX que vamos a enviar al front end.
  $commands = array();
  $commands[] = ajax_command_html('.container', $some_new_html); // Insertar HTML dentro de un contenedor.
  $commands[] = ajax_command_replace('.to-be-replaced', $replacement_html); // Reemplazar HTML con otro HTML.
  $commands[] = ajax_command_remove('.elements-to-remove'); // Remover un elemento.
  $commands[] = ajax_command_invoke(NULL, 'someJSFunction'); // Correr una función en el lado del Javascript.

  // Mandar el listado de comandos que se deben ejecutar en el front end.
  return array(
    '#type' => 'ajax',
    '#commands' => $commands
  );
}

Como ven, podemos mandar cualquier cantidad de comandos al front end para que se ejecuten allá usando estos simples comandos. Estos comandos hacen uso de jQuery para hacer el trabajo pesado, por ende, ahorran una cantidad importante de tiempo de desarrollo. ### Form API: #ajax El Form API de Drupal utiliza una propiedad llamada ‘#ajax’ que se puede utilizar en cualquier elemento del formulario para asignarle la habilidad de ser manejado por medio de llamadas de tipo AJAX.

function ajax_example_graphs_form($form, &$form_state,) {
  // Código de formulario va aquí...
  
  // Decirle a Drupal que el botón debe ser manejado vía una llamada de tipo AJAX.
  $form['some_button'] = array(
    '#type' => 'button',  // El elemento es un botón
    '#value' => t('Show Graphs'),  // El texto del botón.
    '#ajax' => array(
      'call_back' => 'ajax_example_graphs_form_show_graphs_callback', // El nombre de la función que va ser llamada al momento de retornar datos al browser.
      'wrapper' => 'graph-container', // El resultado de la llamada de tipo AJAX reemplazará al contenedor con id graph-container.
    ),
  );
}

Como pueden ver, con una simple propiedad ‘#ajax’, pudimos decirle a Drupal muchas cosas. Le dijimos que el botón ‘Show Graph’ debe ser manejado vía AJAX, que la función que manejará la lógica de generar los datos a desplegar será ‘ajax_example_graphs_form_show_graphs_callback’ y que el resultado deberá reemplazar el contenedor con el id ‘graph-container’. Esto ahorra bastante tiempo y esfuerzo de desarrollo de código auxiliar. ### La Perspectiva de Negocios El sistema de Javascript de Drupal facilita la labor de los desarrolladores. Esto, generalmente, se traduce en ganancias de productividad importantes ya que los ciclos cerebrales se usarán para solucionar problemas del negocio mismo y no en crear o modificar código auxiliar innecesario.