Vulcan: “Meteorizing” Apollo

Vulcan is the follow-up to the original Telescope project. It’s the result of all these months experimenting with Apollo, and all the many years using Meteor that came before that. Here’s a quick video intro about Vulcan, or else just keep reading!

In a nutshell, Vulcan is an app-building framework for Meteor architected around Apollo and React, and its goal is to bring Meteor’s original vision and simplicity back; except this time using modern, standardized JavaScript libraries.

In practice, Vulcan achieves this through the following core features:

Rich Schemas

In Vulcan, everything starts with your collection’s JSON schema. You can use it to specify field types, default values, and various other validation options, but you can also go much further, using it to control which fields should be published to which users, as well as which groups can modify any given field:

postedAt: {

type: Date,

optional: true,

viewableBy: ['guests'],

insertableBy: ['admins'],

editableBy: ['admins'],

control: 'datetime'

}

Based on this information, Vulcan can then auto-generate your GraphQL schema from your collection schemas, saving you the effort of writing your schemas twice.

Powerful Forms

Having access to rich schemas also lets Vulcan generate and handle forms for you (like if Autoform had been baked right into Meteor).

In other words, if you mark a schema field as editableBy: ['admins'] , then Vulcan will know to only show that form field to admins on the client, and disallow any updates to that field by non-admins on the server.

And since you have all the power of React at your fingertips, you can use any React component you want inside your form. Think datepickers, multi-selects, or even integrations with third-party services like Embedly or Google Maps:

A form with custom components, as seen on GambaClimbing.com

Easy Data Layer

Vulcan also gives you a number of utilities and helpers to make using Apollo easier. For example, in order to load data on the client you can use the built-in withList higher-order component:

const options = {

collection: Posts,

fragmentName: ‘PostsList’

}; export default withList(PostsList);

Just specify the collection to load data from, as well as a fragment (in other words, a list of field names) specifying which fields to load, and the withList function will do the rest, loading your data and passing it on to the PostsList component as a results prop.

Never worry about manually updating your store again!

And like I said, Vulcan’s goal is to “meteorize” Apollo, making it as painless to use as good old Minimongo. Which is why withList will also transparently take care of keeping your Redux store in sync with the database for you when it comes to the main insert/edit/remove mutations.

Sidebar, running Vulcan in production

Enjoy Server-Side Rendering, User Accounts, and more…

So far we’ve only scratched the surface of what Vulcan can do. Besides classic features like a user accounts package and built-in server-side rendering, Vulcan also has packages for things like generating an email newsletter from your content, scraping URLs for metadata, as well as example projects such as Instagram and Hacker News clones.

…Or Don’t!

Vulcan was built with modularity in mind from the start, and the fact that it uses a package-based architecture means you can replace any aspect of the app with your own custom package without breaking the rest of the codebase.

What’s more, this philosophy extends everywhere in Vulcan. Would you rather handle your GraphQL schema yourself? Then just turn off schema generation and provide your own. Like to write your own higher-order components? Then just replace the afore-mentioned withList with your own tailor-made version. Anything that Vulcan offers can also be turned off if you prefer.

So Why Vulcan?

More than a list of features or technologies, Vulcan boils down to a vision: make it easier than ever to quickly build new apps, without sacrificing scalability and maintainability.

It does this by building on top of strong foundations, and in a way that lets you swap out any part at any moment.

Getting Started

So if you’d like to give Vulcan a shot, here’s the three things you need to do:

This should be more than enough to give you a good idea of how Vulcan works, and whether or not it fits your needs. And don’t hesitate to join our Slack chatroom if you have any questions, or just want to say hello!