Reactivity

Figure 4 shows the effect of adding an object to the Articles data collection. This is triggered by running Listing 3 in the browser (bottom left, Figure 4). Meteor transfers the stored object in real time to MongoDB on the web server and then updates the copies of the application data in all other browser sessions. Then, all templates that read from the Articles data collection respond in all browsers by automatically computing and updating the DOM tree in the browser.

Figure 4: Changes can spread like an avalanche in real time across all entities involved.

The program code automatically recomputes itself when the data on which it depends changes, which is referred to as reactive programming [4]. To exchange data in real time, the web server uses a WebSocket connection [5] to connect to each browser. Figure 5 shows the effect of reactive behavior in the sample application. After saving a new post in the browser on the right, the post appears automatically in the browser on the left.

Figure 5: The sample application provides a list of posts (left) and an editor (right).

Meteor packages extend the functionality of a web application: The meteor --list command lists all the packages that come with the Meteor distribution. The meteor add <package name> command installs a Meteor package; meteor remove <package name> removes it again. Packages with the JavaScript libraries jQuery, Underscore, and Handlebars are included in Meteor applications by default.

The version and package manager, Meteorite [6], integrates external packages. It can retrieve packages from Atmosphere, the public directory [7]. Although the package format for Meteor is not yet fully specified, Atmosphere already has about 800 packages.

Listing 4 installs Meteorite on an Ubuntu 12.04 system. Line 1 first uses apt to install the required Git software control system. Then, line 3 uses npm, the Node.js package manager, from the Meteor distribution to install Meteorite. Before this, line 2 added the directory containing the npm binary file to the PATH environment variable. Finally Meteorite uses the mrt command to install the Moment JavaScript from the Moment Meteor package (line 4).

Sample Application

Again, Figure 5 shows the sample application created with Meteor. The very simple content management system, Starpublisher, displays a list of posts in the left-hand browser, including the creation date, author, title, and text. The posts are sorted in descending order by date, so the newest is always at the top. Clicking on a post opens it in the editor, as shown in the right-hand browser. Pressing the Save button updates the post, and Delete removes it. The Add menu item creates a new post in the editor.

Only registered users can post an article, and only they can revise or delete it later. Registration is handled by the Sign In menu item, which you can see in Figure 6 (top right). The developer first creates the core functions for listing, saving, and deleting posts. They then provide the menu and access controls.

Figure 6: Visitors can sign in and list, edit, or create new posts via the main menu.

Listing 5 initializes access to the Articles data collection. This JavaScript code resides in the model.js file in the root directory of the project website, from which the web server and browser load and run it. The template in Listing 6 renders the posts from the Articles data collection in the browser. It is written in the Handlebars [8] template language and stored in the template.html file in the client directory. Line 2 calls the articles template (lines 6-15); line 3 calls the editor template (lines 17-27). Before rendering in the browser, Handlebars replaces the template calls with their return values.

Template with a Loop

The Articles template uses #each to iterate (lines 8-14) over all the posts stored in the articles template variable. In each round of the loop, it outputs a post with its date, title, and text. The editor from the template of the same name stores the current post ID in the input element in line 19, the title in the input element in line 21, and the body text in the TextArea element in line 23. The buttons in the next two lines save or delete the post.

The JavaScript code in Listing 7 provides the template from Listing 6 with data and adds interactivity. Lines 1 to 3 bind the articles template variable in Listing 6 to a function in which the find() method in line 2 reads all the objects in the Articles data collection. The object in the second parameter of the call sorts the objects in descending order on the date field.

Access to the articles template variable in Listing 6 is handled internally via the database cursor returned by find(). If the data collection changes, the cursor then triggers a recompute of the template from Listing 6, lines 6 through 15.

Lines 5 to 9 in Listing 7 generate the auxiliary formatDate function, which is called in line 10 of Listing 6. It formats a date object as a readable string using the JavaScript Moment library installed in Listing 4. The call to the events() method in lines 11 to 16 and 18 to 28 of Listing 7 uses callback functions to define the event handler for selected HTML elements. The code passes exactly one object comprising key-value pairs to each call.

In line 12, the click key assigns a click on a post to the callback function in lines 12 through 15. In line 14, the load() function loads the post into the editor; it was selected previously in line 13 with FindOne() by reference to its ID and stored in the doc variable.

In line 19, the click #save key calls the upsert() method in the callback function from lines 19 to 23 when the Save button from Listing 6 is clicked. Then, upsert updates the existing posts or creates them if they are new.

The upsert method expects the post ID and the post in the form of a JavaScript object. The code uses the val function to read the required values. For a delete, the callback function removes the record by calling the remove() method (lines 24 to 27).