Meteor.js Getting Started & Basic Principles

WRITTEN BY GARETH DUNNE @JSDIARIES

I first encountered Meteor.js before it had reached version 1.0. It’s site at the time looked like this.

Its growth in the last 2 years has been staggering. After the release of version 1.0 the site got a complete overhaul and turned into the red colored behemoth that it looks like now.

As jsdiaries is a similar red colored behemoth (not really) I thought I’d take time to look at Meteor.js now and highlight its key principles and foundations that it still adheres to. I hope to follow this post with a look at current state of Meteor and some of its newly added features.

Meteor doesn’t send HTML over the network. The server sends data and lets the client render it.

Only one language is used throughout the API so throughout the client and server side only

JavaScript is used everywhere. Even HTML and CSS files are translated into JavaScript for the client and server to read. This is significant when it comes to debugging an application.

The same methods to access a database are used on the client and server side. This results in instantaneous call-backs to the data base from the client.

On the client Meteor preemptively fetches data and simulates models to appear that the server methods call return instantly.

Real-time is the default in Meteor.js. All layers from the database to the template update themselves automatically when necessary.

Meteor is open source and integrates with existing open sources tools and frameworks. Additionally anything Meteor lacks can be a installed using Node.js. So instead of replacing tools and frameworks it integrates them.

Meteor’s main functionality has clean, classically beautiful APIs. In other words the Client, Server and Database run on the one JavaScript API.

These seven principles give an element of structure to the Meteor platform. Its implementation of reactive programming enables the use of less code used overall. The platform itself is also a very initiative paradigm to create user interfaces due to its simplicity of its reactive update features.

So what exactly can we take from these principles? Well the most important thing to know is that Meteor reacts in real time because the Client and Server are in the same state and that they both only use JavaScript.

For Mac users open up your terminal and type:

curl http://install.meteor.com

This command single-handedly installs all of the following on a Meteor platform.

• Node.js

• Neccesary NPM packages

• MongoDB

For Windows users simply navigate to

 https://www.meteor.com/install

And download the installer.

Among these features Meteor’s own reactive virtual DOM engine , Blaze, gets installed too. All these features being installed as well as a reactive template system already give the project some initial structure. Meteor adheres to no official files structure system. However a general consensus from Meteor users is to separate your JavaScript files into client and
server folders where each folder contains specific operations that should occur on the client or server side. At the time I began development using Meteor was not available to use on Windows machines. As of time of this writing Meteor 1.1 now fully supports Windows and MongoDB 3.0.

When I first started developing with Meteor.js I used a third party IDE called Nitrous. It was used for a project in order to work in an envi-environment that supports Meteor through a deployment box.  At the time Meteor did not support Windows and Nitrous was a cloud-based back end development platform. It contained an environment that replicates a Meteor directory running off a machine. It also has a web IDE and its own CMD alongside its directory.

At the time Nitrous proved to be a beneficial tool for building a Meteor.js application as it allowed the use of the applications directory across multiple platforms. However, Nitrous is now discontinued so your better off just downloading and install Meteor.js yourself through the command window or by downloading the installer for Windows but if you want to subscribe to any of their future open source projects they allow you to do so here:

https://www.nitrous.io/

There are also quite a few text editors that support Meteor.js intellisense. A developer looking for a development environment like this would be recommended to use some of the following.

• Visual Studio Code
• Atom
• Code Lobster
• WebStorm (a very powerful IDE with debugging and introspection support)
• VIM
• Sublime Text 3 (available syntax plugins)

It also comes down to personal taste such as styles of syntax highlighting, using the navigation, supported plugins etc. If you looking for an even more detailed introduction to this exciting framework you could check out either of these starter books.

In my next post we will dive into some of the more interesting parts of this framework.

Back in May of this year a post was realeased that informed of a compatibility update for Meteor 1.3 and associated study plan has been linked in one of Sascha Greif’s latest posts:

https://www.discovermeteor.com/blog/study-plan-meteor-1-3/

Latest blog updates

https://blog.meteor.com/announcing-meteor-1-4-2-rebuild-performance-a-look-ahead-5c5fab513094#.cd1j5ni0y

https://github.com/ericdouglas/Meteor-Learning