If over-abstraction is when too much complexity has been removed or replaced, then under-abstraction is when too little complexity has been removed or replaced. This results in a situation where the user of the abstraction then needs to concern themselves with the underlying complexity. Imagine that you have a car that you must drive without a steering wheel or dashboard. You must control it directly via the engine by pulling levers and cranking oily cogs with your bare hands while keeping an eye on the road. We can say that this car has an under-abstracted method of control.

We explored the over-abstracted versions of our gallery component, so let's see what an under-abstracted version might look like:

const gallery = new GalleryComponent({
  web: [
    () => {
      const el = document.createElement('div');
      el.className = 'gallery-container';
      return el;
    },
    {
      data: [
        `<img src="/foo/images/PictureOne.jpg" width=200 height=150 />
         <span>The caption</span>`,
        `<img src="/foo/images/PictureTwo.jpg" width=200 height=150 />
         <span>The caption</span>`
       ]
    }
  ],
  android: [
    (view, galleryPrepData) => {
      view.setHasFixedSize(true);
      view.setLayoutManager(new GridLayoutManager(getApplicationContext(),2));
      return new MyAdapter(getApplicationContext(), galleryPrepData());
    },
    {
      data: [
        ['/foo/images/PictureOne.jpg', 200, 150, 'The Caption']
        ['/foo/images/PictureTwo.jpg', 200, 150, 'The Caption']
      ]
    }
  ]
});

This version of GalleryComponent seems to be forcing us to define web-specific HTML and Android-specific code. We were, ideally, depending on the abstraction to hide this complexity from us, giving us a simplified interface with which to harness—it hasn't done this.  The complexity of writing platform-specific code has not been sufficiently abstracted here, and so we can therefore say that this is an example of under-abstraction.

From the previous code, you can also see that we are being made to repeat the source URL of our image and the caption text. This should remind us of one of the warnings we explored earlier: DRY, which indicates that we have not sufficiently abstracted something.

If we keep an eye out for areas in which we are forced to repeat ourselves, then we can hope to build better abstractions. But be aware that under-abstraction is not always obvious.

Various abstractions can be said to be leaky abstractions because they leak parts of their complexity upwards, through their interfaces. The previous code is an example of this: we can say that it is leaking the implementation details of its cross-platform complexities upward.