Given what we've learned about under- and over-abstraction, we can say that a balanced abstraction is one that sits neatly in between these two undesirable opposites. The skill of creating a balanced abstraction is both an art and a science, and requires that we have a very good understanding of both the problem domain and the user's capabilities and intents. By employing many of the principles and warnings in this chapter, we can hope to remain balanced in our code building. For the previous example of a GalleryComponent, we should, once again, explore the requirements of the abstraction:

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

These, we can say, are the levers that we must provide to the underlying cross-platform complexity. Our abstraction should solely aim to expose these levers and no other unnecessary complexity. The following is an example of such an abstraction:

const gallery = new GalleryComponent([
  {
    src: '/foo/images/PictureOne.jpg',
    caption: 'The Caption',
    width: 200,
    height: 150
  },
  {
    src: '/foo/images/PictureTwo.jpg',
    caption: 'The Caption',
    width: 200,
    height: 150
  },
]);

Via this interface, we can define one or more images, set their dimensions, and define captions for each image. It fulfills all of the requirements without inviting new complexities or leaking complexities from the underlying implementation. This is, therefore, a balanced abstraction.