How to improve performance of Meteor

Meteor is a platform independent, open-source, JavaScript web application providing a complete full-stack framework for creating code that runs on web as well as mobile device. Meteor simplifies the process for responsive application development. Users can expect their apps faster than they ever thought and easy to use. Meteor can deliver quick, effective, delightful and integrated developer experience.

 

Key features of Meteor

Key features of Meteor

Universal JavaScript

The same code runs from packages to database APIs, from the client to the cloud, across mobile devices and browsers via Meteor’s unified Isobuild system.

Reactive Rendering

Client Graphic user interface components helps in creating responsive apps, provides look and feel of a thick client app using Meteor’s Blaze framework or integrating with AngularJS and ReactJS.

Optimistic UI

Meteor presents ‘Data-on-the-wire’ with latency compensation and conflict resolution built-in. When data changes; updates propagate reliably to affected clients and users’ screens update via live query, full stack DB drivers and mini database sources.

Websocket Microservices

Meteor’s Distributed Data Protocol (DDP) has inbuilt task for Websockets, which is a standard protocol for sending micro service APIs over Websockets that push data from the cloud to live-updating clients.

We have already seen previous posts on Tutorials on Meteor.js and Useful Resources on Meteor.js which are really useful for Meteor developers. With all of the above key features Meteor still has some performance issues and after spending few weeks you will find your new masterpiece is slow. Meteor is not very helpful when you are creating a website as it transfers CSS (Cascading Style Sheet), JS (JavaScript), HTML, code and template to client. So in this article we are listing some of the major points that help you in improving the performance of Meteor.

 

1) Meteor.js Sessions

When I first start working with Meteor as a software developer, my traditional thinking towards Meteor`s session was that they are place to store data over a time. But instead, Meteor’s session is to provide reactivity in your application and to track your application’s state when the server undergoes for a refresh. Sessions are mainly used as global variables by the developers when they are facing problem in finding the value they are looking for in a particular context. Session variables are used when you need to establish some reactivity in your app and there is nothing much to change in the app. Instead of, using session variables you can use normal JavaScript variables. They work so perfectly where reactivity is not required. Don`t forget about the basics.

2) Proper tuning with Meteor collection.find () queries to get required data you needed

I hope you all are pretty much familiar with this section and we all are doing this with relational database too. So make sure not to fetch more data then you required and it is even more important in Meteor. The best example is company having an employee’s data. You will have first name, last name, Employees id and so on. In Meteor you can use helper function.

var employees = Employees.find ().fetch ();

But when you required a certain information for e.g.: I need a list of employees last name  and not all other data like id, first name, address etc. It is very important in Meteor that rather than fetching the whole information we can use fields in queries to fetch particular information about the employees with the help of command described below:

var employee_last_name = Employees.find ({}, {fields: {_last_name: 1}}).fetch ();

This command gives you the last name of employees from the employee’s collection. In return to the above query, this will provide only the data we need, something like [{last_name: sharma}, {last_name: mathews}, {last_name: Williams}, {last_name: khan}], a document that comprising only the employee last name.

3) Cut down your templates

A small data change can force your app to rebuild large templates so it is a good practice to make your template as small as possible.

4) For larger templates Use {#isolate}

If you do stuck in a situation where you have big templates with complicated nested loops, you use {#isolate} tag to break it up. Isolate tag will help Meteor to do changes in that particular area, so that the entire template will not reprocessed.

5) Making non-reactive queries

When you are working with collections, data should be used properly, if the documents are changed, and you will never going to update your dom or html file then it’s better not to create a reactive query in a Meteor. So it will not regenerate your template even if the data changes in return documents. It will required some experience in making this choice. But if you keep questioning to yourself, in a very little time you will become expert and see places where you can avoid reactivity without compromising your application.

By simply passing {reactive: false} we can make our queries non-reactive
Making non-reactive queries

6) Best way for Debugging Meteor JS:

You will notice that your application is experiencing problems, the same template is being executed over and over, it’s slow down your app and unnecessarily updates in your dom and html file. By adding the below code, and execute the function LogRenders () after the code client has been processed, you will get a nice view of order and the no of times the templates are called.

Function logRenders () {
_.each (Template, function (template, name) {
var oldRender = template.rendered;
var counter = 0;

template.rendered = function () {
console.log (name, “render count: “, ++counter);
oldRender && oldRender.apply (this, arguments);
};
});
};

 

7) Track to Collection.find () statements, and check when it reruns.

You can run the below code and observe the changes in all the find statements and find the reactive change in your code.
Track to Collection.find () statements, and check when it reruns.
When I start noticing performance problems in Meteor JS, it was hard to get going. I wouldn’t see a lot on the page changing, but everything was still very slow. In this article we have mentioned some of the major points that will help you in improving the performance of Meteor. If you have any points to add, please let me know. Feel free to comment below.