12 de agosto de 2015

Introduccion a jQuery y sus amigos (2da parte)

Primeros pasos con jQuery (Parte 1)

Como mencioné en la anterior entrega (la cual pueden leer aquí ), jQuery es una librería que permite escribir código de manera rápida y sencilla, sin embargo, no es posible realizarlo de esa manera si no conocemos cómo arrancar a escribir o porqué usar jQuery u otra librería.

Es jQuery el correcto para mi proyecto?

Quizás si, quizás no, se trata más de un tema de gustos y de prioridades, si tenemos en cuenta temas particulares como por ejemplo desempeño, limpieza de código, compatibilidad para navegadores antiguos, extensibilidad, costumbre o facilidad de uso y por ultimo cantidad de plugins disponibles. No siempre jQueryMootools, Prototype, Vanilla JS o inclusive el mismo Javascript puro serán buenos para tu proyecto, todo depende del sabor que nos guste, de cómo planteemos el proyecto y sobre todo, de cómo se piense resolver los problemas de desarrollo e implementación que tengamos por el camino. En esta entrega revisaremos los primeros 3 aspectos de esta lista, para dejar algo de contenido para la próxima publicación.

Desempeño

Es claro que este aspecto es importante en la medida en que empezamos a desarrollar aplicaciones, páginas o simplemente aplicativos sobre JS, sin embargo, debemos priorizar el desempeño de la librería que se está empleando, pues es en sitios donde Javascript se usa constantemente, donde este aspecto debe ser prioritario. Usualmente la mayor cantidad de operaciones que se realizan sobre una librería en particular están orientadas a manipulación y selección de elementos del DOM, por esta razón, es pertinente observar la siguiente comparación: 

Comparativa de seleccion de elementos por DOM para jQuery, Vanilla JS, prototype JS, ext JS, YUI y motools
Tomado de: http://www.vanilla-js.com
Vemos que jQuery no sale tan bien librado, sin embargo sus números no son tan malos... contando con que realicemos menos de 200 o 300 manipulaciones al DOM en un segundo (que es la mayoría de los casos en mi experiencia). Vale la pena mencionar que aunque hay algunas librerías como Dojo o Prototype, que tienen un mejor desempeño, pero apenas será perceptible para nuestro propósito más básico y funcional.

Limpieza de código

O como lo llamaríamos en inglés, overhead, es decir, que tanto de lo que usamos es lo que realmente necesitamos. Es necesario tener en cuenta que al usar una librería, sea cual sea, las posibilidades de que usemos el 100% de sus funcionalidades son bajas, y por esta razón siempre estaremos agregando código innecesario para nuestra aplicación. El Javascript básico por otro lado, siempre será justo lo que necesitemos, si escribimos 4 líneas, lo que usemos, serán 4 líneas, y lo incluido serán 4 líneas. A continuación observamos una comparación del tiempo de carga de las librerías más populares. Se presenta el escenario de librerías no cacheadas en el servidor, sin usar la extensión gzip y en su versión minified.

Librería

Tiempo de carga (ms)

Muestras de carga
jQuery-1.9.1732.19353152
Dojo-1.0.8911.32553143
prototype-1.6.0923.70743144
yahoo-utilities-2.4.0927.46043141



Como podemos ver, aunque jQuery es la que menos tiempo lleva cargar, siempre vamos a traer código que no necesitamos y es necesario ponderar este tipo de información para validar si realmente estamos usando la librería correcta en el proyecto correcto.

Compatibilidad con otros navegadores

Aunque todos damos por sentado que todos los navegadores funcionan igual para JS (dado que se ha implementado la gran parte del estándar JS en los principales navegadores) no siempre fue así e históricamente aún se guarda compatibilidad para IE6 en jQuery, es decir, un poco más de overhead para nuestro código. A continuación revisamos las versiones de navegador más antigua junto con la actual de cada navegador, para poder evidenciar este hecho.

Librería

IE (Edge)

Opera (30)

Firefox (42)

Chrome (47)

Safari (9)
jQuery 1.x612C, C-1C, C-15
jQuery 2.x912C, C-1C, C-15
Prototype JS691.512
Dojo JS6103135
Mootools69243
YUI69273

Como acabamos de ver, realmente estamos incluyendo código viejo, que al día de hoy, puede que incluso ya no se utilice o aun lo utilicen nuestros  clientes en sitios antiguos. (Post importante acerca de esto (en ingles))

Por el momento, ha sido suficiente, los invito a que nos veamos en la próxima entrada para cerrar este tema particular e iniciar a revisar jQuery un poco mas a fondo. Los invito a compartir la entrada y dejar comentarios y preguntas si lo creen necesario!. Hasta pronto!

No hay comentarios.:

Publicar un comentario