Today we’re officially launching Vulcan! Vulcan is a brand a new extension to Chrome’s DevTools that lets you easily inspect the data inside your Firebase.
Vulcan is the newest addition to Chrome’s DevTools. Named after the Roman god of fire, Vulcan sits as a tab right next to the tools you’re familiar with.
Vulcan is designed to improve your experience building apps. It removes the need to constantly switch back and forth between your browser and your database inspector, giving you immediate feedback on how changing data affects your application. As a result this decreases time between iterations and helps you ship better quality products, faster.
Vulcan makes interacting with your data a breeze. Here are some of the features we’ve built in:
You can use Vulcan inside Chrome DevTools, or you can include a script tag that displays Vulcan as a modal in the lower right of your app.
You can create, read, update and delete data for a specific Firebase.
You can modify the structure of your Firebase by adding a child, adding a branch, or adding arbitrary JSON to any node.
You can input an admin token, which enables editing privileges for secured data.
Vulcan was built using React, Sass, Grunt, and Firebase.
We chose React because of its efficient rendering engine. Firebase databases can be arbitrarily large JSON objects and displaying/updating a large numbers of nodes is where React shines. In addition, React takes a modular approach to components that works seamlessly with Firebase. Since Vulcan is more of a module than a full-blown app, React’s lightweight approach is a great fit.
Vulcan is an open source project. If you’re interested in contributing, forking, or simply reading the source code it’s available on Github. We look forward to your feedback, ideas, and help. If you run into any issues or have a feature request, please open a ticket on the Github repo.
Vulcan is free and you can get it from the Chrome App Store. Once installed, you’ll see a Firebase tab in the Chrome Dev Tools console.
Finally, we’re currently looking for frontend developers! Vulcan was created during one of our experiment weeks at Firebase. We dedicate an entire week every two months to experimental projects outside of our regular work (The winning team gets the covetted plastic karate trophy). If that piques your interest, we’re hiring!
Last week, we released v1.0.0 of our open-source apps Firepad and Firechat! These are two great open-source modules built on top of Firebase that you can take and use in your own apps.
Firepad is a collaborative text editor. It lets you bring the features of Google Docs right into your app. Firepad can handle both code and rich text, and is currently being used in production by Atlassian, LiveMinutes, and CoderPad to name a few.
Firechat is a realtime chat app built with Firebase. Firechat’s features include multi-user / multi-room chat, flexible authentication, moderation, presence, private messaging, chat invitations and more. CBS is using Firebase to power the realtime chat for their Big Brother TV series.
Orginally we built both of these modules to showcase the realtime and collaborative power of Firebase, but they’ve grown into full-featured, production-ready pieces of functionality. Both projects have reached the point where they’re stable, full-featured and well-documented, so we’ve decided to officially tag them as 1.0!
Here's what's new in the 1.0.0 releases:
With help from the community, we’ve added some highly-requested features and fixed many bugs over the past few months.
We added a headless mode for interacting with documents programmatically with no GUI (e.g. from your backend server code). It can run in Node or in a browser. To use it from Node, just run npm install firepad, require the module, and add a headless instance of Firepad using the following code:
npm install firepad
var Firepad = require('firepad');
var headless = new Firepad.Headless('');
We've made a number of API improvements to make writing apps using Firepad easier. For instance, there's a new defaultText option to specify initial text to be loaded in Firepad, and there's a new "synced" event to notify you when your changes have successfully been synced with Firebase so you can provide notice to the user. See the API docs for full details.
We've also fixed many minor bugs and UI issues to make the collaborative editing as fluid and seamless as possible! Firepad is now available on the Firebase CDN as well as Bower, making it even easier to include in your app.
Our Firechat homepage is now hosted on Firebase Hosting. In addition to this, we’ve improved the documentation, fixed bugs, and added warning messages to make development easier. Firechat now works well with other frameworks like Twitter Bootstrap, so you can customize the app’s default styling.
If you’re using Firepad or Firechat in your apps, we’d love your input. Email us any feedback at email@example.com or submit a pull request on GitHub. We’re excited to see what you build!