Use meteor to easily develop live web sites

What is Meteor?

Meteor is a new JavaScript framework for automating and simplifying the development of WEB applications that run in real time. It uses a protocol called Distributed Data Protocol (distributed data Protocol, DDP) to handle real-time communications, use WebSockets's new browser, and use asynchronous JavaScript + XML (Ajax)-long A polling old browser to support this protocol. In both cases, the browser's communication to the server is transparent.

The DDP protocol is designed to handle JavaScript serialized Object notation (JSON) document collections, making JSON documents easy to create, update, delete, query, and access. Because DDP is an open source protocol, you can connect it to any client or data store. It provides out-of-the-box and use support for MongoDB.

In fact, Meteor provides two MongoDB databases: A client-side cache database and a MongoDB database on the server. When a user changes some data (for example, by clicking Save), the JavaScript code that runs in the browser updates the corresponding database entry in the local MongoDB and then issues a DDP request to the server. The code immediately continues to run as if the operation had succeeded because it does not need to wait for the server to reply. At the same time, the server is updated in the background. If the server operation fails or returns an unexpected result, the client JavaScript code adjusts immediately based on the data returned from the server. This adjustment, called deferred compensation, provides users with a higher cognitive speed.

It is clear that even the Meteor template system is designed to simplify real-time communication. In most Web frameworks, you can easily mix Hypertext Markup Language (HTML) and code, or markup that is equivalent to HTML, such as HTML abstract Markup Language (HAML). This allows you to easily insert dynamic values from a database into a page that is sent to a user. After that, you should be responsible for preparing a system to observe changes to the data, and then update your markup. However, the template system in Meteor is used to record which data in the template is accessed and automatically callback to call this HTML when the underlying data changes, making the real-time template easier and faster.

Example: Link Popularity contest

The Meteor template feature makes it easier to write many real-time applications. For example, suppose you want to create a site where users can enter links (that is, Uniform Resource Locator, URL) and vote OK and reject them, and the URL that wins the popularity contest is displayed at the top of a list. By using Meteor, you can easily write such an application in real time so that users can see their 65 votes when other users vote.

Install Meteor

To install Meteor, you can type the code shown in Listing 1 into a Linux or Mac OS X terminal. Meteor does not support Microsoft Windows.

Listing 1. Install Meteor

Curl https://install.meteor.com > install_meteor.sh
chmod u+x install_meteor.sh
./install_meteor.sh

You can now create a new project.

Create a new project

The meteor command automates everything that meteor needs to be done during the creation of a new project. Type the command shown in Listing 2 to create a project named Realtime_links.

Listing 2. Create your Meteor project

Meteor Realtime_links
CD realtime_links

Meteor creates a directory that contains an HTML file, a JavaScript file, and a cascading style sheet (CSS) file. The last file is a standard CSS file, but the first two are worth discussing. You can download the full version of the realtime_links.html and realtime_links.js files from the download section.

realtime_links.html file

Listing 3 shows the header and body fragment of the realtime_links.html file.

Listing 3. realtime_links.html Headers and body fragments