Mejora Progresiva con Javascript
Por Aaron Gustafson. Original en inglés, traducido al español por Julio Gudiño.
Si has leído los primeros dos artículos de esta serie, ya debes de estar entrando en el ‘groove’ de la mejora progresiva. En este artículo vamos a discutir como aplicar la filosofía de mejora progresiva a scripts en el cliente. Como podrás ver pronto, todo se trata simplemente de dos cosas: moderación y planeación.
Ejerce tu poder sabiamente
Seguro has escuchado la frase ‘el poder corrompe’. Tiene otros significados mas profundos, pero para nuestro propósito, vamos a concentrarnos solo en esas tres palabras. Javascript es una herramienta muy poderosa, y por demasiado tiempo fue una fuerza que corrompía la web. Generaba varios obstáculos, mensajes de error y demasiadas ventanas pop-up a aquellos que navegaban la web. También era altamente incomprendido, lo cual probablemente contribuía a su abuso, y en práctica era parecido a un arte oscuro.
No solo Javascript hacía mas mal que bien, si no que también se convirtió en algo indomable. Debajo de su caparazón, el código era un nido de ratas que causaba que hasta los mas determinados salieran corriendo gritando; el mantenimiento era una pesadilla debido a la propagación de código enredado y críptico a través del forking.
En esos tiempos, Javascript era realmente desagradable por necesidad: los navegadores aún tenían que implementar estándares decentes de soporte y los desarrolladores estaban ocupados escribiendo código HTML complejo y confuso. Javascript tenía que saltar muchos obstáculos para lograr cualquier forma de compatibilidad entre navegadores, incluso en algo tan simple como un rollover sobre una imagen.
Por suerte, estamos en un mejor lugar ahora en ambas areas y finalmente podemos implementar un Javascript mucho más limpio. Sin embargo, tenemos que respetar su poder y actuar responsablemente. Necesitamos enfocarnos tanto en como Javascript debe de ser usado así como en lo que puede hacer — tal vez un incluso un poco más. Necesitamos practicar moderación. La mejora progresiva nos ayuda a hacer eso porque nos fuerza a concentrarnos en el contenido y construir a partir del mismo.
Estableciendo un punto de partida
Con la mejora progresiva, construimos sitios con una fundación de código usable. Un concepto clave de Javascript que hay que tener en mente es que cualquier contenido que los usuarios necesiten para comprender el propósito de la página debe de existir en la página aun en la ausencia de scripts del lado de cliente. Punto.
Un ejemplo: Tal vez el contenido en cuestión es una tabla de comparación para los productos que vendes. Si los requerimientos del sitio dictan que los datos puedan ser reordenados por columna, puedes considerar cargando la tabla en la página via Ajax, para que puedas reorganizarla en el servidor en cualquier momento. Suena perfecto, no crees?
Incorrecto.
Que pasa cuando posibles clientes visitan la página sin Javascript disponible? Si el contenido es cargado en la página usando Javascript, no tendrán acceso al contenido en lo absoluto, incluso en su estado desordenado. Que tan posible crees que sea que completen una compra si no pueden si quiera ver los productos?
El caso anterior ni siquiera toca el tema de las ramificaciones para la búsqueda. Las arañas de los buscadores no ejecutan Javascript, así que si lo usas para cargar contenido en tu página, nunca van a leer o a catalogar tu contenido. Cuantos posibles clientes vas a perder si la información de tu producto no puede ser encontrada y catalogada por Google, Microsoft o Yahoo?
Considerando tales requerimientos con mejora progresiva en mente, deberías de incluir tu tabla básica en el markup. En la mayoría de los casos podría seguir siendo generada por el servidor, pero estaría incluida directamente en la página en vez de cargada via Ajax. Podrías escribir un script que encuentre la tabla en el DOM y la haga interactiva, generando links para reordenarla y conectando los eventos onclick a llamadas Ajax para conseguir una version de la tabla reordenada.
Al completar el reto de esta manera, no solo has cumplido los requerimientos, también haz proporcionado una experiencia ‘lo-fi’ para la arañas de los buscadores y los usuarios sin Javascript.
Llevándolo un paso más lejos, podrías incluso agregar los links para reordenar a la cabeza de cada columna y hacer que actualicen la página, pasando las variables necesarias para reorganizar la tabla. Eso podría lograr que usuarios sin JS puedan reordenar la información también, dándoles una versión un poco menos responsiva pero aun con el funcionamiento ‘hi-fi’ completo.
Unos pequeños cambios en tus scripts pueden ayudarte a conseguir que los links completen tus llamadas Ajax como antes, entregando la mejor experiencia a las usuarios con mas capacidad. Al final, tendrías un ejemplo perfecto de mejora progresiva en acción.
Ahora que tienes un conocimiento fundamental sobre lo que es la mejora progresiva, podemos discutir algunas técnicas que puedes usar para comenzar.
Mantén tus scripts bajo control
Una de las claves para efectivamente integrar la mejora progresiva es establecer un plan para manejar tus scripts. Para hacerlo, hay que primero familiarizarse con el concepto de discreción en Javascript. Este es la base para la mejora progresiva para el mundo de scripts en el cliente.
El significado mas obvio de “discreción” es deshacerse todo los manipuladores de eventos ya que fácilmente pueden ser registrados via el DOM:
<a href="http://msdn.com"> newWin(this.href);"</del>>El próximo paso es mover todos tus scripts a archivos externos ligados, en lugar de implementarlos directamente usando elementos <script>:
Esto va a hacer mas sencillo el mantenimiento y te da algunos beneficios en cuanto a economía para el crecimiento. (Siendo honestos, estos cambios pueden tomar algo de tiempo, ya que tantos editores WYSIWYG ( Lo que ves es lo que hay) y librerías para desarrollo de aplicaciones web generan Javascript estorboso desde un inicio. Sin embargo, hay algunos patches y herramientas agregadas que puedes usar en varios de estos sistemas para sobrellevar cualquiera de sus malos hábitos.)
El próximo paso en hacer mas discretos tus scripts es decidiendo cuando y como incluirlos. En el sentido mas sencillo, esto significa asegurar que realmente puedas correr el script en el navegador del usuario probando la disponibilidad de un método antes de ejecutarlo:
if( document.getElementById ){
scriptUsingGetElementById();
}También vas a necesitar probar cualquier objeto que necesites, e incluso deberías probar si existen los elementos identificados que necesitas para ligar tus scripts. Siguiendo este proceso con cada script que usas vas a crear una experiencia de interacción a la medida en donde solo los scripts que el navegador de un usuario puede manejar — y que pueden correr encima del markup de la página actual — van a ser ejecutados.
Para más información sobre Javascript discreto, visita el artículo de Jeremy Keith sobre el tema.
Mantén separados tus estilos
Javascript no existe en un vacío, así que tal como debes de mantener alguna separación entre tus scripts y tu markup (como discutimos anteriormente), debes mantener alguna separación entre tus scripts y tus estilos.
Principalmente, debes de evitar agregar estilos directamente en línea cuando creas o manipulas elementos en el DOM. Mejor aplica nombres de clases que se relacionan con tus hojas de estilo globales o específicas para cada script:
var el = document.getElementById( 'message' );
<del>el.style.color = '#f00';
el.style.backgroundColor = '#ffcfcf';</del>
<ins>el.className = 'highlighted';</ins>Una hoja de estilo específica para cada script es una buena opción si tus scripts requieren de muchos estilos para habilitar su interactividad. Configurándolos en su propio archivo te permite mantenerlos independientemente del resto de los estilos en el sitio. También te da la capacidad de ligar a tal hoja de estilo solo cuando un script es ejecutado, así reduciendo el tiempo de descarga en páginas que no usan tal script o en navegadores que tienen la capacidad de correrlo.
Si acaso decides incluir tus estilos en una de tus hojas de estilo principales, asegúrate de escribirlas de tal manera que solo sean aplicadas cuando el script haya sido ejecutado exitosamente.
** Todo: links not working in ALA original article
Para mas información en la relación de estilos y scripts, lee este artículo del número de lanzamiento de Scroll (actualmente solo disponible en papel).
Es tiempo de ser progresivos
Hemos revisado la mentalidad necesaria para implementar la mejora progresiva en Javascript y discutimos varias técnicas de implementación. También hemos discutido los conceptos de scripts discretos y hemos aprendido un poco sobre como manejar la relación entre CSS y Javascript.
Este artículo completa nuestra serie introductoria en mejora progresiva y las formas en que puede realizarse en tus implementaciones de CSS y Javascript. Esperamos que haya contribuido a tu proceso y te haya inspirado a comenzar a usar mejora progresiva en tu propio flujo de trabajo.
