Diferencias entre jQuery y jQuery Mobile

Explicamos la diferencia que existe entre jQuery Mobile y su estructura de código base, jQuery.

jQuery Mobile es un sistema de interfaz de usuario diseñado para los teléfonos móviles, el cual se construye sobre la base de jQuery. Es decir, jQuery es necesario para jQuery mobile funcione.

A diferencia de otros frameworks para teléfonos móviles con objetivos similares, jQuery mobile ofrece soporte para todas las principales plataformas móviles, tabletas, lectores electrónicos y de escritorio, y no sólo los navegadores webkit móviles. Una de las características más notables del framework, es su sistema de navegación Ajax, el cual utiliza transiciones de página animadas.

En resumen:

• jQuery Mobile es un framework para la creación de aplicaciones web para móviles.
• Funciona en todos los teléfonos inteligentes y las tabletas populares.
• Utiliza HTML5 y CSS3 para diseñar páginas con el menor scripting posible.

¿Qué hay de nuevo?

Una cosa acerca de jQuery Mobile que puede parecer distinta para los nuevos usuarios, es la navegación Ajax. Cuando se hace uso exclusivo de jQuery, el usuario se acostumbra a realizar la inclusión de JavaScript en cada página y luego utilizar la función de DOM ready ( $(function(){ … } o $(document).ready(function(){ …. }) para llamar todas las actividades y tareas a realizarse.

Debido a que jQuery Mobile utiliza un tipo de navegación con Ajax, todas las páginas que se van mostrando son añadidas al mismo DOM de la primera página, por lo que no se vuelven a cargar todos los scripts que se encuentran dentro de la etiqueta head.

Cuando la página siguiente se cargue a través de ajax, te darás cuenta de que las cosas que definiste dentro de la función DOM ready no funcionarán en la segunda página. La solución a esto es vincular el evento pageInit. Aquí te mostramos algunos ejemplos que te ayudarán a iniciar tu aprendizaje:

$(document).on('pageinit', function(){ //Esto se llamará cada vez que se cargue una página nueva
...
});

Si lo que queremos es enfocar esta sentencia a una determinada página, lo indicado para realizarlo es simplemente agregar el id de la página:

$(document).on('pageinit','#pag2', function(){ //Esto se llamará únicamente cuando se cargue la página "pag2"
...
});

La comprensión de los nuevos eventos de página te ayudará mucho cuando comiences a trabajar con jQuery Mobile.

Diferencia entre la base y lo móvil

El framework jQuery fue puramente diseñado para simplificar y estandarizar el scripting a través de navegadores. Se centra en las cosas de bajo nivel: la creación de elementos, la manipulación del DOM, la gestión de los atributos, realizando peticiones HTTP, etc

Por otro lado, tenemos complementos que te ayudan a manejar el aspecto visual de manera sencilla, uno de estos es jQuery UI. jQuery UI es un conjunto de componentes y características integradas en la parte superior de la interfaz de usuario de jQuery, lo que significa que necesita jQuery para trabajar. Botones, cuadros de diálogo, barras de desplazamiento, pestañas, animaciones más avanzadas, funcionalidad de arrastrar y soltar, eso es lo que nos ofrece jQuery UI.

Tanto jQuery como jQuery UI están diseñados para ser añadidos a tu sitio, ya sea para dispositivos de escritorio o móviles. Si lo que requieres es añadir una característica particular, jQuery o jQuery UI podrían ser capaces de ayudarte.

jQuery Mobile, sin embargo, es un framework completo. Está pensado para que sea su punto de partida para un sitio móvil. Se hace uso de características de jQuery y de jQuery UI para proporcionar tanto componentes de interfaz de usuario como funciones de la API para la creación de sitios móviles. A pesar de ser un framework completo, es modular, es decir puedes utilizar tanto o tan poco de él como desees, pero en sí jQuery Mobile tiene la capacidad de controlar todo el área de visualización del móvil de una manera fácil si tú se lo permites.

Otra diferencia importante es que jQuery y jQuery UI pretenden ser una capa en la parte superior de tu código HTML y CSS. Simplemente necesitas dejar el lenguaje de marcado sin modificaciones y las mejoras y beneficios ofrecidos por jQuery llegarán por sí solos, claro una vez que hemos añadido el vínculo al código del framework al inicio de nuestra página. Sin embargo, jQuery Mobile te da la posibilidad de definir en que partes deseas que aparezcan los componentes, todo esto utilizando HTML simple, por ejemplo:

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">México</a></li>
    <li><a href="#">España</a></li>
    <li><a href="#">Venezuela</a></li>
    <li><a href="#">Chile</a></li>
</ul>

El atributo data-role le dice a jQuery Mobile que debe convertir esta lista en un componente de interfaz de usuario móvil y los atributos de data-inset y data-filter establecen las propiedades para ello, sin tener que escribir una sola línea de código JavaScript. Los componentes jQuery UI, por otro lado, son normalmente creados al escribir unas pocas líneas de Javascript, necesarias para crear una instancia del componente en el DOM.