Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Real-Time Web Application With MeteorJS

DZone's Guide to

Real-Time Web Application With MeteorJS

In this article, we take a look at MeteorJS and the benefits and drawbacks of using the framework to create real-time web apps.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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 to 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 as a 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 the 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
Books = new Mongo.Collection('books');

Let's handle adding a book to our server:

server/server.js
Meteor.methods({
    addBook: (data)=>{
        Books.insert(data);
    }
});

Then let's add a book in our client:

client/client-event.js
Template.books.events({
‘submit #addBookForm’: (event) => {
const bookName = event.target.bookName.value;

 Meteor.call(‘addBook’, bookName);
}
})

Now, a few words of explanation for this. MeteorJS automatically binds our application structure. Therefore, if we organize files in the fashion presented, 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 a 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

Template.books.helpers({
books: () => Books.find();
})

client/main.html

<template name=”books”>
{{#each books}}
<div>{{name}}</div> 
{{/each}}
</template>

The presented code uses Blaze templates for rendering views and will work in real-time. MeterJS will bind data automatically. All these points make 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, that means that MeteorJS has to support the front-end and backend. 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 that was created specifically 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 on 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 components, so for me, it's really great. On the 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 Node.js. It also supports a very nice and intuitive build system, which is based on npm (package manager for Node.js). 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 the production mode of the application. Pretty cool, isn't it?

So, What's the Conclusion?

MeteorJS is an all-around 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 that's 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 on it.

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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
web dev ,meteor.js ,web application development ,frontend ,backend

Published at DZone with permission of Filip Rybakowski, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}