Share
Las bibliotecas modernas de JavaScript son bastante gigantes, solo eche un vistazo a jQuery. Cuando creas una aplicación móvil, o simplemente te diriges a navegadores modernos, una biblioteca que es mucho más esbelta y ágil se convierte en una propuesta más sabrosa..
Hoy vamos a ver una de esas bibliotecas, llamada Zepto..
Una cosa que se ha escapado de la mayoría de los radares ha sido el aumento de los dispositivos móviles..
Vea, Internet y la tecnología que lo alimenta, ha crecido a pasos agigantados en los últimos años. Pasamos de los sitios estáticos a las aplicaciones web, a las aplicaciones web dinámicas y, luego, a las aplicaciones en tiempo real y con gran capacidad de respuesta de las aplicaciones actuales. Una cosa que se ha escapado de la mayoría de los radares ha sido el aumento de los dispositivos móviles..
Piénselo: muchos de nosotros usamos teléfonos inteligentes y lo usamos para navegar constantemente. Incluso en casa, una parte no trivial de mi círculo ha adoptado una tableta para la navegación informal y el correo electrónico. Si bien esta afluencia de dispositivos es buena desde el punto de vista de la exposición, no deja de tener sus advertencias..
En lugar de pensar en estos dispositivos como dispositivos de visualización restringidos, los desarrolladores tenemos que pensarlos en términos de recursos y ancho de banda. No todos ellos cuentan con una CPU Ghz de cuatro quilates hiperactivos o vienen con montones de memoria. Y ni siquiera vamos a empezar con el ancho de banda. Una gran parte de la población que navega todavía está atascada en estas excusas infernales para una conexión de 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..
Otro gran problema que no mencioné es que las bibliotecas contemporáneas hacen una mucho de cosas de navegador cruzado. De hecho, un gran atractivo de jQuery fue, inicialmente, la forma en que evitó muchas de las peculiaridades de los navegadores en los que los desarrolladores de front-end debían trabajar. Incluso ahora, jQuery hace un montón de 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, cruft? La respuesta corta es no. Al eliminar el código innecesario, ambos:
¿Crees que este problema está exagerado? Aquí hay un blob aleatorio de código de la fuente de jQuery:
isPlainObject: function (obj) // Debe ser un objeto. // Debido a IE, también tenemos que verificar la presencia de la propiedad del constructor. // Asegúrese de que los nodos DOM y los objetos de la ventana no pasan, también si (! Obj || jQuery.type (obj)! == "object" || obj.nodeType || jQuery.isWindow (obj)) falso retorno; …
O algo un poco más esotérico:
// Realice una comprobación simple para determinar si el navegador es capaz de // convertir un NodeList a una matriz utilizando métodos incorporados. // También verifica que la matriz devuelta contiene nodos DOM // (que no es el caso en el navegador Blackberry) intente Array.prototype.slice.call (document.documentElement.childNodes, 0) [0] .nodeType; // Proporcionar un método de reserva si no funciona catch (e) // La reserva prevista ...
Esto puede parecer bastante trivial, pero tenga en cuenta que esto tiende a acumularse. Si solo va a apuntar a navegadores modernos, ya sea en computadoras de escritorio o móviles, entonces no hay una necesidad real de todas estas comprobaciones y trucos adicionales. Al reducir sus navegadores deseados, gana tanto en ancho de banda como en rendimiento!
Los escucho diciendo: "¡Basta de acumulación! ¡Cuéntanos acerca de la maldita biblioteca ya!". Vamos a por ello.
Zepto, como te lo ha estropeado el título, es un móvil Marco de JavaScript que rectifica los dos problemas mencionados anteriormente. Tiene una base de código muy pequeña y pesa aproximadamente 8kb.
Se las arregla para ser tan esbelto en su mayoría cortando las cosas del navegador cruzado. Cuando se creó, el objetivo principal era apoyar solo a Webkit. La versión móvil de Webkit para ser exacta. Ahora, también se ha ampliado para que funcione con los navegadores de escritorio, pero solo los modernos. No más vueltas para hacer que las cosas funcionen en este IE6!
La API de Zepto es compatible con jQuery. Si usa jQuery, ya sabe cómo usar Zepto.
Otra área en la que Zepto se las arregla para ser pequeña es cómo se las arregla para evitar el aumento de características. La biblioteca central no parece incluir ninguna funcionalidad extraña. Incluso la funcionalidad de animación y AJAX están disponibles como módulos separados, si fuera necesario. Para los usuarios que usan bibliotecas principalmente para el manejo y la manipulación de DOM, este es un envío completo de dios.
Y, oh, ¿mencioné la pieza principal de la fiesta de Zepto? La API de Zepto es compatible con jQuery. Si usa jQuery, ya sabe cómo usar Zepto.
Si y no. Depende es una respuesta más acertada..
Sí, porque la API básica 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 utilizados con frecuencia, como la manipulación de DOM, se denominan más o menos igual y tienen los mismos parámetros en el mismo orden. Las firmas del método son las mismas, para los ingenieros que hay por ahí..
Veamos un pequeño ejemplo:
Accentsconagua
$ ('# element'). html ("¡Hey! ¿Estás en la versión beta de GW2?"); ¿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 de DOM se construyen de la misma manera junto con sus utilidades, como AJAX.
Por otro lado, la API no es una coincidencia del 100%. Zepto renuncia a algunos métodos presentes en jQuery que pueden romper tu código. Y lo más importante es que, dado que Zepto es un subconjunto de jQuery, es probable que se pierda algunas funcionalidades específicas integradas -- Diferido Es un buen ejemplo. Simplemente no puedes intercambiar jQuery con 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 correcto pero no lo estás haciendo. 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.
Si has trabajado con jQuery antes, todo lo que se muestra a continuación debe ser un festival de repetición..
Basta de chit chat, vamos a sumergirnos en algún código ahora. Al igual que con muchas bibliotecas modernas, el manejo y manipulación de DOM es una característica fundamental que todos quieren perfeccionar. Dado que la API y la funcionalidad general son muy similares a jQuery, creo que puede asumir con seguridad que todo es de primera clase..
Echemos un vistazo a algunas funcionalidades comunes relacionadas con DOM.
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 html método 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.
var containerText = $ ('# element'). html (); O si quieres cambiarlo por otra cosa:
$ ('# element'). html ("Hola there!"); Bastante simple, cierto?
Al igual que con jQuery, Zepto hace uso de la adjuntar y anteponer metodos Y la invocación sigue siendo la misma..
$ ('# elemento'). añadir ("Este es el elemento añadido..
"); // o $ ('# element'). prepend ("Este es el elemento añadido..
"); Los eventos son la columna vertebral de cualquier aplicación moderna y Zepto le brinda un montón de métodos fáciles de usar para realizar su trabajo. La mayor parte del trabajo se realiza a través de la en método.
$ ('# elemento'). en ('clic', función (e) // Su código aquí); Fácil de leer y fácil de analizar. Si te sientes vieja escuela y ganas de usar atar, delegar o vivir metodos, no hacer. Al igual que con jQuery, están en desuso aquí.
Cualquier biblioteca moderna de bajo nivel debe proporcionar un envoltorio fácil de usar alrededor de AJAX y Zepto no te deja aquí. Aquí hay un ejemplo de una solicitud AJAX super simple..
$ .ajax (type: 'POST', url: '/ project', data: name: 'Super Volcano Lair', dataType: 'json', success: function (data) // Haz algunas cosas buenas aquí , error: function (xhr, type) alert ('YU NO WORK?')); Las cosas pueden parecer un poco complicadas, pero lo que estamos haciendo puede reducirse a:
Al igual que con jQuery, hay un método separado para una solicitud GET o POST o simplemente para cargar algo de contenido web.
¿A qué llegará el mundo sin algunas animaciones? Zepto expone al todopoderoso animar método que debería manejar más de tus necesidades animadoras.
$ ('# element'). animate (opacity: 0.50, top: '30px', color: '# 656565', 0.5) Básicamente estamos seleccionando el elemento a animar, invocando el animar Método y especifique las propiedades que se animarán, así como el tiempo que debe tomar para finalizar la animación. Zepto hace el resto..
O si solo necesita mostrar y ocultar un elemento, la palanca debería funcionar bien.
Creo que entiendes el punto aquí: la API de DOM, animación y eventos de Zepto emula la de jQuery en gran medida. Y como todos sabemos, jQuery está muy bien con esas cosas. Si has trabajado con jQuery antes, no deberías enfrentarte a muchos problemas aquí.
Zepto le proporciona algunos eventos específicos táctiles que puede aprovechar en sus aplicaciones. Éstos incluyen:
Aquí hay un ejemplo rápido, deliciosamente borrado de la documentación de Zepto..
Cuando se barre un elemento de la lista, se ocultará el botón Eliminar de todos los demás elementos de la lista y solo se mostrará el actual. Al tocar un botón de eliminar se elimina el elemento li principal de ese botón que se eliminará del DOM.
Esto debería ser bastante similar a la forma en que generalmente maneja los eventos, excepto que ha vinculado sus controladores a diferentes eventos, eso es todo..
Teniendo en cuenta para qué y para quién me desarrollo, esto es perfecto para mí; Pero como siempre lo es, su kilometraje puede variar..
Bueno, eso es casi todo lo que hay para Zepto. En su esencia, estaba destinado a ser una versión magra y gratuita de jQuery que podría usarse en dispositivos móviles. Con el tiempo, se ha transformado en una biblioteca magra que elimina los navegadores arcaicos compatibles..
Teniendo en cuenta para qué y para quién me desarrollo, esto es perfecto para mí; pero como siempre lo es, su kilometraje puede variar. Es posible que se le bloquee el uso de complementos de jQuery que requieren modificaciones no triviales para que funcione bajo Zepto o simplemente tenga más fe en jQuery.
De cualquier manera, realmente necesitas darle una oportunidad a Zepto para ver cómo encaja con tu flujo de trabajo antes de borrarlo. Lo hice y me encanta!
Bueno, eso es todo de mi hoy. Déjame saber lo que piensas en los comentarios a continuación y muchas gracias por leer!
