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

In this post, I will describe all the key features of meteor js. Let’s have some idea what is a meteor and how it works.

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 that are bound together in a tidy way to make web development easier.

NodeJS is the platform needed for the Meteor development. Uses the same API & Can be used for the web and mobile apps development.

The Way Meteor 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 who not only finds the right book but also follows to home to read that for you. Meteor do many cool kinds of stuff, chief among them is database everywhere. In this meteor will take a subset of your database and replicate it to the client side.

It consists of two big implications:

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

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

Let’s discuss some key features in Meteor Js

Here are 7 features:

Server/Backend – How server interact in Meteor Js? Browser/Frontend – What features front end users to interact in Meteor Js? Methods – Helps in creating a complex function easier Publish – Fetching data from server Subscribe – Using data on client side Helpers – Interaction with the UI 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.

2. Frontend/The Browser:

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

Package Manager-

3. What is the method?

The method is an API endpoint for our server, you can define a Method on 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, meteor method is as simple as defining a function. In complex app few extra features to make it powerful & easily testable. The method should always be defined in common code on client & server to enable optimistic UI.

Methods –

Meteor.methods({ 'setNewPassword': function (username, pass) { // check if username if (username) { // find user from database } let user = Accounts.findUserByEmail(username); //set password return Accounts.setPassword(user._id, pass); } }); 1 2 3 4 5 6 7 8 9 10 11 Meteor . methods ( { 'setNewPassword' : function ( username , pass ) { // check if username if ( username ) { // find user from database } let user = Accounts . findUserByEmail ( username ) ; //set password return Accounts . setPassword ( user . _id , pass ) ; } } ) ;

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 meteor app more secure.

// on the server Meteor.publish("users", function () { return users.find({flagged : false}); }); 1 2 3 4 // on the server Meteor . publish ( "users" , function ( ) { return users . find ( { flagged : false } ) ; } ) ;

Query for publishing a data from a particular id –

Meteor.publish("userData", function () { if (this.userId) { return Meteor.users.find({_id: this.userId}); } else { this.ready(); } }); 1 2 3 4 5 6 7 Meteor . publish ( "userData" , function ( ) { if ( this . userId ) { return Meteor . users . find ( { _id : this . userId } ) ; } else { this . ready ( ) ; } } ) ;

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 which he has subscribed for.

Any data we subscribed will be mirrored on client thanks to Minimongo.

For example, we’re browsing John Nolan’s profile we want his posts only than we subscribe.

First, we modify it to take a parameter.

// on the server Meteor.publish("users", function (author) { return users.find({ flagged: false, author: author }); }); 1 2 3 4 // on the server Meteor . publish ( "users" , function ( author ) { return users . find ( { flagged : false , author : author } ) ; } ) ;

Now we subscribe particular data on client side.

// on the client Meteor.subscribe("users", ‘john-nolan’); 1 2 // on the client Meteor . subscribe ( "users" , ‘ john - nolan ’ ) ;

6. Helpers:

After publishing and subscribing method now we have to deploy it on UI. So for interaction with UI, 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

this.helpers({ loggedIn: () => { return Meteor.users.findOne({_id: Meteor.userId()}); } }); 1 2 3 4 5 this . helpers ( { loggedIn : ( ) = > { return Meteor . users . findOne ( { _id : Meteor . userId ( ) } ) ; } } ) ;

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 be limited 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.

Tracker.autorun(function () { if(Meteor.user()) { Meteor.subscribe('someHomeDataOnlyForLoggedPeople'); } }); 1 2 3 4 5 Tracker . autorun ( function ( ) { if ( Meteor . user ( ) ) { Meteor . subscribe ( 'someHomeDataOnlyForLoggedPeople' ) ; } } ) ;

Conclusion:

I hope you’ve learned a lot about Meteor! 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.