Saltar al contenido principal

Meteor.js: Una guía completa

Meteor.js, comúnmente conocido como Meteor, es un marco de JavaScript de código abierto que permite a los desarrolladores construir aplicaciones web y móviles utilizando una única base de código. Proporciona una solución de pila completa mediante la integración de funcionalidades de frontend, backend y base de datos de manera transparente. En este tutorial, exploraremos la introducción, historia, características y ejemplos de Meteor.js.

Introducción​

Meteor.js fue lanzado por primera vez en 2012 por Meteor Development Group y ha ganado popularidad entre los desarrolladores debido a su simplicidad y productividad. Sigue un modelo de programación reactiva, donde cualquier cambio realizado en los datos se actualiza automáticamente en la interfaz de usuario en tiempo real, sin requerir intervención manual.

El marco está construido sobre Node.js y utiliza MongoDB como su base de datos predeterminada. También ofrece soporte para varios marcos de frontend como React, Angular y Blaze, lo que permite a los desarrolladores elegir su pila de tecnología preferida.

Historia​

Meteor.js fue desarrollado inicialmente como un proyecto de investigación llamado Skybreak por Meteor Development Group. Su objetivo era simplificar el proceso de construcción de aplicaciones web en tiempo real mediante la provisión de una plataforma unificada para el desarrollo en el cliente y en el servidor. El marco fue posteriormente renombrado a Meteor y lanzado al público en 2012. Desde entonces, ha sufrido varias actualizaciones y mejoras, convirtiéndose en un marco maduro y ampliamente utilizado en el ecosistema de JavaScript.

Características​

1. Integración de pila completa​

Una de las características clave de Meteor.js es su capacidad para manejar tanto el desarrollo en el cliente como en el servidor de manera transparente. Los desarrolladores pueden escribir código para el frontend y el backend dentro del mismo proyecto, lo que resulta en una base de código limpia y organizada. Esta integración elimina la necesidad de utilizar marcos o bibliotecas adicionales, simplificando el proceso de desarrollo.

Aquí tienes un ejemplo de una aplicación simple de Meteor.js:

// cliente/main.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Template.hello.onCreated(function helloOnCreated() {
  // Usa ReactiveVar para almacenar valores reactivos
  this.counter = new ReactiveVar(0);
});

Template.hello.helpers({
  counter() {
    // Accede al valor reactivo
    return Template.instance().counter.get();
  },
});

Template.hello.events({
  'click button'(event, instance) {
    // Actualiza el valor reactivo
    instance.counter.set(instance.counter.get() + 1);
  },
});

// servidor/main.js
import { Meteor } from 'meteor/meteor';

Meteor.startup(() => {
  // Código del lado del servidor
});

En el ejemplo anterior, tenemos una aplicación simple con un botón que incrementa un valor de contador. El código está estructurado en directorios de lado del cliente y de lado del servidor, lo que permite una fácil separación de responsabilidades.

2. Sincronización de datos en tiempo real​

Meteor.js proporciona sincronización de datos en tiempo real entre el cliente y el servidor. Cualquier cambio realizado en los datos en el servidor se refleja automáticamente en el cliente, sin necesidad de actualizaciones manuales. Esta característica se logra mediante el uso del Protocolo de Datos Distribuidos (DDP), que establece una conexión WebSocket entre el cliente y el servidor.

Aquí tienes un ejemplo de sincronización de datos en tiempo real con Meteor.js:

// servidor/main.js
import { Meteor } from 'meteor/meteor';

Meteor.publish('todos', function () {
  // Publica datos al cliente
  return Todos.find();
});

// cliente/main.js
import { Template } from 'meteor/templating';
import { Meteor } from 'meteor/meteor';

import './main.html';

Template.todos.onCreated(function todosOnCreated() {
  // Suscribe a los datos publicados
  Meteor.subscribe('todos');
});

Template.todos.helpers({
  todos() {
    // Accede a los datos sincronizados
    return Todos.find();
  },
});

Template.todos.events({
  'click #addTodo'(event, instance) {
    event.preventDefault();
    const text = instance.$('#todoText').val();
    // Inserta un nuevo elemento de tarea
    Todos.insert({ text });
    instance.$('#todoText').val('');
  },
});

En el ejemplo anterior, tenemos una aplicación simple de lista de tareas donde los datos se sincronizan en tiempo real. El servidor publica la colección todos y el cliente se suscribe a ella. Cualquier cambio realizado en la colección en el servidor se refleja automáticamente en el cliente.

3. Código isomórfico​

Meteor.js permite a los desarrolladores escribir código isomórfico, lo que significa que el mismo código puede ejecutarse tanto en el cliente como en el servidor. Esta característica permite compartir datos de manera transparente y reduce la duplicación de código. Los desarrolladores pueden definir código compartido en un directorio común, y puede ser accedido tanto por el cliente como por el servidor.

Aquí tienes un ejemplo de código isomórfico en Meteor.js:

// common/utils.js
export function capitalize(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

// cliente/main.js
import { Template } from 'meteor/templating';
import { capitalize } from '../common/utils.js';

Template.hello.helpers({
  message() {
    const name = 'meteor.js';
    return `Hola, ${capitalize(name)}!`;
  },
});

// servidor/main.js
import { Meteor } from 'meteor/meteor';
import { capitalize } from '../common/utils.js';

Meteor.startup(() => {
  console.log(capitalize('meteor.js'));
});

En el ejemplo anterior, la función capitalize se define en el archivo common/utils.js e se importa tanto en el código del lado del cliente como del servidor. Esto nos permite capitalizar el nombre en la plantilla del lado del cliente y registrar el nombre capitalizado en el lado del servidor.

Ejemplos

1. Meteor.js + React​

Meteor.js proporciona soporte incorporado para React, lo que facilita la construcción de aplicaciones web poderosas y reactivas. Aquí tienes un ejemplo de una aplicación simple de Meteor.js + React:

// cliente/main.js
import React from 'react';
import { render } from 'react-dom';
import { Meteor } from 'meteor/meteor';

import App from '../imports/ui/App.js';

Meteor.startup(() => {
  render(<App />, document.getElementById('root'));
});

// imports/ui/App.js
import React, { useState } from 'react';
import { useTracker } from 'meteor/react-meteor-data';

import { Todos } from '../api/todos.js';

export default function App() {
  const [text, setText] = useState('');

  const todos = useTracker(() => {
    // Fuente de datos reactiva
    return Todos.find().fetch();
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    Todos.insert({ text });
    setText('');
  };

  return (
    <div>
      <h1>Aplicación de Tareas</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={text}
          onChange={(event) => setText(event.target.value)}
        />
        <button type="submit">Agregar Tarea</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo._id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

En el ejemplo anterior, tenemos una aplicación simple de lista de tareas construida con Meteor.js y React. El componente App se encarga de la representación de la lista de tareas y del formulario. Utiliza el gancho useTracker proporcionado por Meteor para suscribirse a la colección todos y actualizar automáticamente la interfaz de usuario cada vez que los datos cambian.

2. Meteor.js + Blaze​

Blaze es un marco de frontend proporcionado por Meteor.js, que permite el desarrollo rápido de interfaces de usuario. Aquí tienes un ejemplo de una aplicación simple de Meteor.js + Blaze:

// cliente/main.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Template.hello.onCreated(function helloOnCreated() {
  this.counter = new ReactiveVar(0);
});

Template.hello.helpers({
  counter() {
    return Template.instance().counter.get();
  },
});

Template.hello.events({
  'click button'(event, instance) {
    instance.counter.set(instance.counter.get() + 1);
  },
});
<!-- cliente/main.html -->
<head>
  <title>Ejemplo de Meteor Blaze</title>
</head>

<body>
  <h1>Bienvenido a Meteor Blaze</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Haz clic</button>
  <p>Has presionado el botón {{counter}} veces.</p>
</template>

En el ejemplo anterior, tenemos una aplicación simple que muestra un botón y un contador. Cada vez que se hace clic en el botón, el valor del contador se incrementa y la interfaz de usuario se actual