Real-time web applications with the Meteor framework
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.
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.
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).
Listing 4
Meteorite Integrates External Packages
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.
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.
Listing 5
Access to Application Data
Listing 6
client/template.html
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.
Listing 7
client/client.js
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).
« Previous 1 2 3 4 Next »
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
TUXEDO Computers Unveils Linux Laptop Featuring AMD Ryzen CPU
This latest release is the first laptop to include the new CPU from Ryzen and Linux preinstalled.
-
XZ Gets the All-Clear
The back door xz vulnerability has been officially reverted for Fedora 40 and versions 38 and 39 were never affected.
-
Canonical Collaborates with Qualcomm on New Venture
This new joint effort is geared toward bringing Ubuntu and Ubuntu Core to Qualcomm-powered devices.
-
Kodi 21.0 Open-Source Entertainment Hub Released
After a year of development, the award-winning Kodi cross-platform, media center software is now available with many new additions and improvements.
-
Linux Usage Increases in Two Key Areas
If market share is your thing, you'll be happy to know that Linux is on the rise in two areas that, if they keep climbing, could have serious meaning for Linux's future.
-
Vulnerability Discovered in xz Libraries
An urgent alert for Fedora 40 has been posted and users should pay attention.
-
Canonical Bumps LTS Support to 12 years
If you're worried that your Ubuntu LTS release won't be supported long enough to last, Canonical has a surprise for you in the form of 12 years of security coverage.
-
Fedora 40 Beta Released Soon
With the official release of Fedora 40 coming in April, it's almost time to download the beta and see what's new.
-
New Pentesting Distribution to Compete with Kali Linux
SnoopGod is now available for your testing needs
-
Juno Computers Launches Another Linux Laptop
If you're looking for a powerhouse laptop that runs Ubuntu, the Juno Computers Neptune 17 v6 should be on your radar.