Angel \”Java\” Lopez on Blog

February 16, 2014

Programming Meteor (1) First steps

Filed under: JavaScript, Meteor, Mobile, NodeJs, PhoneGap, Programming, Web Development — ajlopez @ 7:21 pm

Yesterday, I attended to Meteor meetup at Buenos Aires, a half day of talks and coding. Thanks to organizers, sponsors and supporters: @areatreslab, @4residents, @bikestorming, @html5cat (he co-wrote a function analysis paper), @matikalwill (a.k.a. “my life is bikestorming, ‘senio’”).

Meteor is a framework to build web applications. And it can be used to build mobile applications, too. A meteor application, in general, is a single page application (SPA). The server is based on Node.js. But Meteor is not like another Node.js applications. Visit:

https://www.meteor.com/

The main difference: the programming language is JavaScript, AND CAN BE EXECUTED at server side or at client side. Yes, the same code. Or you can write code specifically created for client OR server side.

Meteor is based on seven principles:

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.

Notable, database state is shared by all clients at realtime. If your current view is a list of customer, and somebody adds a new customer to the MongoDB database (the supported database) all the clients are notified, and each view involving customers are automatically refreshed. All this without adding special code, simply using the code that lists customers in a page (using Handlebar as the template engine).

Although based on Node.js, Meteor is not an NPM package. It should be installed manually, read:

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

It can installed in Linux/Unix and Mac boxes. Supported platforms at:

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

But if you have Windows (I used Windows in the meetup) you should use another approach:

http://win.meteor.com/

There are Vagrant –based solutions, too. I installed using the LaunchMeteor.exe without problems, in two Windows machines.

I read:

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.

My emphasis. This is a sensitive issue: I’m not sure about the implications of such run strategy. Check my links

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

Meteor has an unofficial package manager, called Meteorite:

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

and “smart packages”

https://atmosphere.meteor.com/

I read:

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…

Meteorite is not running on Windows, so you should use only the builtin packages or use a manual install.

There are many resources to learn Meteor:

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

For example, there are easy ready to use examples:

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

During yesterday meetup, I tried some examples, modify and simplify the leaderboard example, add a Bootstrap 2.x top bar, and started to write a new one using many pages and MongoBD (using Backbone routing):

https://github.com/ajlopez/MeteorSamples

Many links with tutorials, videos, examples at:

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

The CRUD sample (work in progress) at:

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

It uses only builtin packages so you can run it as is from Windows.

Yesterday, I published some Meteor-related links. More links at:

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

Ah! Meteor can run in PhoneGap, to have a multi-device mobile experience:

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

My plan: after finishing the mycompany sample, use the base code to generate an AjGenesis module for Node.js. So, I will have code generation of web sites, using a free defined model, tasks and templates. Then, add phonegap support, and maybe, software as a service, using Node.js access to PhoneGap Build API.

More fun is coming.

Keep tuned!

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

Blog at WordPress.com.