VulcanJS: Easiest Way To Build Full Stack Web Applications

Short Bytes: VulcanJS is a full stack toolkit based on React, Redux, Apollo GraphQL, and Meteor created by Sacha Greif. It allows a developer to make full stack apps easily and quickly using built-in User Accounts and Permissions, Auto Generated Forms and Schemas, Lots of Example Code and Boilerplate, Optimistic UI Updates and more.

In 2012, Meteor Full Stack Javascript Platform was the first visionary nodejs- based platform ever to attempt a proper full stack abstraction. What it meant was that it provided a developer with much magic so that you could focus on just the business logic of your application. Let’s tell you more about the same;

• It had an accounts package out of the box. One just had to write mere 10 lines of code and you had user accounts built right in to start using. No need for custom user authentication. Both username and password based authentication as well as other federated outh providers like Facebook, Twitter, Google, Github, LinkedIn logins.
• Real Time Data Sync Reactivity was built right in the platform. It meant that as soon as data changed in the database (Meteor chose MongoDB for obvious reasons ), the subscribed UI Components changed in real time. Say someone commented on a post while you were reading another comment, it shows in real time.
• Magical Build System. So one wouldn’t have to spend time in architecting a build process using available javascript bundlers and build process aids like browserify, webpack, gulp, grunt, etc.
• Optimistic UI Updates. As soon as a user engaged in an action, regardless of whether a user is allowed to do so, meteor used to change the UI anyway (think a comment if you aren’t logged in), check on the server if the user was allowed to do that action, and revert back the action if the user wasn’t. This way everything seemed fast (because most of the times user did have the permission to take that action).

Apart from this, on an API level, Meteor had an easy to understand pub-sub system, built-in email sending utility, and much more.

One of the best Meteor apps developed I’ve seen and used is Code Fights.

As years went by, Javascript ecosystem exploded. New frameworks and libraries, new Javascript features and nuances came stormed. However, a developer tried something new with Meteor.

Sacha Grief, a developer from Paris living in Japan, is known for being a co-author of a very detailed book called Discover Meteor. The book is all about building a hacker news like clone using Meteor, hands on. The book is pretty outdated now, but Sacha continued to evolve that app’s stack to use the latest tested technologies and libraries.

Fast forwards 2017, he has ported the app he originally named Telescope onto a new stack (React, Redux, Apollo GraphQL) calling it VulcanJS.

VulcanJS powers telescope hacker news like clone with new tech, but at the same time it also empowers a developer to develop whatever they want. I’m building a searchable, filterable, sorted Alumni index web app for my alma mater using it. See it in action here:

Some of the awesome things that VulcanJS provides:

• Everything that Meteor with its initial stack had.
• User Group Permissions, so that you could categorize user actions as say, admin, members (logged in users), guests, etc.
• Property Level Action Checks on Schema

  title: {
    type: String,
    viewableBy: ['guests'],
    insertableBy: ['members'],
    editableBy: ['members'],
  },
  status: {
    type: Number,
    viewableBy: ['guests'],
    insertableBy: ['admins'],
    editableBy: ['admins'],
  }

• Stripe Payments built right in and tooling to associate payments with products (might be e-commerce products, membership, sponsorship, advertisements, donations, etc…)
• Customized Email Templates and Email Flow
• Meteor’s Accounts in React (the preferred UI library of Meteor Development Group)
• Autogenerated Forms. This is a killer one. You define your Schema one time, both for the database and for GraphQL Schemas, and then if you want, forms for a particular type of documents or collection (for example for adding or editing information about videos) get created automatically for you! All the forms that you’d see using Sidebar (a design newsletter by Sacha) are created this way.

Schema could be something like:

link: {
  type: String,
  viewableBy: ['guests'],
  insertableBy: ['members'],
  editableBy: ['members'],
},
title: {
  type: Number,
  viewableBy: ['guests'],
  insertableBy: ['members'],
  editableBy: ['members'],
},
description: {
  type: String,
  max: 500
  viewableBy: ['guests'],
  insertableBy: ['members'],
  editableBy: ['members'],
},
tags: {
  type: Array,
  viewableBy: ['guests'],
  insertableBy: ['members'],
  editableBy: ['members'],
},
tag.$: {
  type: String
},
location: {
  type: String,
  viewableBy: ['guests'],
  insertableBy: ['members'],
  editableBy: ['members'],
}

The line of code that would auto-generate the form:

<Components.SmartForm
  collection={Videos}
  {...props.terms}
  successCallback={video => {
    props.flash(
      context.intl.formatMessage(
        { id: "users.edit_success" },
        { name: Users.getDisplayName(user) },
       ),
       "success",
     );
  }}
/>

What Makes VulcanJS The Easiest Way To Start Building Full Stack Apps?

• Everything is taken care of for you. For example, you do not have to know a lot about how GraphQL nuances work; it’s already been taken care of you.
• Everything is transparent; you’ll always know what is happening and where
• Latest battle-tested technologies that are easy to get up and running with are used. Lots of resources to learn them online.
• Lots of example app code you can check out before you start using VulcanJS. For example, Sacha has put together four example apps: Vulcan-Movies, Vulcan-Instagram, Vulcan-Forums (the hacker news like clone), Vulcan-Customization.
• Lots of tutorials about these example apps as we as how to use Vulcan, including code walkthroughs on VulcanJS youtube channel.
• Super detailed documentation, so you’d always know where to look while you code.
• Super active Slack channel, where core VulcanJS committers (Sacha, Comus, Xavier) are always hanging around to help, like always.

Meteor has had its fair share of criticism, one of them being that the initial load page time is slow because Meteor didn’t support code chunking. Thanks to the latest 1.5 release, Meteor now supports dynamic import statements. It means that you can load the code only when you want it and not before hand. Plugging it in with react-loadable makes it all the more performant.

Did you find this article on VulcanJS interesting? Don’t forget to share your views with us.