Nuxt Enterprise Patterns: Provider Abstractions

As time goes by, third party integrations come and go. Maybe you started out with BoldChat and had to move to Live Person after a big merger. Then you find out they didn't provided half of the features you needed. Now you're using Drift in hopes of a better experience. You think:

"You've got to be kidding me?! That's three chat providers in less than a year!"

If you follow each vendor's install guide it's easy to add their features to your application, but that always comes at a cost: maintainability.

#1 Are Provider Abstractions Right For You?

The first step is to figure out if creating an abstraction layer makes sense for you.
You may want to consider one if:

• There are external integrations that are high-risk for change
• You are creating a platform where a feature can be fulfilled by different providers
• You want a clean line of separation between your code and third party code

#2 Map Out a Generic Interface

Next, take each external feature you plan on abstracting and come up with a list of the ways your code would talk to a generic version of that feature. It's very important to not think about your existing implementation or feature set! The list should be as generic as possible.

Chat Provider
  - open() - Tells the chat provider to show the chat panel

#3 Create The Abstraction

Now that you have a basic list of features, now you can create a Nuxt plugin to use as the abstraction..

export default (ctx, inject) => {
  // create our abstraction
  inject('chat', {
    // create our 1 access point
    open() {
      window.drift.api.openChat()
    }
  })
}

// load drift
!(function() {
  var t = (window.driftt = window.drift = window.driftt || [])
etc ...

plugins: ['~/plugins/drift.client.js']

Related Post: I HIGHLY recommend following the steps in Third Party Code is Poison to setup your integrations using auto-injected plugins.

#4 Update Your Code To Use The Abstraction

<template>
  <div class="container">
    <!-- Now we are dealing with a simple and standardized interface! -->
    <button @click="$chat.open()">Open Chat</button>
  </div>
</template>

More than likely you have a bunch of places that need to open chat. It could be a header button, footer link, and even a mobile menu link. Now all of those should point to this generic abstraction and you shouldn't have to touch them again!

What's Next?

Now that our abstraction is set up, it's very easy to swap chat providers. We would just create a new plugin and make sure it injects an object with an open() method. That's it!

I admit this was a very basic example, but honestly it's one I've literally used with a $220,000,000 / year company. And yes, we did go through 3 chat providers ;)