Tutorial jQuery Mobile + Knockout (I): Sentando las bases

Este post forma parte de una serie de cuatro:

Sentando las bases

Tras la buena acogida que tuvo el tutorial de nodejs y express, me he decidido a preparar otro tutorial que sirva de introducción para un par de librerías con las que he estado jugando últimamente.

Igual que en el anterior tutorial, quiero dejar claro que esto es sólo una pequeña introducción a dos librerías que me parecen útiles. No se trata de un catálogo de buenas prácticas y habrá muchos puntos que puedan (y deban) ser mejorados.

En este caso vamos a crear una pequeña aplicación web para dispositivos móviles usando jQuery Mobile y Knockout. Como creo que es importante conocer las bases para poder entender lo que estamos haciendo, antes de empezar a implementar nada vamos a presentar a nuestros nuevos amigos.

jQuery Mobile

jQuery Mobile es un framework que nos permite crear aplicaciones para dispositivos móviles. Por tanto, está optimizado para su uso con pantallas de pequeño tamaño e interfaces táctiles. Se encarga de ajustar el interfaz de usuario de los controles estándar html para que sean más atractivos y manejables en un entorno móvil.

Se ejecuta por completo en el lado cliente, en este caso, el browser del dispositivo. Para emplearlo, debemos añadir lo siguiente a nuestra página web:

	<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
	<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>

Podemos usar la versión descargada o enlazar directamente a una versión online, tal y como explican en su página de descarga.

jQuery Mobile se basa en la asignación de roles a los distintos elementos html para atribuirles determinadas funciones dentro de la aplicación. A partir de estos roles, se ajusta el aspecto del elemento. Para asignar los roles a los elementos se usa el atributo data-role:

	<div id="home" data-role="page"></div>

Una aplicación desarrollada con jQuery Mobile se estructura alrededor del concepto de página. Una página no es más que un div que tiene asignado el rol page, como en el ejemplo anterior. En un único documento html podremos tener varias páginas simplemente añadiendo varios divs con el atributo data-role="page", y jQueryMobile se encargará de mostrar en cada momento únicamente el div correspondiente a la página que esté activa.

Además del rol usado para marcar las páginas, existen otros roles muy útiles como header, footer, etc. que permiten representar otros elementos dentro de la página, o listview, button, etc. que se usan para crear controles con los que el usuario puede interactuar.

Si quieres conocer en profundidad las opciones que ofrece jQuery Mobile, te recomiendo que consultes su documentación.

Knockout

Knockout es una librería diseñada para aplicar cómodamente el patrón MVVM en aplicaciones javascript. Al igual que jQuery Mobile se ejecuta por completo en el browser por lo que deberemos incluirla en el código de nuestras páginas:

	<script type="text/javascript" src="js/knockout-2.0.0.js"></script>

Para poder trabajar con Knockout es fundamental conocer el patrón Model-View-ViewModel. Resumiéndolo (mucho) podríamos decir que se basa en organizar la aplicación en torno a 3 conceptos:

  • Model. Es el modelo completo de la aplicación, donde reside la lógica de negocio y todas esas cosas importantes. Knockout no se mete en esta parte y puedes implementarla como quieras. Lo más habitual es que resida en un servidor y la aplicación se comunique con él a través de AJAX.
  • View. La vista, dedicada únicamente a mostrar información. No contiene ningún tipo de lógica, ni siquiera lógica relacionada con el interfaz de usuario, porque para eso está la última parte del trío.
  • ViewModel. El modelo de presentación, que se encarga de adaptar el modelo de la aplicación a las necesidades de la vista y contiene además toda la lógica relacionada con el interfaz de usuario, como por ejemplo cuándo se debe habilitar un control o qué hay que hacer cuando se pulsa un botón.

Knockout nos ofrece una manera muy sencilla de enlazar View y ViewModel a través de data binding. Este data binding se hace de forma declarativa usando atributos data-bind:

    <h1 data-bind="text: customerName"></h1>

Las posibilidades que ofrece Knockout para realizar el data binding son de lo más variado y podéis consultarlas en la documentación de Knockout.

Para que funcione esto del data binding es fundamental poder detectar los cambios en los valores de los controles para propagarlos al ViewModel, pero también es necesario poder detectar los cambios en el ViewModel para propagarlos a la vista. En este aspecto Knockout cuenta con su propia implementación del patrón observer, a través de funciones como ko.observable.

¿Cuándo empezamos?

En el siguiente post veremos cómo es la aplicación de ejemplo que vamos a hacer en este tutorial y prepararemos la estructura de páginas de jQuery Mobile que vamos a tener.

Este tutorial continúa con: Creando las vistas con jQuery Mobile.

5 comentarios en “Tutorial jQuery Mobile + Knockout (I): Sentando las bases

  1. Pingback: Tutorial jQuery Mobile + Knockout (y IV): Configurando el Data Binding « Koalite's blog

  2. Sergio Rodriguez dijo:

    El mejor tutorial sobre node + express que he encontrado en la web. Mi agradecimiento por este excelente trabajo, ojalá todos los tutoriales de la red fuese como éste. Un saludo!

  3. Voy a adaptar mi web para que se vea bien en dispositivos móviles y creo que esto me va a venir muy bien, jquery mobile ya lo conocía pero knockout no a si que voy a seguir leyendo el resto de tutoriales a ver que tal.

    Muchas gracias

  4. Hola como estas? vi tu tutorial y me parecio excelente, estuve trabajando en un proyecto bastante grande con phonegap, jquery y knockout, y la verdad que no tuvimos buenos resultados a nivel de performance, estuve leyendo y vi respuestas en stackoverflow en las que no recomendaban utilizar multiples paginas html para crear una web app porque cada pagina html se abria en una nueva ventana del navegador nativo. sabes algo de esto? tenes algunos tips para reducir el consumo de memoria?. Desde ya muchas gracias. Saludos

  5. Hola Daniel,

    En principio, todas las pages de jQueryMobile deberían cargarse en la misma instancia del navegador, porque lo que se hace es manipular el DOM de la primera página que se carga.

    Lo que sí es cierto es que jQueryMobile no es un prodigio de la velocidad, más bien al contrario, resulta pesado y, si pretendes usarlo en dispositivos que vayan un poco justos, puede no ser la mejor alternativa. No sé si las últimas versiones han mejorado esto, pero en las primeras se notaba bastante si tenías páginas con muchos controles.

    En cuanto al consumo de memoria, te recomiendo que uses un profiler para saber realmente donde está el problema. En el dispositivo es más complicado, pero puedes empezar por hacerlo en el escritorio usando las Chrome Dev Tools y ver si sacas algo en claro.

    Un saludo,

    Juanma

Comentarios cerrados.