Over-abstraction is when too much complexity has been removed or replaced, so that the underlying complexity becomes difficult to leverage. The risk with over-abstraction is that we either remove too much complexity in favor of simplicity or we add new unnecessary complexity that confuses the user of our abstraction.

For example, say that we are in need of a gallery abstraction that we want to use to display a gallery on both our website and various mobile applications. Depending on the platform, the gallery will use the interfaces available to produce the layout. On the web, it would produce HTML and DOM, but on a mobile application, it would use the various native UI SDKs available. The abstraction provides a lever to all that cross-platform complexity.

Our initial requirements for the gallery are quite simple:

• The ability to display one or more images
• The ability to display captions alongside images
• The ability to control the dimensions of individual images

An external team has created a Gallery component for us to use. We open the documentation and see that it has the following example code, showing us how to create a gallery with two images:

const gallery = new GalleryComponent(
  [
    new GalleryComponentImage(
      new GalleryComponentImage.PathOfImage('JPEG', '/foo/images/Picture1.jpg'),
      new GalleryComponentImage.Options({
        imageDimensionWidth: { unit: 'px', amount: 200 },
        imageDimensionHeight: { unit: 'px', amount: 150 },
        customStyleStrings: ['border::yellow::1px']
      }),
      [
        new GalleryComponentImage.SubBorderCaptionElementWithText({
          content: { e: 'paragraph', t: 'The caption for this employee' }
        })
      ]
    }),
    new GalleryComponentImage(
      new GalleryComponentImage.PathOfImage('JPEG', '/foo/images/Picture2.jpg'),
      new GalleryComponentImage.Options({
        imageDimensionWidth: { unit: 'px', amount: 200 },
        imageDimensionHeight: { unit: 'px', amount: 150 },
        customStyleStrings: ['border::yellow::1px']
      }),
      [
        new GalleryComponentImage.SubBorderCaptionElementWithText({
          content: { e: 'paragraph', t: 'The caption for this employee' }
        })
      ]
    })
  ]
);

This interface seems very complex for the basic purpose of only displaying a couple of images. Considering our simple requirements, we can say that the preceding interface is evidence of over-abstraction: instead of simplifying the underlying complexity, it has introduced a whole new realm of complexity and various features that we don't even need. It does technically fulfill our requirements, but we must navigate its realm of complexity to achieve what we want.

An abstraction like this, which encodes new complexities and prescribes its own features and naming conventions, is at risk of not only failing to reduce complexity, but also of increasing it! An abstraction has no business in increasing complexity; that is antithetical to the entire point of abstraction.

Over-abstraction can, curiously, also take the form of over-simplification, where levers to the underlying complexity are not made available to us. An oversimplified version of our GalleryComponent interface may look like the following:

const gallery = new GalleryComponent(
  '/foo/images/PictureOne.jpg',
  '/foo/images/PictureTwo.jpg'
);

This minimal interface may seem like the polar opposite of the previous code, and in some ways it is, but curiously, it is also an example of over-abstraction. Remember, abstraction is when we provide a lever to underlying complexity via an interface. In this case, the lever is just too simple, only providing very limited leverage for the complexity that we wish to harness. It does not allow us to add captions or control image dimensions; it only allows us to list a set of images, nothing more. 

Having gone through the two previous examples, you've seen how over-abstraction can come in two distinct flavors: one that over-complicates and one that over-simplifies. These are both undesirable.