MeteorJS is a JavaScript development platform for web- and mobile apps. It's most suited for, but not limited to, building single page applications (SPA), mobile apps, and complex web apps with feature-rich clients.

meteor / meteor

Meteor, the JavaScript App Platform

---

Meteor is an ultra-simple environment for building modern web applications.

---

• Official Website
• Installation
• Documentation

---

📚 Create your applications using modern JavaScript

Benefit from the latest technology updates to rapidly prototype and develop your applications.

---

✨ Integrate technologies you already use

Use popular frameworks and tools right out-of-the-box. Focus on building features instead of configuring disparate components yourself.

---

💻 Build apps for any device

Use the same code whether you’re developing for web, iOS, Android, or desktop for a seamless update experience for your users.

---

🔥 Getting Started

How about trying a tutorial to get started with your favorite technology?

React
Blaze
Vue
Svelte

Next, read the documentation and get some examples.

🚀 Quick Start

On your platform, use this line:

> npm install -g meteor

🚀 To create a project:

> meteor create my-app

☄️ Run it:

cd my-app
meteor

🧱 Developer Resources

Building an application with Meteor?

• Deploy…

View on GitHub

It's is actively developed since 2012 and thus, among the most stable platforms in the JavaScript ecosystem. Chances are high, you have heard of it or knew it from past experiences.

In this article I want to present you the 5 core concepts of MeteorJS and their state in 2024. Compare for yourself, if this is still the MeteorJS you know from back then.

True Full Stack

MeteorJS uses JavaScript across the whole stack, from DB to client. This philosophy is one of the most important factors of why getting started with Meteor is such an ease:

you only need to deal with one programming language.

On the database-level it automatically integrates with MongoDB, the biggest NoSQL database out there. Every Meteor release has a specific MongoDB binary bundled. There is no need for additional setup and you can start using it right away, due to a very carefully crafted integration of the MongoDB JavaScript driver.

In contrast to the tight coupling on the database-level, MeteorJS is very flexible in supporting many of the popular frontends. By default it supports React, Vue (2 + 3), Svelte and Solid. It also provides core-support for TypeScript, GraphQL (via Apollo), Tailwind, Chakra-UI, plus whatever you want to integrate via NPM packages.

Great	tech	MeteorJS	supports

Finally, it has it's own years-long battle-tested frontend Blaze and adding other frontends is also possible via build plugins.

Creating a new project with these technologies is as easy as it gets by using the builtin meteor create dialog:

WebSocket and DDP

By default clients connect to the server via WebSocket and communicate using a well-defined protocol (DDP; Distributied Data Protocol). No need to manage things on your own.

With this you can for example declare and call RPC-style endpoints (Meteor Methods) or subscribe to published data (Meteor Publications) as easy as it gets:

// server/main.js
const Todos = new Mongo.Collection('todos')

Meteor.methods({
  async addTask ({ title }) {
    const { userId } = this
    return Todos.insertAsync({ title, userId })
  }
})

Meteor.publish('myTasks', function () {
  const { userId } = this
  return Todos.find({ userId })
})

// client/main.js
const Todos = new Mongo.Collection('todos')

Meteor.subscribe('myTasks')

// yes, top-level await 
await Meteor.callAsync('addTask', { title: 'do laundry' })
await Meteor.callAsync('addTask', { title: 'clean kitchen' })

// ... subscription ready

await Todos.find().fetchAsync() // reactive!

There is also an extensive guide, that also covers the DDP lifecycle of a Method call in detail.

Optimistic UI

For every method there is a client-side "stub", which is basically a simulation of what is likely to happen on the server. If we defined this Method in client and server code, as all Methods should be, a Method simulation is executed in the client that called it. The client enters a special mode where it tracks all changes made to client-side collections, so that they can be rolled back later. When this step is complete, the user of your app sees their UI update instantly with the new content of the client-side database, but the server hasn’t received any data yet.

In the meantime the server gets called and is likely to produce the same result, for which no further updates to the UI are needed. If the server produces a different result, then the UI will quickly update to comply with the "truth", returned from the server.

This works in particular, since there is also an optimistic id-generation for the documents in the client-side MongoDB collections.

Zero Config

MeteorJS comes with full batteries included. This means, there is no config needed for creating a development-build or production-build or to provide auto-reload and hmr. This is all taken care of by Meteor's build system.

$ meteor create myproject
# ... create your project
$ cd myproject && meteor
# runs at localhost:3000

There is no config or code required for connecting clients to server, establishing messaging or rules for their interaction. This is all handled by the aforementioned DDP protocol.

There is no config or code needed for password based authentication and minimal config needed for login with external OAuth providers, such as Twitter/X, Facebook, GitHub, Google, Meetup or Meteor developer accounts. Same applies to passwordless authenticaion and 2FA.

Deployment to Galaxy (managed hosting for Meteor apps) can be done in a single terminal command. Even easier it is by using push-to-deploy via their GitHub integration. Alternatively you can deploy to your own managed infrastructure using the free and open-source deployment tool "Meteor-Up" with ease.

Despite all these out-of-the-box experiences, many things are still configurable. For example, you can write your own OAuth2 integration for third parties, such as Apple or use an external bundler like Vite:

Meteor.js with Vite, Solid, and Tailwind CSS

Frederico Maia ・ May 10 '23

#meteor #solidjs #vite #tailwindcss

ESNext

MeteorJS has always strived to be in sync with the latest ESNext, following the latest Babel versions or implement things on their own. To name a few examples: import/export were available very early on as core part of MeteorJS; Promises support started in 2015; async/await became available in 2016;nullish coalescing came day it entered the specifications; full typescript integration in core by 2019 after years of being supported by community packages (since 2016).

MeteorJS will continue to be on ESNext, giving devs the ability to be up-to-date, simply by updating their apps using meteor update since these features are baked into the ecmascript core package.

Community Packages

While the list contains five core concepts, there is one meta-level concept that is crucial for the MeteorJS ecosystem. It's all the packages, developed and maintained by the community!

Many packages are zero-config drop-ins to provide an extended experience to the MeteorJS core functionality.

Some of them play such an important role and are used by so many projects, that they got moved to Meteor Community Packages, an org to maintain and improve the most popular packages and to ensure a vital ecosystem:

These are just two example among over 60 repositories of the Meteor-Community-Packages org. Finally, some packages even make it to the core, such as the aforementioned typescript package. This shows the constant importance of community packages as vital part of an active and alive development platform.

About me 👋

I regularly publish articles about Meteor.js and JavaScript here on dev.to. I also recently co-hosted the weekly Meteor.js Community Podcast, which covers the latest in Meteor.js and the community.

You can also find me (and contact me) on GitHub, Twitter/X and LinkedIn.

If you like what you read and want to support me, you can sponsor me on GitHub, send me a tip via PayPal or sponsor a book from my Amazon wishlist.