PDF de programación - Desarrollo de sitios web fácil y en tiempo real con Meteor

Desarrollo de sitios web fácil y en tiempo real con
Meteor
Implementación rápida de aplicaciones basadas en datos que
responden de forma casi instantánea a la interacción del usuario

David Berube ([email protected])
Propietario
Berube Consulting

06-05-2013

Debido a la ubicuidad de la web, hasta los menores retardos en la entrega de datos
resulta irritante para los usuarios. Quieren que los datos se actualicen de forma inmediata.
Desafortunadamente, la tecnología web aun no ha podido afrontar totalmente esta demanda
de acceso en tiempo real. Si bien el acceso a los datos se está estandarizando rápidamente
en varias clases de Object-Relational Mapping (ORM), la comunicación en tiempo real no
tiene esa solución. Este artículo habla sobre Meteor, una nueva y fascinante infraestructura de
JavaScript que tiene como objetivo resolver este problema.

¿Qué Es Meteor?

Meteor es una nueva infraestructura de JavaScript que tiene como objetivo automatizar y
simplificar el desarrollo de aplicaciones web que actúan en tiempo real. Usa la comunicación en
tiempo real mediante un protocolo llamado Distributed Data Protocol (DDP), que es admitido en
navegadores nuevos que usan WebSockets o en navegadores anteriores que usan Asynchronous
JavaScript + XML (Ajax) long polling. En ambos casos, la comunicación navegador-servidor es
transparente.

El protocolo DDP está diseñado para trabajar con colecciones de documentos JavaScript
Serialized Object Notation (JSON), facilitando la creación, actualización, eliminación, consulta y,
por supuesto, visualización de documentos JSON. Como DDP es un protocolo de código abierto,
se puede conectar con cualquier cliente o almacén de datos. La novedad es que funciona con
MongoDB.

De hecho, Meteor proporciona dos bases de datos: una base de datos caché del lado del cliente
y una base de datos MongoDB en el servidor. Cuando un usuario modifica algún dato—haciendo

© Copyright IBM Corporation 2013
Desarrollo de sitios web fácil y en tiempo real con Meteor

Marcas
Pagina 1 de 11

developerWorks®

ibm.com/developerWorks/ssa/

clic en Save, por ejemplo,—el código JavaScript que se ejecuta en el navegador actualiza la
entrada correspondiente de la base de datos en MongoDB local y luego realiza una solicitud
de DDP al servidor. El código actúa de inmediato como si la operación hubiera sido exitosa
porque no necesita esperar la respuesta por el servidor. Mientras tanto, el servidor se actualiza
en segundo plano. Si se produce un error en la operación del servidor o si devuelve un resultado
inesperado, el código JavaScript del lado del cliente se reajusta inmediatamente según los datos
devueltos recientemente del servidor. Este ajuste se denomina compensación de latencia y
genera una cantidad de velocidad adicional que el usuario percibe.

Incluso el sistema de plantillas de Meteor está diseñado específicamente para facilitar la
comunicación en tiempo real. En la mayoría de las infraestructuras web, es posible combinar
fácilmente lenguaje de marcado de hipertexto (HTML)—u otro lenguaje de marcado equivalente
a HTML, como HTML Abstraction Markup Language (Haml)—con código. Esto permite insertar
fácilmente valores dinámicos de la base de datos en páginas que se envían al usuario. Después
de eso, uno es responsable de colocar el sistema en su lugar para observar los cambios en
los datos y luego actualizar la marcación. El sistema de plantillas de Meteor, sin embargo,
está diseñado para grabar a qué datos se accede desde una plantilla y para configurar
automáticamente devoluciones de llamadas para cambiar ese HTML cuando se modifican los
datos subyacentes, haciendo que las plantillas en tiempo real sean más simples y rápidas.
Ejemplo: competencia de popularidad de enlaces
La funcionalidad de las plantillas de Meteor puede hacer que sea más fácil escribir una gran
variedad de aplicaciones. Por ejemplo, suponiendo que desea crear un sitio donde los usuarios
puedan introducir enlaces—es decir, localizadores universales de recursos (URLs)—y darles una
puntuación, con los URLs que ganan la competencia de popularidad ubicados en los primeros
lugares de una lista. Con Meteor, puede escribir fácilmente esa aplicación para que los usuarios
vean los 65 votos de otros usuarios en tiempo real.
Instalación de Meteor
Para instalar Meteor, escriba el código que se muestra en un terminal X Listado 1 del SO Linux® o
Mac® . Meteor no es compatible con Microsoft® Windows®.

Listado 1. Cómo instalar Meteor

curl https://install.meteor.com > install_meteor.sh
chmod u+x install_meteor.sh
./install_meteor.sh

Ahora, puede crear un proyecto nuevo.
Creación de un proyecto nuevo
El comando meteor automatiza el proceso de creación de un proyecto nuevo con todo lo que
Meteor necesita para su operación. Escriba los comandos que se muestran en el Listado 2 para
crear un proyecto llamado realtime_links.

Desarrollo de sitios web fácil y en tiempo real con Meteor

Pagina 2 de 11

ibm.com/developerWorks/ssa/

developerWorks®

Listado 2. Cómo crear un proyecto nuevo en Meteor

meteor realtime_links
cd realtime_links

Meteor crea un directorio que contiene un archivo HTML, un archivo JavaScript, y un archivo
de hoja de estilo en cascada (CSS). El último es un archivo CSS estándar, pero vale la pena
discutir sobre los primeros dos. Se pueden descargar las versiones completas de los archivos
realtime_links.html y realtime_links.js desde Download .
Archivo realtime_links.html
Listado 3 muestra la cabecera y fragmentos del cuerpo del archivo realtime_links.html.

Listado 3. Cabecera y fragmentos del cuerpo de realtime_links.html

<head>
<title>Realtime Links Demo</title>
</head>

<body>
{{> header }}
{{> link_list }}
{{> add_new_link }}
</body>

Como puede ver, el comienzo de la plantilla HTML es directo. No es necesario preocuparse por
incluir etiquetas BODY , declaraciones DOCTYPE ni archivos JavaScript o CSS. Meteor se encarga de
todo eso. Para obtener más información sobre la unión de archivos JavaScript y CSS en Meteor,
consulte Recursos y siga el enlace al sitio web de Meteor.

La sintaxis {{> significa "representar esta plantilla". Como se muestra, realtime_links.html
representa tres plantillas:

• header es una simple cabecera que muestra el número de enlaces en la base de datos.
• link_list muestra la lista de enlaces y los votos asociados a ellos.
• add_new_link es una forma de añadir enlaces nuevos.

Listado 4 muestra la plantilla header .

Listado 4. Plantilla realtime_links.html header

<template name="header">

<h1>The Link Collection</h1>

<p>We currently have {{collection_size}} links.</p>

</template>

La plantilla header representa simplemente una etiqueta h1 y una breve descripción del tamaño de
la colección. El método collection_size está definido en el archivo JavaScript, realtime_links.js
(que abordaremos en la sección siguiente). Meteor observa automáticamente qué partes de datos

Desarrollo de sitios web fácil y en tiempo real con Meteor

Pagina 3 de 11

developerWorks®

ibm.com/developerWorks/ssa/

son incorporados por la plantilla. Entonces, cuando se actualiza el tamaño de la colección, la
plantilla header se actualiza automáticamente.

Observe que la sintaxis {{ ... } que se utiliza aquí es similar a <%= ... %> de Ruby en Rails o
a <?= ... ?> en PHP. Puede interpolar código arbitrario, de modo que puede insertar cualquier
expresión dinámica útil de esa manera.

Listado 5 muestra la plantilla link_list .

Listado 5. Plantilla realtime_links.html link_list

<template name=
"link_list">

<ul>

{{#each links }}

<li> {{> link_detail }} </li>

{{/each }}

</ul>

</template>

Como puede ver, el código que se muestra en Listado 5 es una lista de enlaces. El método links
del archivo realtime_links.js JavaScript proporciona esta lista. La plantilla link_detail representa
cada enlace. Tenga en cuenta que no es necesario pasar ningún argumento porque los bucles
#each de Handlebars establecen el contexto actual para que cada iteración sea el objeto actual.
En otras palabras, los métodos locales de la plantilla link_detail se interpretan correctamente
como métodos de cada objeto de enlace.

Listado 6 muestra la plantilla link_detail , que controla los datos que se muestran para cada
enlace individual.

Listado 6. Plantilla realtime_links.html link_detail

<template name="link_detail">

<div id="link-{{id}}">

<h1>{{url}}</h1>

<p><strong>Stats:</strong> up: {{thumbs_up}} down: {{thumbs_down}}
net score: {{score}}</p>

<input type="button" value="Thumbs Up"
class="thumbs_up" url="{{url}}" />
<input type="button" value="Thumbs Down"
class="thumbs_down" url="{{url}}" />

</div>

</template>

Desarrollo de sitios web fácil y en tiempo real con Meteor

Pagina 4 de 11

ibm.com/developerWorks/ssa/

developerWorks®

El elemento h1 simplemente muestra el URL del enlace actual. Luego, hay un breve listado de
estadísticas que incluye la cantidad de votos positivos y negativos que obtuvo un enlace y su
puntuación en la red, que resulta de la diferencia entre los dos valores. Finalmente, hay dos
botones: uno de pulgar hacia arriba, o voto positivo, y uno de pulgar hacia abajo, o voto negativo.
El archivo JavaScript define el comportamiento de estos botones, pero existe una plantilla más
que debemos examinar antes de profundizar en esto.

Listado 7 muestra la plantilla add_new_link .

Listado 7. Plantilla realtime_links.html add_new_link

<template name="add_new_link">

<div id="new_link_form">

URL: <input id="url">

<input type="button" value="Click" id="add_url" />

</div>

</template>

Esta plantilla consta simplemente de un campo de entrada de texto y un botón, que en conjunto
forman la interfaz para añadir nuevos URLs a la lista.
Archivo realtime_links.js

El código JavaScript de realtime_links.js controla el acceso a los datos y las devoluciones
de llamadas de eventos desde su programa, tanto del lado del cliente como del servidor.
La sentencia if (Meteor.is_client) marca l