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/
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:
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.
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.
Para los usuarios de Windows, antes de continuar debemos instalar primero Chocolatey y luego ejecutar lo siguiente desde el cmdlet:
choco install meteor
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.
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, es la etiqueta y en el extremo del servidor puede usar Template.template_name.
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.
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.
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.