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 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:
Meteor create my-app
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:
Meteor
Now, we will go more in-depth to understand Meteor Js. 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 Meteor Js. 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:
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 refer 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
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");
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.
As we can see, the event handler gets an argument event that 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.
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 the responsibilities of the main body.
In order to incorporate our template to our body, we only need to add
{{>user}}
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 database to which we will add the following
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 Meteor Js 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.
Comments? Contact us for more information. We’ll quickly get back to you with the information you need.
