Skip to main content


Filip Rybakowski
meteorjs

Real-time Web Application with MeteorJS

In the world of web technologies, the most commonly used technology for client-server communication is HTTP.  Some might consider the synchronous, request-response nature of HTTP protocol as its weakness. Every change made in application database is not automatically passed to the client part of the application, and the user won’t see it on the interface.

However, there is a solution to this communication issue – WebSockets. I’d like to present MeteorJS. It’s a platform where WebSockets is used as a base of communication protocol – DDP (Distributed Data Protocol).

 

Let me tell you this: real-time is cool.

It’s easy to see the benefits of automatic binding displayed data to database values in real-time. We have the possibility of creating web systems and applications more similar to native applications or even operating systems. To show it, I will use an example.

How does a modern operating system work?

Let’s imagine an operational system in which we’re opening two windows of our file manager. Both windows are open in the same location. Next, in the first window we create a new folder. We can see this change in the second window, automatically. This is our real-time effect.

This approach is user-friendly, but not only that. It’s also very useful for business logic, which – in some cases – is even necessary. For example, some chats, web games or systems which observe some different types of states and react for changes require a real-time approach.

Sadly, as it often is in life, there’s a downside. Communication based on WebSockets technology has some drawbacks. For example, there are more limits in the case of the number of users which can use our application/system at the same time than in communication based on HTTP.

meteorjs

MeteorJS as full-stack platform

Let’s focus on MeteorJS’s architecture. Thanks to the fact that whole platform is made in JavaScript, developers need only one programming language to create the whole application. It is also very useful in case of communication between client and server. Developers can avoid different issues with data formats and data exchange.

From a developer’s perspective, a huge advantage of MeteorJS is its simplicity. Client-server communication is very intuitive, and its data synchronization is automatic. Thanks to this, we get the real-time effect for free! Let’s see some sample code, which presents the communication between client-server where we add some example objects to MongoDB.

First, let’s create a MongoDB Collection:

both/collections.js

 

Let’s handle adding a book in our server:

server/server.js

 

Then let’s add a book in our client:

client/client-event.js

 

Now, a few words of explanation for this. MeteorJS automatically binds our application structure. Therefore, if we organize files in the presented way, we’ll have the following situation:

 

client/ – files available for client side

server/ – files available for server side

both/ – files available for both

 

This code is a very simple presentation of a situation where the client can add some books to database. MeteorJS handles communication and database connection matters. In addition, when we get and display all books it will automatically bind data:

 

client/client-helper.js

 

client/main.html

 

The presented code uses Blaze templates for rendering views and will work in real-time. MeterJS will bind data automatically. All these points makes the whole process of creating software very quick and efficient.

What can we use when working with MeteorJS?

In the paragraph above I wrote that MeteorJS is a full stack platform. So, it means that MeteorJS has to support the front-end and back-end. Let’s check which technologies you can use with it.

The client-side part of MeteorJS provides you with a very wide set of most popular front-end technologies.

It supports Angular, React or a template system called Blaze, created specially for MeteorJS (it’s generally based on Handlebars). But I don’t want to describe any of these technologies here. My goal is to advise you what to choose as a front-end technology, depending on product requirements.

From my experience, I can say that when you need a quick solution, it’s better to use Blaze. It’s clear and simple, but like other, more popular solutions it’s also very powerful (reactivity, clean html templates). Furthermore, it’s still under development. There are plans to add e.g. components, so for me, it’s really great. On other hand, if you need a scalable, big product, it might be better to choose a popular and complex technology like Angular or React.

The server side part of MeteorJS is based on NodeJS. It also supports a very nice and intuitive build system, which bases on npm (packages manager for NodeJS). It provides a set of packages for MeteorJS called Atmosphere.js. After starting a local server, the build system will ‘watch’ the state of our project. In case of changes, MeteorJS will automatically rebuild the project and refresh our client. There are also other useful features, like automatic minification and concatenation of static resources in production mode of application. Pretty cool, isn’t it?

 

So, what’s the conclusion?

MeteorJS is an all-round solution for web and mobile applications (it also supports Apache Cordova). Development is fast, because we’re using only one language on client and server. Communication based on WebSockets gives us a real-time effect.
However, this type of communication has a very particular charm. It should be used in specific situations. Apart from this, I can definitely recommend this platform. What’s more, the number of applications and systems built with MeteorJS is growing, and there’s a large community working with this solution.

You can check the full SPA template built with MeteorJS here.

Share:Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on Pinterest

Like what you see?

Get in touch! We'll respond quickly, and we'll keep your data confidential.