<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=160269078105920&amp;ev=PageView&amp;noscript=1">

What is Meteor JS and How Did We Get Here?

Tuesday 11 of December, 2018.
Reading Time: 9 minutes.
By Miguel López Mamani

As a Software Developer, we are always looking for the most appropriate technology for each of our projects, in order to improve how we write and organize code. Therefore, the main goal of this is to review the main features of Meteor, a JavaScript platform, that allows us to quickly develop apps that are easy to maintain through the use of publish-subscribe pattern.

Meteor

What is Meteor?

Meteor is a free and open-source full-stack JavaScript platform developed by the Meteor Development Group. It is intente to be used on the development of web and mobile applications bases on Node js.                        Meteor makes use of reactive programming, allowing the user interface (UI) to immediately reflect the state of reactive context like Collections or Sessions with minimal development effort.

Main Components.
The main Meteor components are:

- Command Line Tool: This is mainly used to create projects, run and build the application, and reset the Mongo's database.

- View Layer: The View Layer represents the interface that is displayed to the user. Meteor supports three user UI rendering libraries: Blaze, Angular and React. Blaze is a rendering library created as part of the Meteor framework.

- Atmosphere: This is a repository of community packages designed especially for Meteor. Currently there are 13664 packages that can be consulted here: http://atmospherejs.com

Why Meteor?

The main reasons to use Meteor are:

- Help us build applications quickly.

- Live Updates.

- Easy to learn.

- Real-time collaboration.

Who are using Meteor?
There are more than 180 companies using Meteor. Some of the most important are: Glympse, Workpop, and eFounders. The complete list is available at: https://stackshare.io/meteor/in-stacks 
Screen Shot 2018-12-11 at 10.22.37 AM

 

Development with Meteor.

Introduction.

First, assuming that we have Meteor installed (in case you need help installing Meteor, go here), we create the Meteor project using the command ‘create’. The following command creates a project with a basic demo example:

Screen Shot 2018-12-11 at 10.25.19 AM
 

 

And this command creates an empty project:

Screen Shot 2018-12-11 at 10.30.07 AM

 

Templates and helpers.

The templates in Meteor are objects that can contain HTML, CSS, or JavaScript. Meteor’s Spacebars compiler is responsible for compiling these templates. This compiler evaluates the statements that are declared by double curly braces, such as #if and #each to let you add logic and data to your views. In the following example, a Template called ‘Tasks’ is created using the <template> tag. On the other hand, you can notice that we are using the statement #each to iterate a list of tasks.

Screen Shot 2018-12-11 at 10.31.37 AM
 
 
It is possible to pass data between templates and HTML elements from your JavaScript code using “helpers”. In the code above, we called to the helper “taskList”, which returns a list of tasks. Next, the creation of this helper:
 
Screen Shot 2018-12-11 at 10.33.04 AM
 
Events.

Event listeners are added to templates in the same way as helpers are: by calling to the object Template.templateName. The following code is listing the “click” event on any element that matches the CSS selector ‘li’. When this event is triggered by the user clicking on the <li> element, the event handler function is called. The event handler gets an argument called “event” that has information about the event that was triggered.

Screen Shot 2018-12-11 at 10.34.03 AM
 
 
Collections.

Collections are a way to store persistent or temporary data. When the data is persisted, it is possible to access it from both sides: server and client, which makes it easy to write the view logic without having to write a lot of server code. We can create a collection using the following syntax:

Screen Shot 2018-12-11 at 10.35.08 AM
 
 

If a name is passed as an argument, then a persistent collection is created. Once the collection has been created, it is possible to perform Mongo commands on it, such as:

Screen Shot 2018-12-11 at 10.35.43 AM
 
 
Publish and subscribe.

These functions control how Meteor publishes sets of records from the server side and how clients can subscribe to those sets from the client side. In the following code, the publication function called “TaskDescription” returns a Mongo cursor for a task with the taskId = task_id with only one filtered field.

Screen Shot 2018-12-11 at 10.36.51 AM
 
 

In the following code, we subscribe to the publication called "TaskDescription" by providing the argument of “task_id”:

Screen Shot 2018-12-11 at 10.37.32 AM
 
 
Methods.

Meteor methods are functions that run on the server side, which are invoked from the client side using the syntax: Meteor.call. In the following example, a method called “createTask” is created by using the built-in “Meteor.methods” API.

Screen Shot 2018-12-11 at 10.38.36 AM
 
 

Then, we call the Method Meteor from the client side using “Meteor.call” syntax:

Screen Shot 2018-12-11 at 10.39.08 AM

 

Then, if we want to display these changes automatically, we can modify the previous helper called “taskList” to this:

Screen Shot 2018-12-11 at 10.39.57 AM
 
Conclusion.

And that’s it! Using a very little amount of Meteor API, we have a Javascript Project that automatically updates the view, which is the <template>, based on the changes on the Model, which is the Mongo Collection, keeping the View synchronized with the Model through the use of publish-subscribe pattern.

About Avantica.

If you are looking for a software partner who will work towards your own business goals and success, then Avantica is your solution. We offer dedicated teams, team augmentation, and individual projects to our clients, and are constantly looking for the best methodologies in order to give you the best results.

Let's Start a Project Together

  

PREVIOUS
What User Experience Does for Digital Marketing
NEXT
Digital Marketing Strategies: Search Engine Optimization.