5 core concepts you should know about MeteorJS in 2024
Tags: javascript, meteor, webdev, beginners
Published: 2024-04-29 15:30:18

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.

{% github https://github.com/meteor/meteor %}

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.

![MeteorJS commit frequency 2012-2024](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urtoxe37imauv7x64mxj.png)

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](https://www.mongodb.com/), 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.

![mongo db logo](https://raw.githubusercontent.com/devicons/devicon/6910f0503efdd315c8f9b858234310c06e04d9c0/icons/mongodb/mongodb-original-wordmark.svg)

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 |
|-------|-----|--------|-------|
|![react](https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg)|![vuejs](https://raw.githubusercontent.com/devicons/devicon/master/icons/vuejs/vuejs-original.svg)|![svelte](https://raw.githubusercontent.com/devicons/devicon/master/icons/svelte/svelte-original.svg)|![solid](https://github.com/devicons/devicon/raw/master/icons/solidjs/solidjs-original.svg)|
|![tailwind](https://raw.githubusercontent.com/devicons/devicon/master/icons/tailwindcss/tailwindcss-original.svg)|![typescript](https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg)|![graphql](https://raw.githubusercontent.com/devicons/devicon/master/icons/graphql/graphql-plain.svg)|![chrakraui](https://avatars.githubusercontent.com/u/54212428?s=150&v=4)

Finally,  it has it's own years-long battle-tested frontend [Blaze](https://blazejs.org) and adding other frontends is also possible via [build plugins](https://docs.meteor.com/api/packagejs.html#build-plugin-api).








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

{% embed https://youtube.com/shorts/FRzLfhl1Sbs?feature=shared %}


---
## WebSocket and DDP

By default clients connect to the server via WebSocket and communicate using a well-defined protocol ([DDP; Distributied Data Protocol](https://github.com/meteor/meteor/tree/devel/packages/ddp)). No need to manage things on your own.

With this you can for example declare and call RPC-style endpoints ([Meteor Methods](https://guide.meteor.com/methods)) or subscribe to published data ([Meteor Publications](https://guide.meteor.com/data-loading)) as easy as it gets:

```js
// 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 })
})
```

```js
// 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](https://guide.meteor.com/methods.html#advanced) 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](https://guide.meteor.com/methods.html#consistent-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](https://guide.meteor.com/build-tool.html).

```sh
$ 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](https://guide.meteor.com/accounts) and minimal config needed for [login with external OAuth providers](https://guide.meteor.com/accounts.html#supported-login-services), such as Twitter/X, Facebook, GitHub, Google, Meetup or Meteor developer accounts. Same applies to [passwordless authenticaion](https://docs.meteor.com/packages/accounts-passwordless.html) and [2FA](https://docs.meteor.com/packages/accounts-2fa).

Deployment to Galaxy (managed hosting for Meteor apps) can be done in a [single terminal command](https://galaxy-guide.meteor.com/deploy-command-line). Even easier it is by using [push-to-deploy via their GitHub integration](https://galaxy-guide.meteor.com/deploy-to-galaxy). Alternatively you can deploy to your own managed infrastructure using the free and open-source deployment tool ["Meteor-Up"](https://meteor-up.com/) 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](https://github.com/quavedev/apple-oauth) or use an external bundler like Vite:

{% link https://dev.to/fredmaiaarantes/meteorjs-with-vite-solid-and-tailwind-css-5d2o %}

---
## 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](https://github.com/meteor/meteor/blob/devel/docs/history.md#v12-2015-09-21); [async/await became available in 2016](https://github.com/meteor/meteor/blob/devel/docs/history.md#v13-2016-03-27);nullish coalescing came day it entered the specifications; full typescript integration in core by [2019](https://github.com/meteor/meteor/blob/devel/docs/history.md#v182-2019-11-14) after years of being supported by [community packages (since 2016)](https://packosphere.com/barbatus/typescript).

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:

{% github https://github.com/Meteor-Community-Packages/meteor-collection2 %}

{% github https://github.com/Meteor-Community-Packages/meteor-roles %}

These are just two example among over 60 repositories of [the Meteor-Community-Packages org](https://github.com/Meteor-Community-Packages). 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.

<!--
## 2. HTTP and REST
## 3.
## 4.
## 5.
## 6.
## 7.
## 8.
## 9.
## 10.

Candidates:

- React as first-class citizen 
- REST 
- Isomorphism (especially useful: Mongo → Minimongo), up to the point that even node-stubs are possible (explain)
- Exact Code Splitting (in code in core in packages)
- Packages
- Optimistic UI
- one-step deployment
- 
-->


---
## 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](https://www.youtube.com/@meteorjscommunity), which covers the latest in Meteor.js and the community.

You can also find me (and contact me) on [GitHub](https://github.com/jankapunkt/), [Twitter/X](https://twitter.com/kuester_jan) and [LinkedIn](https://www.linkedin.com/in/jan-kuester/).

If you like what you read and want to support me, you can [sponsor me on GitHub](https://github.com/jankapunkt), [send me a tip via PayPal](https://paypal.me/kuesterjan) or sponsor a book from [my Amazon wishlist](https://www.amazon.de/-/en/hz/wishlist/ls/12YMIY0QNH9TK?ref_=list_d_wl_lfu_nav_1).