Habilelabs-Logo
Blog

What is Meteor.js, a complete tutorial for beginners

July 26th, 2017 . 5 minutes read
Blog featured image

If you really want to know what meteor.js is, how it works, and what are the key features of meteor.js, then you are in right place. It is a complete meteor js tutorial for beginners.

In this post, I will describe all the key features of meteor js. Let’s start-

What is Meteor?

Meteor is a full-stack JavaScript development framework, a collection of libraries (like tracker & Blaze for front end experience), and packages from the node.js & general JavaScript, all bound together in a tidy way to make web development easier.

NodeJS is the platform you need for Meteor Development. It uses the same API and can be used for web and mobile apps development.

How Meteor.js Works?

The key innovation of meteor is that all other apps live on the server or client. But meteor includes both client and server. It is a book manager whch not only finds the right book but also follows to home to read that for you.

Meteor does many cool kinds of stuff, chief among them is database everywhere. The meteor will take a subset of your database and replicate it to the client-side.

Working of meteor JS

It consists of two big implications:

  1. Meteor app sends actual raw data instead of HTML code and it let the client deal with it.
  2. Access data instantaneously without waiting for a round- trip to the server

Even cool thing is that it also does all the heavy lifting of keeping client and server data in sync.

Let’s discuss some key features in Meteor.js

Here are 7 features:

  1. Server/Backend – How server interact in Meteor Js?
  2. Browser/Frontend – What features front end users to interact in Meteor Js?
  3. Methods – Helps in creating a complex function easier
  4. Publish – Fetching data from the server
  5. Subscribe – Using data on client-side
  6. Helpers – Interaction with the UI
  7. Autorun – Checks data modification

Let’ do a detailed discussion on these features for better understanding.

1. Communication Layer/The Server:

Ejson (extension to JSON) is used for serializing & deserialize data moving across the wire via DPP (Distributed data Protocol). If (Meteor.isServer) {} for reflecting changes on server only.

communication layer

2. Frontend/The Browser:

We use if (Meteor.isClient) {} for reflecting changes on frontend/browser.

frontent/browser

Package Manager-

package manager

3. What is the method?

The method is an API endpoint for our server. You can define a Method on the server & its counterpart on the client, then call it with some data, write to the database and get the return value in a call-back.

In the basic app, the meteor.js method is as simple as defining a function. In a complex app, few extra features make it powerful & easily testable. The method should always be defined in common code on the client & server to enable optimistic UI.

Methods –

 4. Publish Method:

We have a lot of data which we can’t be available to users so for that we tell meteor that publish unflagged posts only and there is no way that client can see flagged posts. This makes the meteor app more secure.

The query for publishing data from a particular id –

 

5. Subscribe Method:

Even though we don’t’ want a client to see flagged posts but we cannot send them all data. He should have access to particular data that he has subscribed for.

Any data we subscribed will be mirrored on the client, thanks to Minimongo. For example, we’re browsing John Nolan’s profile we want his posts only then we subscribe.

subscribe method
  1. First, we modify it to take a parameter.
  1. Now we subscribe to particular data on the client-side.

6. Helpers:

After publishing and subscribing method now we have to deploy it on UI. So for interaction with UI, the helpers method is used which provides a display. It’s a part of ReactiveContext and will available on each $scope & context and it will stop automatically when $scope is destroyed

7. Autorun:

Autorun establishes a reactive context and whenever any reactive data it depends on modify then it is re-executed. It always runs at the time of first execution. So each autorun should limit to a particular task.

For example, you have an autorun that transforms data when a home button is clicked, and another that retrieves a new page data when URL parameters are updated. So, these tasks are not related to each other so both should have separate autoruns assigned to them, otherwise both will run every time either scenario is triggered.

Conclusion:

I hope you’ve learned a lot about Meteor.JS! and to continue learning,  you can check out the link on Meteor JS Tutorial also.

Thanks for reading and if you have any questions about the blog etc, please let me know in the comments below.

Hope you found this helpful, so don’t forget to share it on Facebook.

Author: Habilelabs
Share: