UI Plugins architecture and basic concepts

UI plugins allow you to add your own functionality to BriteCore without having to introduce any changes into BriteCore’s codebase. For example, you can use a plugin if you want to speed up the quoting process by having your agents just fill in a VIN and select a button to fetch the rest of the data. At this point, BriteCore doesn’t provide a feature like that out of the box, but our plugin system allows you to insert a custom button in the quoting form to enable the functionality. The button will trigger actions on your plugin, hosted by you, and update the form with the resulting data.

Some possible use cases for plugins include:

  • Lookup for vehicle details, given its ID.
  • Find out a driver’s violations based on their ID.
  • Add a button to call out to VINMASTER on a quote.
  • Add a list of policy documents stored in Dropbox to the Policy Detail screen.
  • Add new per-module navigation links to the navigation sidebar.

BriteCore UI plugins offer you:

  • Extensibility: You can dynamically extend our application to include new features.
  • Parallel development: You can implement features as separate components with independent release cycles.
  • Clear development direction: Our plugin framework ideally provides a well-defined interface and tutorial to help you develop faster.
  • Simplicity: Each plugin has one function, which focuses your efforts.

Key concepts

  • Authentication: Users can authenticate against the underlying vendor integration via UI plugins. For instance, a UI plugin that saves files to Dropbox will allow the user to authenticate with Dropbox. The plugin uses the generated API token to make requests to Dropbox on the user’s behalf.
  • Application programming interface (API): Our APIs conform to REST through OpenAPI specifications and are built using the Amazon API Gateway, which offers robust scaling and security for all of BriteCore’s APIs.
  • Communication: Communication between BriteCore’s UI and UI plugins occurs via Penpal. Penpal is a promise-based library for securely communicating with iframes via postMessage. The parent window can call methods exposed by iframes, pass arguments, and receive a return value. Similarly, iframes can call methods exposed by the parent window, pass arguments, and receive a return value.
  • Data mapping: Explicit mapping defines a mapping between objects in BriteCore and the data in vendor integrations. Data mapping works by taking a source object and a mapping schema, running the source object through the mapping, and finally producing the output object. It works on lists and deeply nested data structures.
  • Frameworks and templates: Reusable core components across common types of integrations, such as vendors that help make underwriting decisions, or claims reporting, accounting, etc.
  • JavaScript library: BriteCore provides a beta JavaScript library that you can use to build your plugins.
  • Plugin slots: Predefined sections of the BriteCore’s UI where third parties can connect their plugins. Slots allow vendor integrations to hook into common functionality like lists, button rows, and navigational elements. Each slot has a well-defined interface and a restricted set of capabilities:
    • Interface:
      • Input: The messages that the slot can receive from the plugin.
      • Output: The messages that the slot can send to the plugin.
    • Capabilities:
      • The actions that the plugin will be able to perform in the page.
      • Updating the form data, rendering an error message, etc.
  • UI plugins: Technically, plugins are JavaScript code embedded in HTML files that get attached to BriteCore UI via plugin slots. They are built and hosted by the client, implementing a simple interface to communicate with BriteCore UI.
  • Vendors: Any third-party company our clients collaborate with to assist with making business decisions, speed up processing, and ensure data accuracy.

Service components

  • BriteCore-UI: The frontend for BriteCore (Vue.js app)
  • BriteIntegrations: The plugins registry (API)
  • Service: API endpoint

Service interactions

  1. The user requests a web page that supports plugins.
  2. BriteCore-UI makes an API call to BriteIntegrations to discover the plugins available for that page (if any).
  3. BriteIntegrations returns a list with the available plugins URLs.
  4. BriteCore-UI loads each plugin in a hidden iframe in the page.
  5. BriteCore-UI and the plugins communicate via Penpal.

Communication

BriteCore communicates with the plugins through a mechanism built on top of the browser’s window.postMessage API. This mechanism allows the main window to call a set of functions and read any data available in the interface exposed by the iframe during the plugin initialization.  It also allows the iframe to emit events up to the main window. We can think about this communication as message passing, since in both cases the parties involved can send any data they want to each other and work together to perform a task.

In order to support multiple iframe connections and handle events in an efficient way, we use the tool Penpal to handle the communication. The plugin itself is completely dependent on the plugin slot that it’s going to be connected with. That means that any message that it sends to BriteCore must follow the contract defined by the slot, otherwise it won’t have any effect.