JavaScript sin frizz con ConditionerJS

La forma en que accedemos a la Web ha cambiado mucho en los últimos años. Ya no dependemos únicamente de nuestras computadoras de escritorio para navegar por la Web. Más bien, utilizamos una gama amplia y en rápido crecimiento de dispositivos para obtener nuestra dosis diaria de información. Con el panorama de los dispositivos volviéndose confuso, la época de crear sitios de escritorio de ancho fijo definitivamente ha llegado a su fin. ConditionerJS lo ayudará a combinar toda esta información contextual para identificar el momento adecuado para cargar la funcionalidad que necesita. Le indica a su JavaScript cuándo actuar y cuándo disminuir un poco, y lo ayudará a combinar toda esta información contextual para identificar el momento adecuado para cargar la funcionalidad que necesita.

Configurar la funcionalidad basada en JavaScript para que funcione en varios dispositivos puede resultar complicado. ¿Cuándo es el momento adecuado para cargar qué script? ¿Sus pruebas de coincidencias de consultas de medios, sus pruebas de ventanas emergentes de geolocalización y sus pruebas de orientación de la ventana gráfica brindan los mejores resultados posibles para su sitio web?

ConditionerJS lo ayudará a combinar toda esta información contextual para identificar el momento adecuado para cargar la funcionalidad que necesita.

Como puedes ver claramente, al aplicar acondicionador a las cobayas se consigue un pelaje muy suave. Tómate un momento e imagina lo que esto podría significar para tu código base.

Antes de pasar a la demostración de ConditionerJS, echemos un vistazo rápido a la Web y cómo está cambiando, porque fue este cambio el que impulsó el desarrollo de ConditionerJS en primer lugar. Mientras tanto, considérelo como un champú pero también como un director de orquesta; En lugar de dar pistas a los músicos, ConditionerJS le dice a tu JavaScript cuándo actuar y cuándo bajar un poco el tono.

El origen de ConditionerJS

Obviamente, sabes que la forma en que accedemos a la Web ha cambiado mucho en los últimos años. Ya no dependemos únicamente de nuestras computadoras de escritorio para navegar por la Web. Más bien, utilizamos una gama amplia y en rápido crecimiento de dispositivos para obtener nuestra dosis diaria de información. Con el panorama de los dispositivos volviéndose confuso , la época de crear sitios de escritorio de ancho fijo definitivamente ha llegado a su fin. El lienzo fijo se está rompiendo a nuestro alrededor y necesita ser reemplazado por algo flexible, tal vez incluso algo orgánico.

¿Qué debe hacer un desarrollador web?

Curiosamente, la mayoría de las veces nuestro contenido ya es flexible. Los estilos, imágenes y patrones de interacción clásicamente son rígidos y son los que crean situaciones desafiantes o absolutamente imposibles. Resulta que HTML (el contenedor de contenidos) siempre se ha adaptado perfectamente a un amplio panorama de dispositivos; la forma en que lo presentamos es lo que nos está causando dolores de cabeza.

Deberíamos esforzarnos por presentar nuestro contenido, en todos los dispositivos, de la mejor manera posible. Pero seamos honestos, esta “mejor manera posible” no son vistas estáticas basadas en tres anchos, una para cada grupo de dispositivos familiares. Eso es sólo una reacción instintiva, en la que intentamos aferrarnos a nuestros viejos hábitos.

El panorama de dispositivos es demasiado amplio y está cambiando demasiado rápido para ser capturado en grupos. En este momento, la gente hace llamadas telefónicas con tabletas en la cabeza mientras otros juegan Grand Theft Auto en sus teléfonos hasta que les sangran los dedos. Hay teléfonos que son tabletas y tabletas que son teléfonos, no hay forma de determinar dónde termina un teléfono y comienza una tableta y qué dispositivo podría estar en medio, así que ni siquiera lo intentemos.

Agrupar dispositivos es como agrupar conejillos de indias; Si bien es ciertamente posible, eventualmente te encontrarás con problemas.

Para determinar los patrones perfectos de presentación e interacción para cada dispositivo, necesitamos más granularidad de la que nos pueden brindar los grupos de dispositivos. Podemos lograr un nivel suficiente de detalle observando la información contextual y midiendo cómo cambia con el tiempo.

Contexto en la web

El Diccionario gratuito define "contexto" de la siguiente manera:

“Las circunstancias en que ocurre un hecho; un ajuste."

El contexto del usuario contiene información sobre el entorno en el que ese usuario interactúa con su funcionalidad. A diferencia de la detección de características, el contexto no es estático. Podrías estar girando tu dispositivo en este momento, lo que cambiaría el contexto en el que estás leyendo este artículo.

Medir el contexto no se trata solo de probar las características y cambios del hardware (como el tamaño de la ventana gráfica y la velocidad de conexión). El contexto también puede (y está) influenciado por las acciones del usuario. Por ejemplo, ya se ha desplazado un poco hacia abajo en este artículo y es posible que haya movido el mouse algunos píxeles. Esto nos dice algo sobre la forma en que interactúa con la página. Recopilar y combinar toda esta información creará una imagen detallada del contexto en el que estás leyendo este contenido actualmente.

Medir y responder correctamente a los cambios de contexto nos permitirá presentar el contenido correcto de la manera correcta en el momento correcto.

Nota : Si está interesado en un análisis más detallado del contexto, le aconsejo que lea Designing With Context de Cennydd Bowles.

Dónde y cómo medir los cambios en el contexto

Se pueden medir fácilmente los cambios en el contexto agregando varias pruebas a sus módulos de JavaScript. Podría, por ejemplo, escuchar los eventos resizey scrollen la ventana o, un poco más avanzado, observar los cambios en las consultas de medios.

Configuremos juntos un pequeño módulo de Google Maps. Debido a que el mapa incluirá áreas urbanas y contendrá mucha información, solo debe mostrarse en ventanas gráficas de más de 700 píxeles. En pantallas más pequeñas, mostraremos un enlace a Google Maps. Escribiremos un poco de código para medir el ancho de la ventana y determinar si es lo suficientemente ancha como para activar el mapa; si no, entonces no hay mapa. ¡Perfecto! ¿Que hay para cenar?

¡No pidas esa pizza todavía!

Su cliente acaba de llamar y desea duplicar el mapa en otra página. En esta página, el mapa mostrará un área menos poblada del planeta y, por lo tanto, aún podría representarse en ventanas de visualización de menos de 700 píxeles.

¿Podría agregar otra prueba al módulo de mapa, tal vez basando su medida de ancho en algo className? Pero ¿qué pasa si se introduce una tercera condición y una cuarta? No habrá pizza para ti en el corto plazo.

Claramente, medir el espacio disponible en la pantalla no es la principal preocupación de este módulo; En cambio, el módulo debería sorprender al usuario con fantásticos patrones de interacción y mapas deslumbrantes.

Aquí es donde entra en juego el acondicionador. ConditionerJS vigilará los parámetros relacionados con el contexto (como el ancho de la ventana) para que puedas mantener todas esas medidas fuera de tus módulos. Especifique las condiciones relacionadas con el entorno para su módulo y Conditioner cargará su módulo una vez que se hayan cumplido estas condiciones. Esta separación de preocupaciones hará que sus módulos sean más flexibles, reutilizables y mantenibles, todas características favorables del código.

Configuración de un módulo acondicionador

Comenzaremos con un fragmento de HTML para ilustrar cómo se cargaría un módulo típico usando Conditioner. A continuación, veremos lo que sucede debajo del capó.

a href="https://maps.google.com/?ll=51.741,3.822"   data-module="ui/Map"   data-conditions="media:{(min-width:30em)} and element:{seen}" … /a

Ejemplo de código n.º 1

Estamos vinculando nuestro módulo de mapa usando atributos de datos en lugar de clases, lo que hace que sea más fácil detectar dónde se cargará cada módulo. Además, la funcionalidad de encuadernación se vuelve muy sencilla. En el ejemplo anterior, el mapa se cargaría solo si la consulta de medios (min-width:30em)coincide y la etiqueta de anclaje ha sido seendel usuario. ¡Fantástico! ¿Cómo funciona esta magia negra? Es hora de abrir el capó.

Consulte Pen ConditionerJS: vinculación y carga de un módulo de mapa de Rik Schennink ( @rikschennink ) en CodePen .

Un resumen del funcionamiento interno del acondicionador

El siguiente es un resumen de lo que sucede cuando el DOM termina de cargarse. No te preocupes, no es una cirugía de cohetes.

1. El acondicionador primero consulta el DOM en busca de nodos que tengan el data-moduleatributo. Un simple querySelectorAll funciona.
2. Para cada coincidencia, prueba si data-conditionsse han cumplido las condiciones establecidas en el atributo. En el caso de nuestro mapa, probará si la consulta de medios coincide y si el elemento se ha desplazado a la vista (es decir, si lo ve el usuario). En realidad, esta parte podría considerarse una cirugía de cohetes.
3. Si se cumplen las condiciones, Conditioner buscará el módulo al que se hace referencia utilizando RequireJS ; ese seria el ui/Mapmodulo. Usamos RequireJS porque escribir nuestro propio cargador de módulos sería una locura; lo he intentado.
4. Una vez que el módulo se ha cargado, Conditioner inicializa el módulo en la ubicación indicada en el DOM. Dependiendo del tipo de módulo, Conditioner llamará al constructor o a un loadmétodo predefinido.
5. ¡Presto! Su módulo lo toma desde allí e inicia sus rutinas de mapas.

Una vez realizada la configuración inicial de la página, Conditioner no deja de medir las condiciones. Si no coinciden al principio pero coinciden más adelante, tal vez el usuario decida cambiar el tamaño de la ventana , Conditioner aún cargará el módulo. Además, si las condiciones de repente se vuelven inadecuadas, el módulo se descargará automáticamente. Esta carga y descarga dinámica de módulos convertirá su página web estática en un organismo vivo, en crecimiento y adaptable.

Pruebas disponibles y cómo usarlas en expresiones

El acondicionador viene con un conjunto básico de pruebas que son todos módulos en sí mismos.

• “medios” queryysupported
• “elemento” min-width, max-widthyseen
• “ventana” min-widthymax-width
• "puntero"available

También puedes escribir tus propias pruebas, haciendo todo tipo de cosas interesantes. Por ejemplo, podría utilizar esta prueba de consentimiento de cookies para cargar determinadas funciones solo si el usuario le ha permitido escribir cookies. Además, ¿qué pasa con la descarga de módulos pesados ​​si la batería cae por debajo de cierto nivel? Ambos posibles. Podrías combinar todas estas pruebas en el lenguaje de expresión de Conditioner. Has visto esto en las pruebas de mapas, donde combinamos seenprueba con mediaprueba.

media:{(min-width:30em)} and element:{seen}

Combine paréntesis con los operadores lógicos andy cree rápidamente condiciones complejas pero aún legibles por humanos or.not

Pasar opciones de configuración a sus módulos

Para que sus módulos sean más flexibles y adecuados para diferentes proyectos, permita la configuración de partes específicas de sus módulos; piense en una clave API para su servicio Google Maps o cosas como etiquetas de botones y URL.

Configurar la expresión facial de un conejillo de indias utilizando objetos de configuración.

Conditioner le ofrece dos formas de pasar opciones de configuración a sus módulos: opciones a nivel de página y de nodo. Al inicializar su módulo, fusionará automáticamente estos dos niveles de opciones y pasará la configuración resultante a su módulo.

Configuración de las opciones predeterminadas del módulo

Definir una optionspropiedad base en su módulo y configurar el objeto de opciones predeterminado es un buen comienzo, como en el siguiente ejemplo. De esta manera, siempre estará disponible algún tipo de configuración predeterminada.

// Map module (based on AMD module pattern)define(function(){    // constructor    // element: the node that the module is attached to    // options: the merged options object    var exports = function Map(element,options) {    }    // default options    exports.options = {        zoom:5,        key:null    }    return exports;});

De forma predeterminada, el mapa está configurado en el nivel de zoom 5 y no tiene clave API. Una clave API no es algo que desees como configuración predeterminada porque es algo personal.

Definición de opciones de módulo para toda la página

Las opciones a nivel de página son útiles para anular opciones para todos los módulos de una página. Esto es útil para algo como configuraciones relacionadas con la configuración regional. Puede definir opciones a nivel de página utilizando el setOptionsmétodo que está disponible en el conditionerobjeto o puede pasarlas directamente al initmétodo.

// Set default module optionsconditioner.setOptions({    modules:{        'ui/Map':{            options:{                zoom:10,                key:'012345ABCDEF'            }        }    }});// Initialize Conditionerconditioner.init();

En este caso, configuramos una clave API predeterminada y aumentamos el nivel de zoom predeterminado a 10 para todos los mapas de la página.

Opciones anuladas para un nodo en particular

Para modificar las opciones de un nodo particular en la página, use opciones a nivel de nodo.

a href="https://maps.google.com/?ll=51.741,3.822"   data-module="ui/Map"   data-options='{"zoom":15}' … /a

Ejemplo de código n.º 2

Para este mapa único, el nivel de zoom terminará en 15. La clave API permanecerá 012345ABCDEFporque eso es lo que la configuramos en las opciones a nivel de página.

Consulte Pen ConditionerJS: carga del módulo de mapas y opciones de paso de Rik Schennink ( @rikschennink ) en CodePen .

Tenga en cuenta que las opciones están en formato de cadena JSON; por lo tanto, las comillas dobles del data-optionsatributo se han reemplazado por comillas simples. Por supuesto, también puedes usar comillas dobles y escapar de las comillas dobles en la cadena JSON.

Optimización de su construcción para maximizar el rendimiento

Como comentamos anteriormente, Conditioner se basa en RequireJS para cargar módulos. Con sus módulos cuidadosamente divididos en varios archivos JavaScript, un archivo por módulo, Conditioner ahora puede cargar cada uno de sus módulos por separado. Esto significa que sus módulos se enviarán por línea y se analizarán solo una vez que deban mostrarse al usuario.

Para maximizar el rendimiento (y minimizar las solicitudes HTTP), combine los módulos principales en un solo paquete utilizando RequireJS Optimizer . El paquete principal minimizado resultante se puede mejorar dinámicamente con módulos basados ​​en el estado del contexto activo del usuario.

Equilibre cuidadosamente lo que contiene el paquete principal y lo que se carga dinámicamente. La mayoría de las veces, no querrás incluir los módulos más exóticos o los módulos muy específicos del contexto en tu paquete principal.

Intente mantener el recuento de solicitudes al mínimo: se sabe que sus usuarios son impacientes.

Tenga en cuenta que cuantos más módulos active al cargar la página, mayor será el impacto en la CPU y más tardará en aparecer la página. Por otro lado, cargar scripts de forma condicional aumentará la carga de CPU necesaria para medir el contexto y agregará solicitudes adicionales; Además, esto podría afectar los ciclos de redibujado de páginas más adelante. Aquí no existe una solución milagrosa; Tendrás que determinar el mejor enfoque para cada sitio web.

El futuro del acondicionador

La biblioteca contiene muchas más funciones de las que hemos analizado hasta ahora. Entrar en detalles requeriría ejemplos de código más detallados, pero debido a que la API aún está cambiando, los ejemplos no permanecerían actualizados por mucho tiempo. Por lo tanto, este artículo se ha centrado en el concepto de marco y su implementación básica .

Estoy buscando personas que comenten críticamente sobre el concepto, prueben el rendimiento de Conditioner y, por supuesto, contribuyan para que podamos construir algo juntos que lleve la Web más lejos.

Otras lecturas

• 55 conjuntos de iconos gratuitos de alta calidad
• La guía definitiva para la clonación en Photoshop
• Dibujar a mano: cosas que no sabías que podían lograr con tus garabatos
• Pasar de Adobe Fireworks a Sketch: diez consejos y trucos

(al, ml, il, mrn)Explora más en

• Codificación
• Marcos
• CSS
• javascript
• Técnicas