Meteor.js: What it is and how to use it

In recent years there was a great outburst of different technologies, such as AngularJS, nodejs, ReactJs, etc., that allowed us to create great apps quickly and enable a greater user experience. MeteorJs is no exception but has its differences.

meteor

Meteor Js is a full-stack framework done in NodeJs and JavaScript, enabling us to create web and mobile applications with great speed. That’s why it’s called meteor.

When talking about layer levels, MeteorJs is located between the database and the user interface and ensures that the two sides are synchronized.

To create our project we will:

We create a folder where you have 4 files:

  • my-app.js
  • my-app.html
  • my-app.cs
  • .meteor

Now in order to run our example, we have to go to the directory where we created our project, and we will use:

In order to view our first project, we will go to the browser and go to http://localhost:3000 and it’s done.

Simple, right?

Now, we will go more in depth to understand MeteorJs. For that we will create a simple form to insert data into our database using MongoDB.

Note: To add more design to our application, Bootstrap was implemented which is supported by MeteorJs. To use Bootstrap, it needs to be installed separately.

Our my-app.js has two parts: one for the client code and one for the server:

meteor1

meteor2

For our app, we will focus on the client.

Meteor Js identifies three tags   <head> <body> and  <template>. The first two act like regular HTML, the last allows us to create Meteor Templates that can be added to our HTML by inserting {{ > templateName }} and can also reference this template through our JavaScript using Template.templateName.

Step 1 – Create our form and table

Using Bootstrap we can create the form in our body
meteor3

In the table, we show our users once they are persisted.

Step 2 – Persist our users

For this step we have to work on my-app.js. First we create our Collection of users, for which we use a call MyCollection = new Mongo.Collection("my-collection");

meteor4

Now that we have added our Collection, we will insert our users. For this, we use Event Listeners. These will allow us to hear our event submit which is associated with a new-user class.

When clicking on submit, it automatically activates the Event Handler to process the event.

meteor5

As we can see, the event handler gets an argument event which allows us to interact with our HTML. We also see how we use our Users to insert our user.

We can clarify that inserting a user from the client is not the safest way. For safety, Publications and Subscriptions could be used, which is outside of the scope of this introductory article.

Step 3 – Add Users to our HTML using the tag Template

We will create our template with the user name outside the body. This template will represent each item in the table, in which each user will be persisted in MongoDB.

meteor6

The template tag with the name user would be a row of a table where we will show our users persisted. As we see, we can incorporate common HTML tags within the template, allowing greater expressiveness to be able to separate responsibilities of the main body.

In order to incorporate our template to our body, we only need to add
{{>user}}
to our table

meteor7

In line 30, we can see as we add logic to our HTML. All code found in our HTML is compiled by Meteor’s Spacebars compiler. Spacebars use statements that are between double braces {{# statement}}...{{/statement}} managing to add logic to our view.

In this case, we are stating that for every user of the Collection (usersCollection), we show our Template user.

Step 4 – Add search logic to our JavaScript

To operate to our view, we must first be able to “Find” the MongoDB data base to which we will add the following
meteor8

Using Template.body.helpers can make a reference to our body and interact with our view. In this case we can see how to add usersCollection users that were found in the database.

With this simple app, we could see how MeteorJs can engage with Bootstrap and MongoDB quickly and simply. We can also see that we only use JavaScript as a language and how we avoid tedious configurations with MongoDB.

This article was a first approach to this technology, which has a great future due to its simplicity and speed.

Share this articleShare on LinkedInTweet about this on TwitterShare on FacebookShare on Google+Email this to someone
Go Back