This may seem like a straightforward question at first, but Meteor is a little more complex than what first meets the eye. At face value, Meteor is just a series of files running on Node.js, but that alone doesn’t describe it.
Yes, that is what’s ultimately running, but Meteor is more like a concept; an eco-system rather than a script. It’s not the files, but the idea that makes Meteor great. So a better question to ask is: What does Meteor fix?
Now this is where it gets interesting. Traditionally the model of the Internet is to have very powerful servers doing all the dynamic work and generating HTML files, and then sending those files to the user’s browser where it gets displayed. This is how it’s always been, and for good reason too. Computers didn’t have sufficient memory and processing power to generate everything, and up to now there hasn’t been much of a data gain from letting the user do the work.
We now live in the data age. Everyone seems to be amassing terabytes of information, and so eliminating the overhead is essential to keep programs running fast. Nowadays even our cell phones have enough CPU and RAM in order to calculate and build dynamic pages that were not in the realms of possibility up to now.
So the people over at Meteor were wondering to themselves: “If the entire landscape of computing has changed this radically, why hasn’t the Web’s model been altered for the last 40 years?” This thought led them to build Meteor. If you’re wondering what changes they made to the Web’s model, then you’ve already started to get into the right mindset of what Meteor is.
The main change they made is to move all the work from the server to the client.
That’s Meteor in a nutshell. The rest of this section will be about how they solved this in reality, but if you leave with just that one line, you will have learned what Meteor is.
Now the principles they used are not novel ideas. Big corporations such as Google, Quora, and Facebook have been doing this kind of thing internally for years, but till now there has not been a framework that let the average person accomplish this without spending precious time implementing it manually. Meteor comes to provide an open source framework, to leverage these techniques.
So how does it work? Well, the first time you access a Meteor site, you will be sent the base HTML page along with a bunch of custom Meteor scripts to communicate with the server. Another thing sent to the user is a database. I have highlighted it because it doesn’t really send out your database, but more like a custom-user specific dataset, which acts as your database.
So the user is sent both the HTML and the data, and on subsequent actions (such as a button click) the client will handle everything. This means no latency, and a more accurate data representation.
This probably sounds pretty cool so far, but it’s only the start for Meteor. Since everything is on the client, you don’t build your application with the traditional pattern of DOM manipulation, you build your application purely based on data.
To better demonstrate what I mean here, I will give you an example of a site, both pre-Meteor and with Meteor. The example will be of a web page that displays a list of products, and the page allows you to add products to the list.
Without Meteor: To make this reactive without Meteor, you have to write everything twice. When the user clicks on the Add button, you can send the request to the server, wait until the server responds, and then manually update the page and reassign any JavaScript events. The other option is to immediately update the page manually and then send the data to the server. With this option, you make your application seem faster. However if there would be a problem sending the info to your database, you would again have to manually update the page and remove the info. All this just to add a simple item to a list. By the end of writing a simple responsive page, you are left with hundreds of lines of JavaScript that had to be hand written, and the results are still not optimal.
With Meteor: With Meteor you simply tell it to connect a certain section of your HTML to the data, and then when the data changes it will automatically update your page. So for this example you connect the list of products in the database to the HTML list, and when you want to add a new product you just add it to the client-side database. The process is almost instant since there is no latency and you don’t have to add any JavaScript to update the page as this is handled automatically for you.
Now there is still the problem that the database you updated is not the real one. It’s only the client-side one, so no one else using the application will see the changes. But not to worry, the Meteor team have already taken care of this, with a feature they call latency compensation. The client-side database is merely to make your application have zero delays, but after every change to the client’s database, a request is sent to update the real one. The benefit of this is a blazingly fast application, and if there is a problem sending the info to the real database, Meteor will handle removing it from the user’s page, because again you don’t play with the page; you play with the data and Meteor will take care of the rest.
This is a key aspect you have to internalize when you begin making Meteor apps. A lot of the conventional AJAX patterns you are used to, will not apply. Learning early on to let Meteor handle the page will greatly clean up your code, and speed up your production time.
Now this doesn’t mean only updating the database updates the page, because then I would have said it’s database-driven; the part of Meteor that looks for changes in data also monitors variables.
When you write down your HTML, Meteor looks for what you used to generate it. For example if you used variables called menuPosX and menuPosY to position the menu element, Meteor will start tracking these variables and if they get updated, the menu’s HTML will be recalculated. The page won’t be refreshed, but the specific data that needs to be changed will be injected.
It will take a bit of getting used to, but by the end of this book you should be fully comfortable with these mechanics and you will be ready to go out and build your own reactive applications at break-neck speeds.
Now with that said, let’s go back and readdress the chapter’s title: “What is Meteor?”
Meteor is an idea; a concept; a new model for the Internet. One that not only speeds up the application for the end-user but also the process of building sites for the developer.
But, yes, ultimately Meteor is a series of scripts running on Node.js.