10 tips to get off the Meteor

1. Replace Meteor Packages with NPM Modules

  • Any package that exists on NPM, switch to it.
  • Remove your Meteor packages in favor of NPM Modules
  • Refactor any of your organizations Meteor packages either into the imports directory or straight to an @org NPM Module.

2. Get off Iron Router

Problem

Solution

  • Embrace another UI Library
  • Embrace a community route solution or the one that comes with the UI Library
  • Ensure you contribute, so in the case you get Iron Router’d you may be able to understand the inner working of both the project’s politics and code.
  • Remove all Routing hooks and move them to the UI Layer
  • Remove all Subscriptions, and waitOns and move them to the UI Layer
  • Instrument a Routing interface between your application and a Routing Library
  • Replace Iron Router calls with this Routing Interface
  • Replace your UI Layouts that IronRouter made you have
  • Replace the library and update the interface for legacy code
  • Start writing new Routing code with interface or remove interface all together
  • Replace Iron Router Server side Routing with an Express Server. Explained below.

3. Remove Blaze ASAP

  • Start with child nodes of your UI Tree. Replace them into small Components and render them back into Blaze. If you’re using React you can use the React Template helper in Blaze
  • Once the child nodes are complete, get the parent node
  • Or you want to start from the top down, use this: https://github.com/gadicc/meteor-blaze-react-component to turn Blaze templates into React Components

4. Replace Minimongo/Tracker/ReactiveVar/Session

5. Microservice Feature Development

6. Get on Apollo

  • Move everything that was an unnecessary reactive cost to Meteor Methods
  • Replace Meteor Methods with GraphQL queries and mutations.
  • Anything that was in a subscription that needed to be, like Users, keep in Meteor but plan for replacing with push based GraphQL Subscriptions.
  • Start incrementally adopting Apollo Client in your application. New features should be architected with Apollo and old features can be refactored during maintenance time or improvement times if you have the luxury.

7. Replace Kadira with another performance Monitoring Tool

Instrument New Relic

Instrument GraphQL

8. Mount an Express Server on your App

const express = require('express');
const compression = require('compression');
const bodyParser = require('body-parser');

const server = express();
// express middleware
server.use(compression());
server.use(bodyParser.json()); // application/json
server.use(bodyParser.urlencoded({extended: false})); // application/x-www-form-urlencoded
// install the express server within meteor webapp connect
WebApp.rawConnectHandlers.use(server);

9. Create a different Entry Point

  1. Make a .web or .client folder. This will make Meteor’s build tool unaware of this folder and will not build it in course of normal Meteor builds
  2. Install Webpack 2 and start scaffolding your new Single Page App
  3. If you need code from your main Meteor app that is not dependent on Meteor globals, you can import them just fine in the Webpack App
  4. For Legacy systems that still need DDP, use https://github.com/mondora/asteroid, if you want to share login state between this SPA and your main Meteor app (comment down below I can help you out). With Asteroid you can still hit your Meteor backend for legacy pub/sub and meteor methods. (But you should be using GraphQL right?)
  5. Once you have this new SPA you can build your Webpack bundle into your public directory and scaffold an index.html file using https://github.com/ampedandwired/html-webpack-plugin
  6. Once you have your JS Bundle, Vendor Bundle(if you need), and index.html in your public directory, make sure your app in production mode caches these in a CDN.
  7. For now, render your bundle on the client via an Express Server route. e.g. ‘/jobs’ if thats the starting point for this SPA
  8. Use the client side routing of the SPA to move throughout the app.
  9. While your App is running, load the meteor bundle in the background via an async script tag
  10. If you ever need an escape hatch back into Meteor, just route to that route directly outside of the pushState your SPA has.

10. Peak your head in other communities

Conclusion

--

--

--

Software Engineer at Workpop, Inc.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhi Aiyer

Abhi Aiyer

Software Engineer at Workpop, Inc.

More from Medium

How to Reset React Context

React context code snippet

Context vs. Composition in React

What is a controlled component and why we use it in React