Drupal 8 y Javascript

Alfredo Bonilla
@brolag

 

 

Alfredo Bonilla

Desarrollador Drupal

@brolag

Agenda

  • Novedades en Drupal 8
  • Javascript API en el core de Drupal.
  • ¿Cómo añadir código JS a nuestros módulos o temas?
  • Headless Drupal
  • Buenas prácticas

Drupal 8 y Javascript 

  • use strict. 
  • JSHint.
  • Backbone.
  • Underscore.
  • Otras librerías.

Use strict

"use strict";
  1. ​Atrapa algunos errores comunes y levanta excepciones.
  2. Previene y levanta errores cuando se realizan acciones inseguras como el acceso al objeto global.
  3. Desactiva caraterísticas confusas o no convenientes del lenguaje.
  1. ​Es una herramienta que permite analizar la calidad de nuestro código.

JSHint

Backbone

Framework para la creación de aplicaciones MVC. 

En el core de Drupal se utilizó para reescribir grandes componentes de una mejor manera y aprovechando el data binding.

  • Toobar
  • Contextual
  • CKeditor
  • Edit

Underscore

Underscore.js es una librería que ofrece un gran número de funciones (más de 80) realmente interesantes, en tan solo 4Kb.

 

Es capaz de resolver muchas necesidades de "bajo nivel" como manejo de arreglos, objetos, colecciones y templates que Javascript no maneja nativamente (al menos no para todos los navegadores) evitándonos perder el tiempo. 

 

Otras librerías

  • jQuery 2
  • jQuery UI
  • domReady
  • Modernizr
  • html5shiv
  • classList
  • PictureFill

 

Javascript API

Objeto global Drupal

  • Drupal Behaviors
  • Drupal theme
  • función t()

Otras API

  • Drupal.announce
  • Drupal.debounce
  • Drupal.tabbingManager
  • Drupal.displace

 

 

Drupal Behavior

    Drupal.behaviors.behaviorName = {
      attach: function (context, settings) {
        ...
      },
      detach: function (context, settings, trigger) {
        ...
      }
    };

Drupal.theme



  Drupal.theme.placeholder = function (str) {
    return '<em class="placeholder">' + Drupal.checkPlain(str) + '</em>';
  };

  // ...

  Drupal.theme('placeholder', text);

Incluyendo JS 

Paso 1: Crear el archivo JS o CSS y después definir una librería en un archivo <nombre>.libraries.yml

 

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

Incluyendo JS 

Paso 2: Agregamos nuestro código en la página que  necesitemos.

 

 

function fluffiness_preprocess_maintenance_page(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/cuddly-slider';
}

Incluyendo JS 

O para todo nuestro tema en el *.info.yml

 

 

name: Example
type: theme
core: 8.x
libraries:
  - fluffiness/cuddly-slider

Podemos agregarlo también en nuestro template Twig

 

{{ attach_library('fluffiness/cuddly-slider') }}
<div>Some fluffy markup {{ message }}</div>

Pasando valores desde PHP

Podemos alimentar el objeto JS drupalSettings con valores desde nuestro código PHP.

function fluffiness_page_attachments_alter(&$page) {
  $page['#attached']['library'][] = 'fluffiness/cuddly-slider';
  $page['#attached']['drupalSettings']['fluffiness']['cuddlySlider']['foo'] = 'bar';
}

Headless Drupal

Se utiliza este término cuando hablamos de una separación del front end y el back end en Drupal. Es decir que el front end es una aplicación por aparte y se comunica con Drupal por medio de una API REST.

Los módulos necesarios para que Drupal actúe como un servidor REST están incluídos en el core.

 

Buenas prácticas

  • Utilizar el modo estricto. "use strict";
  • Utilizar JSHint para cuidar la calidad de nuestro código.
  • Declarar todas las variables al inicio de nuestra función.
  • Utilizar funciones anónimas para evitar problemas de scope.
  • Cuidar el manejo de selectores con jQuery para evitar problemas de performance. 

    Más información:
    http://learn.jquery.com/performance/optimize-selectors/

 

Buenas prácticas

  • Si nuestro código es muy complejo,  es recomendable crear nuestros propios plugins. 

Más información: http://learn.jquery.com/plugins/basic-plugin-creation/

 

(function( $ ) {
 
    $.fn.showLinkLocation = function() {
 
        this.filter( "a" ).each(function() {
            var link = $( this );
            link.append( " (" + link.attr( "href" ) + ")" );
        });
 
        return this;
 
    };
 
}( jQuery ));
 
// Usage example:
$( "a" ).showLinkLocation();

¿Preguntas?

Gracias por su atención

@brolag

Made with Slides.com