Programando en Meteor (1) Primeros Pasos

El sábado 15 de febrero, asistí a una Meteor meetup acá en Buenos Aires, una mitad de día lleno de charlas y codeo en Meteor. Gracias desde acá a los organizadores, ayudantes y “sponsors”: @areatreslab, @4residents, @bikestorming, @html5cat (ucraniano, viviendo en Vancouver, Canadá, interesante, graduado en matemáticas, con especialidad en análisis funcional; escribió hace un tiempo un function analysis paper), @matikalwill (a.k.a. “mi vida es bikestorming, seño”, iba a la escuela primaria con un cuaderno con su proyecto ;-).


Meteor es un framework para armar aplicaciones web. Y puede ser usado (y es usado) para armar aplicaciones móviles. Una aplicación Meteor, en general, es una Single Page Application (SPA), una aplicación que muestra una sola página y la va cambiando con JavaScript en el cliente, y pudiendo traer nuevos datos del servidor (y también mandar nuevos datos). El servidor está basado en nuestro viejo conocido, Node.js. Pero Meteor no es como otras aplicaciones Node. Ver primero:


https://www.meteor.com/


La principal diferencia: el lenguaje de programación es JavaScript, y PUEDE SER EJECUTADo en el servidor o en el cliente. Puede ser el MISMO código en ambos lados, o tener partes especializadas que ejecuten en el cliente y otras en el servidor.


Meteor se basa en siete principios:


http://docs.meteor.com/#sevenprinciples


  • Data on the Wire. Don’t send HTML over the network. Send data and let the client decide how to render it.
  • One Language. Write both the client and the server parts of your interface in JavaScript.
  • Database Everywhere. Use the same transparent API to access your database from the client or the server.
  • Latency Compensation. On the client, use prefetching and model simulation to make it look like you have a zero-latency connection to the database.
  • Full Stack Reactivity. Make realtime the default. All layers, from database to template, should make an event-driven interface available.
  • Embrace the Ecosystem. Meteor is open source and integrates, rather than replaces, existing open source tools and frameworks.
  • Simplicity Equals Productivity. The best way to make something seem simple is to have it actually be simple. Accomplish this through clean, classically beautiful APIs.

Notablemente, el estado de la base de datos es compartida por todos los clientes en tiempo real. Si agregamos un nuevo registro a una colección de clientes (Meteor usa MongoDB en el servidor para la persistencia) EN EL CLIENTE, la actualización viaja al servidor, y se refresca en todas los datos de los clientes conectados. Por ejemplo, si un segundo cliente tiene en la pantalla una lista de clientes, automáticamente Meteor, por programación reactiva, sabe que esa lista tiene que actualizarla, porque cambió el modelo base que es la colección de clientes, y va la actualiza en el cliente. Todo esto sin agregar código adicional: simplemente declarando en JavaScript cómo los modelos de las vistas cliente dependen de alguna colección, en este caso, de la colección de clientes.


Aunque basado en Node.js, Meteor no es un paquete NPM (Node Package Manager). Debe ser instalado manualmente, leer:


http://docs.meteor.com/#quickstart


De esa forma, puede ser instalado en Linux/Unix y en Mac. La plataformas soportadas en:


https://github.com/meteor/meteor/wiki/Supported-Platforms


Pero si tenemos Windows (usé Windows en la reunión), tenemos que usar otro procedimiento, yo usé el ejecutable que está en:


http://win.meteor.com/


Hay soluciones basadas en Vagrant (que levantan una máquina virtual, pudiendo seguir trabajando en Windows, editando archivos de la VM, por ejemplo). Yo instalé el ejecutable del sitio de arriba, que se llama LaunchMeteor.exe, sin mayor problema, y lo probé en dos máquinas Windows. No hace falta tener Node pre-instalado, usa una versión interna, que está en su directorio de instalación, y tampoco molesta a otra instalación de Node ya existente en nuestras máquinas.


Leí:


http://docs.meteor.com/#structuringyourapp


A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.

The only server assets are JavaScript and files in the private subdirectory. Meteor gathers all your JavaScript files, excluding anything under the client, public, and private subdirectories, and loads them into a Node.js server instance inside a fiber. In Meteor, your server code runs in a single thread per request, not in the asynchronous callback style typical of Node. We find the linear execution model a better fit for the typical server code in a Meteor application.


El énfasis es mío. Vean que para tener el mismo código en cliente y en servidor, el código del servidor se ejecuta en una fibra, un truco de Node/V8 para no ver los callbacks y el async directamente. Tengo que revisar la escalabilidad, ver mis enlaces


https://delicious.com/ajlopez/meteor,scalability


Meteor tiene un manejador de paquetes no oficial Meteorite:


http://oortcloud.github.io/meteorite/


y tiene un repositorio de “smart packages”


https://atmosphere.meteor.com/


Estos paquetes saben qué poner en cada caso, en el cliente y el servidor. Y tienen funciones implementadas usando fibras.


Leo:


http://docs.meteor.com/#usingpackages


In addition to the packages in the official Meteor release being used by your app, meteor list and meteor add also search the packages directory at the top of your app. If you’ve downloaded an unofficial package from Atmosphere you should unpack it into that directory (the unofficial Meteorite tool streamlines this process). You can also use the packages directory to break your app into subpackages for your convenience — if you are willing to brave the fact that the Meteor package format is not documented yet and will change significantly before Meteor 1.0…


Lamentablemente, Meteorite no está aún disponible para Windows, así que tenemos que usar los paquetes built-in, que ya viene, o instalar un paquete manualmente. (ver el repo de mi proyecto mencionado más abajo, hay varios enlaces que tratan el tema).


Hay muchos recursos para ir aprendiendo Meteor:


https://www.meteor.com/learn-meteor


Por ejemplo, pueden probar los ejemplos (no necesitan Meteorite, así que funcionan en Windows):


https://www.meteor.com/learn-meteor


Durante la meetup, probé varios ejemplos, modifiqué alguno (el de leaderboard), y armé un sitio con Bootstrap 2.x y algún altas, listas, y me falta editar y borrar:


https://github.com/ajlopez/MeteorSamples


Varios enlaces con tutoriales, videos, ejemplos, en:


https://github.com/ajlopez/MeteorSamples#references


El ejemplo CRUD está en:


https://github.com/ajlopez/MeteorSamples/tree/master/mycompany


Usa solamente paquetes builtin, así que lo pueden ejecutar en Windows (ah! al igual que Node, no hace falta instalar MongoDB; Meteor viene con uno propio).


Con un comando de Meteor, puede publicar un ejemplo en la web de Meteor. El mío quedó en:


http://mycompany.meteor.com/


Voy publicado Meteor-related links. Más enlaces en:


https://delicious.com/ajlopez/meteor
https://delicious.com/ajlopez/meteor,tutorial


Ah! Meteor puede ejecutarse en PhoneGap, para tener aplicaciones móviles en múltiples dispositivos, corriendo con acceso a lo nativo de cada uno:


https://delicious.com/ajlopez/meteor,phonegap


Mi plan: luego de terminar mi ejemplo, usarlo como base para generar con AjGenesis aplicaciones Meteor. Recuerden que AjGenesis usa un modelo libre, plantillas y tareas. Usaré la versión que tengo implementada en Node.js, que es la que más se adapta a multiplaforma. Una vez que tenga andando eso, generaré para PhoneGap, espero. Hasta podría usar la Build API de PhoneGap, accesible desde Node.js, para dar una experiencia de code generation as a service (como ya tiene un ejemplo de hace años de AjGenesis en .NET).


Me diviegto como logco ;-)


Nos leemos!


Angel “Java” Lopez
http://www.ajlopez.com
http://twitter.com/ajlopez

This entry was posted in 10747, 11383, 14005, 15550, 18278. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>