Over the past few years, the use of JavaScript as a full-stack web technology has increased through the use of libraries such as React and Angular. As a result, the open-source platform Meteor was created. This post looks at the potential of Meteor to change the landscape of website development as we know it today.
What in the universe is Meteor?
Meteor is a full-stack JavaScript platform for developing modern web and mobile applications.
Looking at the platform’s website, it claims to be the “fastest way to build JavaScript apps”. Being the logically-minded individual that I think I am, it appears to be rather difficult to prove/disprove that idea. Regardless, I have gathered that Meteor is currently marketed as the quickest platform to work with from inception to implementation for producing a full-stack JavaScript engineered web solution which can be deployed once for multiple devices (web/mobile).
“Fastest” is claimed to be achieved by Meteor through:
Reduced code bloat
Accomplish in 10 lines what would otherwise take 1000.
It is true that through the power of minification, the number of lines in a JavaScript file can be reduced by a signficant amount. With a full-stack JavaScript application, I can imagine this being quite effective. But maybe instead of that, they’re claiming that JavaScript is a more lightweight language than the likes of PHP and Java, which is indeed possible - but let’s not go into that.
One repository, multiple devices
Use the same code whether you’re developing for web, iOS, Android, or desktop.
This is very appealing and would obviously save a lot of time, but should we consider how many solutions actually require an application to be consistent across web and mobile? Would this feature be redundant for those clients seeking a mobile-enhanced solution?
A powerful, large ecosystem of packages
Use popular frameworks and tools, right out-of-the-box.
As an open-source platform, Meteor does have a collaborative community base. As we’ll discuss later, the package system implemented in every Meteor installation provides a simple and effective way of incorporating modules, addons, plugins (or whatever else you would like to call them) into a site by using a simple CLI. I’m always in favour of not having to re-invent the wheel every time I write code.
Application Structure
With Meteor being a full-stack JavaScript platform, one would imagine there is code to manage both front-end and back-end requests/responses. Now how is this achieved? Let’s take a look at the typical file structure a Meteor application must follow:
Three top-level directories
client- all code used by the client/browser/userserver- all code used by the serverimports- all other code/assets/files including the importantstartup(bootstrap) directory
A typical Meteor installation file structure
imports/
startup/
client/
index.js # import client startup through a single index entry point
routes.js # set up all routes in the app
server/
fixtures.js # fill the DB with example data on startup
index.js # import server startup through a single index entry point
api/
posts/ # a unit of domain logic
server/
publications.js # all post-related publications
publications.tests.js # tests for the post publications
posts.js # definition of the Posts collection
posts.tests.js # tests for the behavior of that collection
methods.js # methods related to posts
methods.tests.js # tests for those methods
ui/
components/ # all reusable components in the application
# can be split by domain if there are many
layouts/ # wrapper components for behaviour and visuals
pages/ # entry points for rendering used by the router
client/
main.js # client entry point, imports all client code
server/
main.js # server entry point, imports all server code
JavaScript and data, together in harmony?
I wouldn’t say that exactly - Meteor uses MongoDB to hold a persistent data layer which exists as long as the server is running. If you are unfamiliar with MongoDB, “collections” (tables) are used to hold “documents” (records).
Collections
Here’s where it get’s interesting, a collection can either be created for use on the server or use on the client. Client collections are used to store local data for yes you guessed it, the client! These collections act as cached versions of the server side collections. Server collections represent stored data in the MongoDB database and act the same as a standard table.
Posts = new Mongo.Collection('posts');
Publications
Meteor is built from the ground up on the Distributed Data Protocol (DDP) to allow data transfer in both directions. Building a Meteor app doesn’t require you to set up REST endpoints to serialize and send data. Instead you create publication endpoints that can push data from server to client.
By defining a publication in the api directory (see above), a list of documents stored in a collection is available for the client to subscribe to and receive real-time results. This allows Meteor applications to be reactive and adapt to ever changing data immediately.
// Server side
Meteor.publish('posts.all', function() {
return Posts.find({}, {limit: 10});
});
// Client side
const postsHandle = Meteor.subscribe('posts.all');
if (postsHandle.ready()) {
console.log("My subscription is ready!");
}
Reactive Nature
Meteor officially supports three user interface (UI) rendering libraries, Blaze, React and Angular.
Blaze
Blaze was created as part of Meteor when it launched in 2011, and hence is claimed to be most integrated among the three with Meteor architecture. It uses a handlebarsJS-like templating syntax with HTML known as Spacebars.
<template name="myPage">
<h1></h1>
{{> nav}}
{{#each posts}}
<div class="post">
<h3></h3>
<div class="post-content">
{{{content}}}
</div>
</div>
{{/each}}
</template>
React
React with Meteor can be achieved simply by adding the npm React dependency to the installation. This allows you to write React components in JSX as with any other React application.
import React from 'react';
export default class HelloWorld extends React.Component {
render() {
return (
<h1>Hello World</h1>
);
}
}
Angular
Angular with Meteor is officially supported and there is even a separate dedicated community at Angular-Meteor.com. Although it seems to be a lot more work (bootstrapping) to get both working together effectively than with React or Blaze.
import { Component } from '@angular/core';
@Component({
templateUrl: 'posts.html'
})
export class PostsPage {
constructor() {
}
}
When does a Meteor become an Asteroid?
As mentioned before, Meteor employs its own fantastic packaging system known as AtmosphereJS, previously developed as an NPM package known as Meteorite (you can read their full story here).
AtmosphereJS
Atmosphere packages are written specifically for Meteor and have several advantages over npm when used with Meteor.
As you can imagine, this makes Meteor a pretty powerful platform, and encourages the open-source community to collaborate and improve on the platform over time.
One can simply browse the AtmosphereJS website and use the Meteor CLI to install packages:
meteor add react-meteor-data
Mobile
Meteor integrates with Cordova, a well-known Apache open source project, to build mobile apps from the same codebase you use to create regular web apps. With the Cordova integration in Meteor, you can take your existing app and run it on an iOS or Android device with a few simple commands.
Cordova wraps HTML/CSS and JS into a native container to target multiple platforms. As a web app in itself, it means the Meteor application can simply be wrapped to support mobile devices immediately. However, as mentioned before - what if the client wants to expand on the mobile version of an application? Fortunately, there are neat conditionals that can be used to identify the user’s device:
if (Meteor.isServer) {
console.log("Printed on the server");
}
if (Meteor.isClient) {
console.log("Printed in browsers and mobile apps");
}
if (Meteor.isCordova) {
console.log("Printed only in mobile Cordova apps");
}
However, depending on how different the mobile version is desired to be, one could argue that keeping both together with countless device conditionals would be counter-intuitive. It may make more sense to split the code into two applications and use some funky routing - but that’s for another discussion.
Community Support
It’s rather easy to find a wide range of resources, tutorials and even books for learning how to use Meteor effectively. It’s great to see that a fairly new platform already has such a large and passionate community.
IDE’s & Tools
Many Integrated Development Environments (IDE) have started to incorporate working with Meteor with new plugins and tools. You can see some of these below:
JetBrains WebStorm 9
WebStorm 9 integrates with Meteor including automatic recognition of Meteor projects, coding assistance, running and debugging apps.
Atom
There are several packages available in the Atom ecosystem to assist Meteor development. Meteor API offers autocomplete, code snippets, color-coded grammar and syntax highlighting, while Meteor Helper enables launching and killing Meteor within Atom.
Books and Learning Resources
Do you like reading? Then look no more, there’s as many as 4 books available for you to digest - if that takes your fancy:
Discover Meteor
Learn Meteor and build faster & simpler web apps, as we teach you how to build a real-time Meteor app from scratch.
Your First Meteor Application
An online book about the Meteor JavaScript framework that helps beginning web developers build their first real-time web application with Meteor in a matter of hours.
Meteor In Action
Let us show you how to make the most of this amazing platform to impress users, reduce development time, and turn your ideas into code.
Getting Started with Meteor.js JavaScript Framework - Second Edition
An easy to follow, step-by-step approach to learning how to build modern web applications with Meteor.
Conclusion
To conclude, I believe that Meteor will most certainly increase in popularity and is in a very good position to push JavaScript to start to replace other technologies for website development. Meteor is extendable, it has countless packages to choose from, or the opportunity to create your own. Meteor is fast, an application can be deployed for multiple platforms at one time. Meteor is efficient, using only JavaScript code the application can be minified to increase performance and improve user experience. No doubt, there are other platforms suitable for developing your application, but it is the fast nature of Meteor development that really stands out.
Try Meteor out by installing it from their website - it may just be a game changer.
