¿Qué Es jQuery?

() translation by (you can also view the original English article)

Los lectores ávidos de Envato Tuts+ vienen de una amplia variedad de antecedentes en términos de experiencia, cultura y lo que están buscando aprender. Cuando se trata de tecnología, es fácil dar por hecho a aquellos que están empezando, especialmente si haz hecho cualquier tipo de desarrollo por una cantidad de tiempo extendida.

Dicho eso, una de las cosas buenas de convertirse en desarrollador es que una vez que te has adaptado a un lenguaje particular o conjunto de habilidades, es fácil traducirlos a otras áreas de desarrollo.

En un intento por asegurarnos de que estamos alcanzando a la audiencia más amplia posible, estamos apuntando a publicar contenido directamente a principiantes que tienen curiosidad acerca de un lenguaje, plataforma o aplicación dados.

Y en este artículo, vamos a estar enfoncándonos exclusivamente en jQuery. Específicamente, vamos a echar un vistazo de alto nivel a todo lo que jQuery ofrece y cómo nos puede ayudar, y vamos a revisar algunos de los proyectos que también vienen a realización de la librería inicial.

Todo Acerca de jQuery

Inicialmente liberado en 2006 por John Resig, jQuery se estableció como una librería multi-plataforma de JavaScript que hizo más fácil escribir soluciones del lado del cliente.

Al tiempo que fue liberado, fue especialmente útil debido a las inconsistencias que existían entre implementaciones JavaScript en Internet Explorer, Firefox y eventualmente Google Chrome (el cuál no fue lanzado sino hasta 2008).

Como se define en Wikipedia:

jQuery es una librería multi-plataforma de JavaScript diseñada para simplificar el scripting HTML del lado del cliente. jQuery es la librería JavaScript en uso más popular hoy en día, con instalacción sobre el 65% de los primeros 10 millones de sitios con más tráfico en la web. jQuery es gratuito, un software de código abierto licenciado bajo la Licencia MIT.

Además, el mismo sitio web de jQuery dice:

jQuery es una librería JavaScript rápida,pequeña y rica en características. Hace más sencillas cosas como recorrido y manipulación de documento HTML, manejo de eventos y Ajax con una API fácil de usar que funciona a lo largo de una multitud de navegadores. Con una combinación de versatilidad y extensibilidad, jQuery ha cambiado la manera en la que millones de personas escriben JavaScript.

¿Pero qué significa esto para nosotros como desarrolladores? Tal vez la mejor manera para nosotros de entender todo lo que la librería ofrece es examinar lo que dice ofrecer.

1. Recorrido de Documento HTML

Cuando un navegador genera una página web, es una representación visual de lo que se conoce como el DOM (o document object model). Este modelo puede ser modelado conceptualmente como un árbol de estructura de datos en donde hay ciertos nodos cada uno con raíces y hojas.

Por ejemplo, mira esta imagen proporcionada por el Web Step Book:

An example of the DOM for a basic web page

Cuando estás trabajando con jQuery, puedes fácimente recorrer los contenidos del DOM para alcanzar o encontrar los nodos, elementos o valores que estás tratando de recuperar.

Esto significa que si estás buscando el texto de un elemento div que tiene un ID único, es fácil de hacer.

/**
 * This code looks for a div with the ID of "my unique element"
 * and then removes it from view.
 */
$( 'div#my-unique-element' ).hide();

Si estás tratando de ciclar a través de los elementos span, puedes hacerlo también:

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * allow you to iterate through them.
 */
$( 'span' ).each(function() {
    // Process the span element here
});

Revisaremos esta funcionalidad en particular un poco más en la siguiente sección ya que va a mostrar trabajo adicional que puedes hacer para manipular la página.

Dicho eso, los ejemplos son simples, y las cosas se pueden complicar más, especialmente mientras introducimos cadenas de métodos. Por ejemplo:

$excerpt.on( 'keydown', function( evt ) {

    if ( ( 17 === evt.keyCode || 91 === evt.keyCode ) || 86 === evt.keyCode ) {

  	if ( -1 === $.inArray( evt.keyCode, keymap ) ) {
			keymap.push( evt.keyCode );
		}

	}

    }).on( 'keyup', function() {

	if ( user_has_pasted_content( keymap ) ) {

		resize_textarea( this );
		keymap = [];

	}

});

En este punto, no se supone que sepas que está pasando con el código, pero está para mostrarte lo útil que puede ser jQuery en ciertas situaciones a través del uso de funciones ayudantes y cadenas de métodos.

Basta decir, que el poder de jQuery yace en su estabilidad para consultar el DOM (de ahí el nombre jQuery) y después hacer ajustes a este a través del uso de una bien documentada API (que está repleta con ejemplos de cómo usar cada función).

Se podría argumentar que todo lo demás se deriva de esa característica solamente. Así que dicho eso, continuemos a ver algo de cómo se ve.

2. Manipulación de Documento HTML

Cuando se trata de realmente manipular el DOM, jQuery tiene muchas funciones que nos permiten cambiar lo que nuestros visitantes ven.

Algunas de esas funciones son simples, tales como permitirnos mostrar u ocultar elementos que no están visibles cada vez que una página carga. Otras funciones nos permiten crear nuevos elementos y adjuntarlos a un elemento existente, o preponerlos en frente de una lista entera.

Si estás tratando de ciclar a través de todos los elementos span para agregarles un atributo de clase, también puedes hacer eso:

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * add a custom class attribute to them.
 */
$( 'span' ).each(function() {
    $( this ).addClass( 'my-custom-class' );
});

Esto es apenas rascar la superficie de la funcionalidad de manipulación DOM que está disponible dentro de jQuery. Viendo a la API, bajo la sección de Manipulación, puedes ver cómo muchas opciones están disponibles para nosotros (junto con buenos ejemplos).

Para dar más ejemplos, también podemos:

determinar alto o ancho del documento, la ventana o cualquier elemento dado
tomar valores de cualquier elemento dado (asumiendo que ofrece esta habilidad)
conmutar nombres de clases
y mucho más

Recuerda que una de las cosas que hace a jQuery una solución atractiva para muchos desarrolladores es que todas las funciones y ejemplos que estamos viendo en este artículo son compatibles entre navegadores.

3. Manejo de Eventos

Si eres nuevo en JavaScript, entonces una cosa que es clave para entener cómo funciona con la página que está siendo mostrada en el navegador web es que responde a varios eventos.

Esto es, cuando un usuario da clic a un elemento, presiona una tecla o da clic al ratón, entonces el navegador levanta una señal correspondiente al evento ocurrido. Esto es lo que nos permite sacar ventaja de la interacción del usuario con el navegador.

Específicamente, cada vez que el usuario hace algo a la página, podemos responder usando un evento personalizado. El problema no todos los navegadores implementan eventos de la misma manera (esto es por lo que necesitamos una especificación, pero ese es contenido para otro artículo).

Afortunadamente, jQuery hace esto mucho más fácil definiendo un nombre consistente para todos los eventos de manera que podemos usar el mismo nombre para un evento al que estemos tratando de responder y funcionará a lo largo de los navegadores más importantes.

4. Animación

Cuando jQuery recién apareció, Flash aún era relativamente popular, y las animaciones generales a lo largo de la web no estaban completamente muertas.

Cuando hablamos de animación en el contexto de jQuery, sin embargo, no estamos hablando del mismo tipo de efectos o comportamientos que estábamos acostumbrados a ver con tecnología más vieja. En su lugar, estamos hablando de efectos que dan a los usuarios retroalimentación de que algo ha pasado en la pantalla. Además, es menos invasivo y puede agregar un sentido agradable de estilo a la página o aplicación cuando es usado correctamente (cualquier cosa puede ser abusada, sin embargo).

Puedes ver la API completa de efectos en esta página, pero vale la pena notar que los efectos de jQuery pueden variar desde manejar un simple desvanecimiento de elementos o deslizamiento de elementos hasta algo más complejo como manipular la consulta de efectos que están registrados para dispararse contra un elemento.

Aceptado, el último caso asume que tienes un poco de experiencia con la API de efectos, pero es algo que se vuelve natural dado el tiempo suficiente con la librería y la documentación.

5. Ajax

Si no estás familiarizado con Ajax, es esencialmente una manera en que una página web puede hacer una llamada al servidor, manejar la respuesta y actualizar una porción de la página sin tener que actualizar la página entera. Aunque la tecnología ha estado por ahí por bastante tiempo ya, aún es algo realmente interesante y puede proporcionar alguna funcionalidad realmente estupenda dentro del contexto de una página o aplicación web cuando se usa apropiada y efectivamente.

Aunque el soporte para Ajax no es tan malo como lo era hace cinco o diez años, la implementación para la API a lo largo de los navegadores puede variar ligeramente. Esto significa que se nos encomienda escribir código Ajax específicamente para un navegador que Microsoft proporciona, que Google proporciona, que Apple proporciona, que Chrome proporciona, etc.

Al menos, ese es el caso sin jQuery. Gracias a su soporte para Ajax, podemos sacar ventaja de Ajax en un número de diferentes maneras sin tener que entrar en inconsistencias de múltiples navegadores. De hecho, es trivialmente fácil de manejar peticiones GET y POST cuando también tenemos la habilidad de hacer llamadas más avanzadas usando el método $.ajax.

Una vez que te acostumbras a tener la API disponible en el núcleo de tu aplicación o a tu disposición, es difícil imaginar no trabajar con esta (o algo parecido).

Una Palabra Acerca de Extensibilidad

Una característica que muchos frameworks y librerías del lado del servidor ofrecen es la habilidad de crear extensiones para el código base. Librerías modernas del lado del cliente y frameworks permiten esto, y jQuery no es diferente.

Digamos, por ejemplo, que trabajas en un nicho particular en el cuál te encuentras creando la misma funcionalidad para cada proyecto. O qué si tienes un producto que estás vendiendo y tienes un poco de código personalizado que se necesita integrar con jQuery, pero podría requerir diferentes parámetros dependiendo del proyecto.

¿Qué haces entonces?

Afortunadamente, jQuery soporta complementos. Esto significa que nosotros, como desarrolladores, no solo tenemos la habilidad de aprovechar complementos que otros han escrito (algunos de los cuales están disponibles en el sitio web de jQuery, otros estando disponibles en GitHub), pero también podemos desarrollar nuestros propios complementos.

Podemos entonces reutilizar este código en nuestros propios proyectos, o hacerlos disponibles en sitios como GitHub para otros para ofrecer contribuciones, parches, características, etc.

Proyectos Adicionales de jQuery

Desde su concepción, jQuery ha crecido en más que solo una librería de JavaScript que nos ofrece la habilidad de desempeñar tanto operaciones simples como poderosas en una manera compatible con múltiples plataformas.

En adición a la librería principal, jQuery también resultó en otros dos proyectos notables que valen la pena mencionar antes de terminar este artículo. Aunque no vamos a ver los detalles de qué permite cada proyecto, echaremos un vistazo de alto nivel a cada proyecto, no por otra razón que estar conscientes de qué está disponible por si lo necesitáramos para trabajos futuros.

jQuery UI

Desde la página de inicio de jQuery UI:

jQuery UI es un conjunto curado de interacciones de interfaz de usuario, efectos, widgets y temas construidos sobre la Librería JavaScript jQuery. Ya sea que estés construyendo aplicación web altamente interactivas o solo necesites agregar un selector de fecha a un control de formulario, jQuery UI es la opción perfecta.

Esta librería fue publicada por primera vez en 2007, cerca de un año después de jQuery mismo. Trabaja como una librería complementaria a jQuery en el sentido de que saca ventaja de la compatibilidad multi-plataforma de la librería para ayudar a crear widgets que puedan ser usados a lo largo del sitio web.

Muchos de los complementos incluyen piezas comúnmente usadas de funcionalidad. Por ejemplo:

También hay características avanzadas como efectos, utilidades e interacciones. Todo lo que hemos cubierto hasta ahora (así como las que no) incluyen una amplia variedad de callbacks, atributos y funciones que nos permiten interactuar con ellos en el grado más completo.

Todas las características mencionadas también ofrecen varios temas para asegurar que se ajustan al aspecto de tu sitio web. Finalmente, todas las características delineadas aquí incluídas en el sitio están bien documentadas.

jQuery Mobile

Desde la página de inicio de jQuery Mobile:

jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para hacer sitios web responsivos y aplicaciones que sean accesibles en todos los smartphones, tablets y computadoras de escritorio.

Esta librería es la introducción más reciente a la familia de librerías siendo liberado en 2010 (con la última liberación estable en 2014).

Como su contraparte UI, ofrece una API bien documentada y temas personalizados que son ideales para los diferentes dispositivos que tu proyecto podría contemplar.

Mientras que las dos librerías anteriores ofrecen un conjunto de características multi-plataforma que nos permiten escribir jQuery y widgets de acompañamiento en una manera relativamente fácil, jQuery Mobile incluye un framework CSS que nos permite también diseñar interfaces de usuario que son ideales para la naturaleza de nuestro respectivo proyecto.

El framework incluye:

Desde ahí, la librería ofrece lo que esperas de un proyecto orientado a hacer el desarrollo web mucho más fácil para distintos dispositivos móviles. Estos incluyen cosas como:

un conjunto de iconos consistente
eventos que funcionan en una plétora de dispositivos
propiedades para la página activa
un número de widgets que son ideales para interfaces móviles

Finalmente, el número de navegadores que aún están disponibles y son usados en la naturaleza es alto. Aunque hemos visto un decremento en el uso de versiones más viejas de Internet Explorer y una adopción más amplia de Chrome, aún tenemos ciertos usuarios que se apegan a navegadores más viejos por un número de razones.

Algunas veces, estos usuarios están en navegadores más viejos por la naturaleza de la intranet de su compañía. Algunas veces tiene que ver el los dispositivos móviles o teléfonos que les han sido asignados para su trabajo. Y algunas veces simplemente tiene que ver con la inhabilidad de actualizar a algo mejor.

No importa, de todos modos. jQuery Mobile ofrece soporte para la mayoría de navegadores y sistemas operativos que están actualmente disponibles. Si no estás seguro de si la plataforma que estás abordando es soportada por la librería, siempre puedes revisar en la página de soporte del navegador.

Recursos Adicionales

Conclusión

Entender lo que es jQuery (y lo que no es) y cómo está relacionado con JavaScript es importante para que puedas saber que se está haciendo por ti y lo que puedes hacer cuando necesitas trabajar con la librería.

Como se mencionó previamente, algunos podrían argumentar que necesitas aprender JavasScript primero y después aprender jQuery, otros podrían argumentar que aprender jQuery es una gran forma de trabajar de manera inversa hacia JavaScript.

Cual sea el caso, jQuery es una librería de hace mucho tiempo en le economía JavaScript y es una de las más usadas en un número de proyectos bastantes populares (como WordPress) así que aprenderlo te dará una ventaja en muchas maneras diferentes.

JavaScript se ha convertido en uno de los lenguajes de-facto para trabajar en la web. No es sin sus curvas de aprendizaje, y hay muchos frameworks y librerías para mantenerte ocupado, también. Si estás buscando recursos adicionales para estudiar o usar en tu trabajo, revisa lo que tenemos disponible en el mercado de Envato.

Si eso no es suficiente, hay bastante documentación y código fuente disponible para que revises y leas, de igual manera. También hay muchos complementos disponibles y un blog activo para mantenerte al tanto de todas la noticias ocurriendo con el desarrollo de la librería.

Para aquellos interesados en JavaScript (particularmente en el contexto de WordPress), siéntanse libres de seguirme en mi blog y/o Twitter en @tommcfarlin. Puedes ver todos mis cursos y tutoriales en mi página de perfil, también.

No dudes en dejar cualquier pregunta o comentario en la sección de abajo y trataré de responder cada una de ellas.