JSFoo: round the year submissions

JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

anna herlihy

@aherlihy

How to Write a Compass Plugin

Submitted Feb 14, 2018

Compass is a MongoDB user interface tool written for Electron using NodeJS and React. So what happens if a user has a feature request we can’t support? We let them do it themselves! This talk is about how we implemented a plugin architecture for Compass so that users can write their own features. I will demo Compass, describe the plugin architecture, and then live-code an example plugin. Attendees who are interested in writing their own plugin architecture will learn about how we solved the specific problems with supporting external plugins in an Electron app. I will also explore the security implications of having third-party plugins and the unique challenges involved with supporting open-source plugins in a closed-source project. Writing a Compass plugin is a lot of fun, as well as a great way to get to know React, Node, MongoDB. Attendees will leave the talk with an understanding of how the Compass plugin architecture works and how to start writing their own plugin.

Outline

  • What is Compass?
    • Compass is an Electron App written in React and NodeJS. Plugins are React apps built with Webpack that can be run inside or independently of Compass.
    • Short live Compass demo
  • Why write a plugin architecture?
    • Writing your own software means you can make it as specific to the problem you’re trying to solve as you want. Users can have really specific needs that sometimes don’t make sense for anyone else.
    • Both users and developers can share prebuilt plugins with collaborators to share data/provide support.
    • We couldn’t handle the feature request volume. We were a team of two people (now four!) with over a hundred thousand users.
    • Engage the community! Compass is a closed-source project within an open-source company.
  • Where can my plugin fit into Compass?
    • Summary of visual roles for Compass Plugins with examples, UI considerations and data access.
  • How does my plugin fit into Compass?
    • Brief explanation of React/Reflux/Redux.
    • Description of the plugin architecture and the application registry, including the handshake between plugins and the Compass core.
    • A template is provided so that you have a place to start coding immediately.
  • Live Code Sample Plugin: whoami?
    • Goal: add a small, instance-level header that indicates if anyone is logged in.
    • Live code the store, component, and actions. Show how Compass becomes aware of the plugin and how the plugin becomes aware of Compass. Ta da! Now everyone go write a plugin :)
  • Security Restrictions
    • Network, Filesystem access, permissions
  • Future Plans
    • The eventual goal is for MongoDB to host a “Plugin Marketplace” where we can provide security audits for published plugins.
    • MongoDB can provide support and marketing for community plugins the same way we support community drivers.

Requirements

This talk is for any person with an interest in React, NodeJS, Electron, MongoDB, or Compass. It does not require expertise in either MongoDB or React, as I will briefly go over what MongoDB Compass is as well as how a React application is built. Attendees will leave with an understanding of how the Compass plugin architecture works, as well as the design process and considerations of writing a Compass Plugin.

Speaker bio

Anna Herlihy is a software engineer working for MongoDB in Stockholm. She is a contributor to MongoDB, PyMongo, Monary, and a few other MongoDB Drivers but is working now on Compass, the GUI for MongoDB. She enjoys hiking, road biking, climbing, and is most happy when she can do her work outdoors.

Slides

https://github.com/aherlihy/compass-plugins-talk/blob/master/talk-slides.pdf

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more