Lo esencial de Zepto.js

Spanish (Español) translation by Steven (you can also view the original English article)

Las bibliotecas modernas de JavaScript son bastante gigantes; solo echa un vistazo a jQuery. Cuando estás creando una aplicación móvil, o simplemente apuntando a navegadores modernos, una biblioteca que es mucho más esbelta y ágil se convierte en una propuesta más sabrosa.

Hoy, veremos una de esas bibliotecas, llamada Zepto.

El problema de mezclar bibliotecas de escritorio y dispositivos móviles

Una cosa que se ha escapado de la mayoría de los radares ha sido el auge de los dispositivos móviles.

Verás, Internet y la tecnología que lo impulsa ha crecido a pasos agigantados en los últimos años. Pasamos de sitios estáticos a aplicaciones web, a aplicaciones web dinámicas y luego a las aplicaciones en tiempo real y con gran capacidad de respuesta. Una cosa que se ha escapado de la mayoría de los radares ha sido el auge de los dispositivos móviles.

Piénsalo: Muchos de nosotros usamos teléfonos inteligentes y los usamos para navegar de manera constante. Incluso en casa, una parte no trivial de mi círculo ha adoptado una tableta para navegar y enviar correos electrónicos de manera informal. Si bien esta afluencia de dispositivos es buena desde el punto de vista de la exposición, no está exenta de advertencias.

En lugar de pensar en estos dispositivos como pantallas limitadas como lo hacen los consumidores, nosotros, como desarrolladores, debemos pensar en ellos en términos de recursos y ancho de banda. No todos tienen una CPU de cuatro millones de Ghz o vienen con una gran cantidad de memoria. Y ni siquiera comencemos con el ancho de banda. Una gran parte de la población que navega sigue estancada en estas infernales excusas para una conexión a Internet móvil.

Creo que ves a dónde voy con esto. Las bibliotecas grandes y monolíticas como jQuery o Prototype definitivamente tienen su lugar, pero para esta era móvil, creo que hay un lugar para algo que es mucho más ágil. Y muchos desarrolladores parecen estar de acuerdo conmigo.

Todo el código para hacer que una biblioteca funcione en todos los navegadores se suma

Otro gran problema que no mencioné es que las bibliotecas contemporáneas hacen muchas cosas entre navegadores. De hecho, un gran atractivo de jQuery, inicialmente, fue cómo abstrajo gran parte de las peculiaridades de los navegadores cruzados con las que los desarrolladores de front-end tenían que solucionar. Incluso ahora, jQuery hace mucho trabajo pesado debajo del capó para asegurarse de que nada se rompa en diferentes navegadores.

Pero si eres un desarrollador que busca atender solo dispositivos contemporáneos, ¿realmente necesitas todo esto, me atrevo a decir, qué? La respuesta corta es no. Al eliminar el código innecesario, ambos:

Se obtiene más rendimiento ya que hay menos líneas de código para que el navegador analice y
se reduce el tamaño de tu archivo, lo que ayuda con los dispositivos móviles con limitaciones de ancho de banda.

¿Crees que este tema es exagerado? Aquí hay una gota de código aleatoria de la fuente de jQuery:

isPlainObject: function( obj ) {
		// Must be an Object.
		// Because of IE, we also have to check the presence of the constructor property.
		// Make sure that DOM nodes and window objects don't pass through, as well
		if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
			return false;
		}
....

O algo un poco más esotérico:

// Perform a simple check to determine if the browser is capable of
// converting a NodeList to an array using builtin methods.
// Also verifies that the returned array holds DOM nodes
// (which is not the case in the Blackberry browser)
try {
	Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;

// Provide a fallback method if it does not work
} catch( e ) {
	// The intended fallback
}
....

Esto puede parecer bastante trivial, pero ten en cuenta que tiende a acumularse. Si solo vas a apuntar a navegadores modernos, ya sea en computadoras de escritorio o móviles, entonces no hay una necesidad real de todas estas verificaciones y hacks adicionales. ¡Al reducir los navegadores previstos, ganas tanto en ancho de banda como en rendimiento!

Entonces, ¿cuál es el trato de Zepto?

Los escucho decir: "¡Basta de preparación! ¡Cuéntanos ya sobre la maldita biblioteca!". Vamos a por ello.

Zepto, como el título te lo estropeó, es un framework de JavaScript móvil que rectifica los dos problemas mencionados anteriormente. Tiene una base de código muy pequeña y un peso de pluma de alrededor de 8kb.

Se las arregla para ser tan esbelto al eliminar en su mayoría las cosas del navegador cruzado. Cuando se creó, el objetivo principal era admitir únicamente Webkit. La versión móvil de Webkit para ser exactos. Ahora, se ha ampliado para que funcione también con navegadores de escritorio, pero solo con los modernos. ¡No más torpezas para que las cosas funcionen con este IE6!

La API de Zepto es compatible con jQuery. Si usas jQuery, ya sabes cómo usar Zepto.

Otra área en la que Zepto logra ser pequeño es cómo se las arregla para evitar la hinchazón de funciones. La biblioteca principal no parece incluir ninguna funcionalidad extraña. Incluso las funciones de animación y AJAX están disponibles como módulos separados, en caso de que surja la necesidad. Para los usuarios que utilizan principalmente bibliotecas para el recorrido y la manipulación de DOM, esto es una bendición absoluta.

Y, oh, ¿mencioné la pieza principal de la fiesta de Zepto? La API de Zepto es compatible con jQuery. Si usas jQuery, ya sabes cómo usar Zepto.

¿Son Zepto y jQuery intercambiables?

Si y no. Depende es una respuesta más adecuada.

Sí, porque la API central de Zepto imita a jQuery en gran medida. Para facilitar su uso y reducir drásticamente la curva de aprendizaje, Zepto emula la API de jQuery. La mayoría de los métodos que se utilizan con frecuencia, como la manipulación de DOM, se denominan prácticamente iguales y tienen los mismos parámetros en el mismo orden. Las firmas de los métodos son las mismas para los ingenieros.

Veamos un pequeño ejemplo:

1	$('#element').html("Hey! Are you on the GW2 beta?");

¿Luce familiar? Debería. Este es exactamente el mismo código que usarías con jQuery para cambiar el HTML de un elemento. Como mencioné, esto no se limita solo a este método. La mayoría de las operaciones DOM se construyen de la misma manera junto con tus utilidades, como AJAX.

Por otro lado, la API no coincide al 100%. Zepto renuncia a algunos métodos presentes en jQuery que pueden romper tu código. Y lo que es más importante, dado que Zepto es un subconjunto de jQuery, probablemente te perderás funcionalidades específicas que están integradas; Deferred es un buen ejemplo. Simplemente no puedes cambiar jQuery por Zepto y esperar que todo funcione.

Y para mí, el mayor obstáculo son los métodos que se han copiado de jQuery pero tienen una firma y un conjunto de características diferentes. Se vuelve un poco frustrante cuando crees que estás usando un método correctamente pero no es así. La capacidad del método de clonación para copiar controladores de eventos es un buen ejemplo. Sin mirar la fuente, realmente no habría descubierto esto.

Explorando la API principal

Si has trabajado con jQuery antes, todo lo que se muestra a continuación debería ser un festival de repetición.

Suficiente charla, vamos a sumergirnos en un código ahora. Como ocurre con muchas bibliotecas modernas, el recorrido y la manipulación de DOM es una característica central que todos quieren perfeccionar. Dado que la API y la funcionalidad general son muy similares a jQuery, creo que puedes asumir con seguridad que todo es de primera categoría.

Echemos un vistazo a algunas funciones comunes relacionadas con DOM.

Modificar el contenido HTML de un contenedor

Este es el pan y la mantequilla de las operaciones DOM: leer o cambiar el contenido HTML de un elemento. Con Zepto, es tan simple como llamar al método html en el contenedor y pasar el nuevo HTML, si es necesario.

Por ejemplo, esto obtiene el HTML de un elemento y lo almacena en una variable.

1	var containerText = $('#element').html();

O si deseas cambiarlo a otra cosa:

1	$('#element').html("Hola there!");

Bastante simple, ¿verdad?

Anteponer/agregar un elemento a un contenedor

Al igual que con jQuery, Zepto hace uso de los métodos append y prepend. Y la invocación sigue siendo la misma.

$('#element').append("<p>This is the appended element.</p>");

// or

$('#element').prepend("<p>This is the appended element.</p>");

Eventos

Los eventos son la columna vertebral de cualquier aplicación moderna y Zepto te proporciona un montón de métodos fáciles de usar para hacer tu trabajo. La mayor parte del trabajo se realiza mediante el método on.

1	$('#element').on('click', function(e){
2	// Your code here
3	});

Fácil de leer y analizar. Si te sientes de la vieja escuela y te apetece usar métodos bind, delegate o live, no lo hagas. Al igual que con jQuery, están obsoletos aquí.

AJAX

Cualquier biblioteca moderna de bajo nivel debe proporcionar un contenedor fácil de usar alrededor de AJAX y Zepto no te defraudará aquí. Aquí hay un ejemplo de una solicitud AJAX súper simple.

$.ajax({
  type: 'POST',
  url: '/project',
  data: { name: 'Super Volcano Lair' },
  dataType: 'json',
  success: function(data){
    // Do some nice stuff here
  },
  error: function(xhr, type){
    alert('Y U NO WORK?')
  }
});

Las cosas pueden parecer un poco complicadas, pero lo que estamos haciendo puede reducirse a:

Crear el objeto AJAX y pasarle opciones.
En las opciones, especificar que nos gustaría hacer una solicitud POST. El valor predeterminado es GET, me imagino.
Especificar la URL para POST.
Especificar los datos que deben enviarse al servidor. Como pueden ver, me río como un maníaco y trato de crear mi propia guarida de supervillanos.
Especificar los métodos que se activarán cuando la solicitud tenga éxito o falle. De esta forma, podemos actualizar la interfaz de usuario pase lo que pase.

Al igual que con jQuery, existen métodos separados para una solicitud GET o POST o para simplemente cargar algo de contenido web.

Animaciones

¿A qué llegará el mundo sin algunas animaciones? Zepto expone el método animate todopoderoso que debería manejar la mayoría de tus necesidades de animación.

1	$('#element').animate({
2	opacity: 0.50, top: '30px', color: '#656565'
3	}, 0.5)

Básicamente, estamos seleccionando el elemento que se va a animar, invocando el método animate y especificando las propiedades que se van a animar, así como el tiempo que debería llevar terminar la animación. Zepto hace el resto.

O si solo necesitas mostrar y ocultar un elemento, el interruptor debería funcionar bien.

Creo que entiendes el punto aquí: la API del DOM, animación y eventos de Zepto emula la de jQuery en gran medida. Y como todos sabemos, jQuery es muy bueno con esas cosas. Si has trabajado con jQuery antes, no deberías tener demasiados problemas aquí.

Una mirada a los eventos táctiles y otras sutilezas

Zepto te proporciona algunos eventos táctiles específicos que puede aprovechar en tus aplicaciones. Éstas incluyen:

swipe: Maneja tu movimiento de deslizamiento típico. También hay eventos separados para diferentes direcciones, como swipeLeft.
tap: Se activa en respuesta a una acción de toque genérica.
doubleTap: Obviamente, esto maneja dobles toques.
longTap: Se activa cuando se toca un elemento durante más de 750ms. Sin embargo, no parece ser sencillo cambiar este retraso.

Aquí hay un ejemplo rápido, deliciosamente extraído de la documentación de Zepto.

<ul id=items>
  <li>List item 1 <span class=delete>DELETE</span></li>
  <li>List item 2 <span class=delete>DELETE</span></li>
</ul>

<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
  $('.delete').hide()
  $('.delete', this).show()
})

// delete row on tapping delete button
$('.delete').tap(function(){
  $(this).parent('li').remove()
})
</script>

Cuando se barre un elemento de la lista, el botón de eliminar de todos los demás elementos de la lista se oculta y solo se muestra el actual. Al tocar un botón de eliminar, se elimina el elemento li principal de ese botón para eliminarlo del DOM.

Esto debería ser bastante similar a cómo manejas generalmente los eventos, excepto que has vinculado a tus controladores a diferentes eventos, eso es todo.

Terminando

Considerando para qué y para quién desarrollo, esto es perfecto para mí; pero como siempre, tu kilometraje puede variar.

Bueno, eso es casi todo lo que hay en Zepto. En esencia, estaba destinado a ser una versión ligera y gratuita de jQuery que pudiera usarse en dispositivos móviles. Con el tiempo, se ha transformado en una biblioteca ajustada que elimina el soporte de navegadores arcaicos.

Considerando para qué y para quién desarrollo, esto es perfecto para mí; pero como siempre, tu kilometraje puede variar. Es posible que estés atrapado en el uso de complementos de jQuery que requieren modificaciones no triviales para que funcione bajo Zepto o simplemente tener más fe en jQuery.

De cualquier manera, realmente necesitas probar Zepto para ver cómo encaja con tu flujo de trabajo antes de descartarlo. ¡Lo hice y me encanta!

Bueno, eso es todo de mi parte hoy. ¡Dime lo que piensas en los comentarios a continuación y muchas gracias por leer!