Meteor JS: Qué es y primeros pasos

Y llegamos ya al final de nuestra serie de artículos dedicados a los 10 framework JavaScript más interesantes de 2020. Ya hemos hablado de los más conocidos como Angular o React pero también hemos comentado y dado ejemplos de otros como VUE o Aurelia que valen la pena dejar que nos sorprendan con sus capacidades.

Hoy toca hablar de Meteor JS que más que un framework o biblioteca JavaScript debemos entenderlo más como una plataforma completa que permite desarrollar aplicaciones web de alto rendimiento, con manejo de datos en tiempo real y que nos permite desarrollar MVP’s en muy poco tiempo.

Su principal diferencia con relación a otros marcos consiste en lugar de sondear cada pocos segundos al servidor para obtener actualizaciones, una aplicación en Meteor mantiene una conexión de bajo nivel de datos a un servidor utilizando un protocolo llamado DDP. Este protocolo permite que el servidor envíe datos al cliente solo en el instante en que esta cambia aprovechando su conexión continua con él.

Fuente imagen: https://www.habilelabs.io/meteor-js-tutorial-for-beginners/

Por qué usar Meteor Framework

Como iba diciendo, con Meteor puedes desarrollar aplicaciones que sean reactivas y se actualicen en tiempo real. Podemos hacer prototipos de un proyecto o MVPs en tiempo récord, prácticamente en segundos, centrándonos en lo importante y no en perder el tiempo con su configuración inicial pero Meteor tiene también otras ventajas en comparación con otros Framework:

  • Menos código: Meteor se presenta diseñado en torno a un modelo de programación reactiva y proporciona los elementos necesarios para poder comenzar nuestro proyecto como Node.js y MongoDB. Su máxima es poder hacer más con menos. Por lo que nos permite generar aplicaciones completas con muy poco código.
  • Con JavaScript a todas partes: Meteor está soportado sobre NodeJS y a su vez con Javascript y la comunicación con Mongo se hace mediante JSON. Esto se traduce en que podemos utilizar código JavaScript procedente de otras bibliotecas y no tener que depender de otros lenguajes.
  • Las cosas fáciles con MongoDB: MongoDB es un motor de base de datos flexible, ideal para comenzar un proyecto en donde no conocemos todavía los requisitos que vamos a necesitar y por tanto tampoco la estructura que tendrá la base de datos finalmente. Eso sí, si es tu primer contacto deberás cambiar tu forma ver la estructura de la base de datos pues MongoDB no es relacional.
  • Verás tu avance en tiempo real: Durante el desarrollo los cambios que haces se “compilan” automáticamente y la página se recarga mostrando los cambios.
  • Despliegue rápido: Meteor proporciona la posibilidad de desplegar nuestro proyecto mediante línea de comandos y así también aplicaciones de muestra disponibles en el sitio principal de Meteor que nos harán ahorrar mucho tiempo.
  • Su comunidad: La comunidad es excelente, si tienes dudas o necesitas ayuda puedes ir al foro y muy seguramente alguien te asistirá.

Qué necesitamos para comenzar nuestro aprendizaje con Meteor

Es posible que tras lo dicho todavía no te atrevas a probar Meteor. Como se ha mencionado si algo positivo tiene Meteor frente otros framework es que permite ponernos a trabajar con él muy rápidamente y con gran sencillez.

Instalación:

Mi recomendación es siempre instalar para nuestros proyectos la última versión de Meteor disponible. Así que lo mejor es primer consultar desde su página web que versión se encuentra disponible para descargar e instalar. Por ejemplo, en el momento de escribir estas líneas Meteor se encuentra en su versión 1.10.2 y sus novedades pueden consultarse aquí.

Tanto si eres eres usuario de GNU/Linux como de Apple MacOS, el proceso de instalación es simple y fácil. Abrimos el terminal y ejecutamos la siguiente instrucción con curl.

curl https://install.meteor.com/ | sh

Esto descargará e instalará Meteor en nuestro sistema.

meteor02

Para los usuarios de Windows, antes de continuar debemos instalar primero Chocolatey y luego ejecutar lo siguiente desde el cmdlet:

choco install meteor

Proyecto de ejemplo:

Antes de comenzar conviene echar un vistazo a los comandos disponibles para trabajar con este framework. Desde la misma línea de comandos basta con escribir “meteor” y veremos una lista de comandos y opciones disponible. Por ejemplo, para crear nuestro primer “proyecto” es suficiente con escribir lo siguiente:

meteor create myApp

Una vez completado, cambie a la carpeta myApp y escribimos de nuevo meteor y deberíamos ver una pantalla como esta al acceder a “localhost:3000” para ver nuestra aplicación.

 

Entendiendo el código:

Si lo anterior te ha parecido un ejemplo sencillo, el siguiente paso es comenzar a trabajar en a entender el código. En cualquier proyecto de NodeJS tenemos que prestar atención al punto de entrada de código del servidor, sus rutas y finalmente cómo se entregarán los datos a la capa de presentación. Meteor comparte el mismo enfoque pero de una forma simplificada. En nuestro proyecto podemos ver varios archivos de muestra.

myApp.js

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Si te fijas este fichero actúa como un archivo de servidor para NodeJS. La clave la ofrece las líneas donde las líneas de código isClient e isServer diferencian entre el cliente y servidor.

 

myApp.html

<head>
  <title>myApp</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

 

Este archivo presenta nuestra aplicación. Una característica de Meteor es la de poder presentar plantillas que pueden ser accesibles tanto para el cliente como para el servidor. Por ejemplo aquí podemos ver como en el extremo del cliente,

Aquí podemos agregar agregar plantillas al cuerpo (

) del html usando la etiqueta {{> nombre de plantilla}}. Esto es muy similar a lo que podemos hacer en Angular.

Entonces, cuando cargamos nuestra aplicación en el navegador, se produce una consulta en donde Meteor comprueba si es cliente y queda a la escucha de los eventos que se producen en nuestra aplicación, por ejemplo cuando se hace un clic en el botón, para disparar la respuesta definida. En este ejemplo, sumar el número de clics realizados.

Claro que este ejemplo es muy básico, aunque sirve para dar nuestros primeros pasos. Continuando con esto lo mejor es avanzar con una aplicación de ejemplo más avanzada como una lista TODO.

Para crear esta aplicación, simplemente abrimos el terminal y escribimos este comando:

meteor create --example todos

Tomará un poco de tiempo pero una vez finalice el proceso podemos entrar en la carpeta “todos” y lanzar nuestra aplicación escribiendo meteor desde el interfaz de comandos. Seguramente tan pronto se abra el navegador sentirás un WOW recorriendote.

 

Recursos para aprender a programar en Meteor:

Si ya te ha picado el gusanillo y quieres conocer más. Es momento de buscar recursos donde conocer más sobre Meteor y cómo sacar todo su potencial. Por supuesto el primer paso consiste en visitar su web oficial, allí encontrarás abundante documentación.

Pero si eres principiante, quizá encuentres la documentación un poco avanzada y difícil de digerir, por suerte existe mucha otra documentación disponible en formato de libro electrónico o tutorial.

Libros electrónicos:

  1. Building Single-page Web Apps with Meteor
  2. Meteor Tutorial
  3. Meteor Explained - A Journey Into Meteor’s Reactivity

Tutoriales online, blogs, grupos, etc:

  1. Learn Meteor.js From Scratch: Build a Polling App
  2. Learn Meteor.js Properly
  3. Meteor Forum

Cursos

  1. Single Page Web Apps with Meteor
  2. Meteor.js Fundamentals for Single Page Applications
  3. Build a Multi-Player Card Game With Meteor
  4. Meteor For Everyone
  5. Intermediate Meteor
  6. Meteor & React
  7. Introduction to Meteor.js Development
  8. Meteor and React for Realtime Apps
  9. Curso de Meteor JS (en Español)

Conclusión

Meteor es un framework JavaScript pensado full stack que nos permite como desarrolladores crear todo tipo de aplicaciones SPA tanto para escritorio como dispositivos móviles. Su visión es de hacer las cosas lo más sencillas posibles, por lo que dispone de una colección de herramientas muy potente para crear aplicaciones web de alto rendimiento, rápidas y seguras.

Como marco de desarrollo incluye un montón de cosas que despertarán nuestra imaginación y curiosidad. Su sistema de plantillas y la versatilidad que ofrece Mongo nos servirá de base, a partir de sus ejemplos, para aprender todo lo que necesitamos saber utilizando aplicaciones reales de ejemplo que nos ayudará a comprender los conceptos de Meteor en muy poco tiempo antes de comenzar a desarrollar nuestras propias aplicaciones.