Abstraction is an important concept in software development, some people even state that software development is all about constructing and managing abstraction, in this post I would like to explain the concept of abstraction and its related topics.

What is an abstraction in software development ?

When I think of abstraction I would think of something that is broad and general, in software development the concept is actually really similar. Abstraction in software development means something that helps hide the implementation complexity, people usually associate abstraction with the word 'layer', an abstraction layer is a layer that works as an interface to hide the implementation details.

Real world example:

When you drive a car, there is a lot of moving parts that have to work together to allow the car functioning properly, you as a driver do not care about what works under the hood, all you need to know is how to steer the wheels, how to use the brake. All of the complex mechanical aspects have been hidden from the driver, we can consider a car as an abstraction.

Technical example:

TCP/IP is a really popular protocol and it is the backbone of the internet, the protocols is beautiful because it hides all the complexity from the users, furthermore it allows users to explore different abstraction layers depending on their interest.

Leaky abstraction

Leaky abstraction is a concept to describe an abstraction that is not well designed, and hence it is leaked to the client, specifically it means that the client must have some knowledge beyond the abstraction they are dealing with to use it properly. Here's a technical example of a leaky abstraction:

Higher Order Component HOC in React

Higher Order Component (HOC) in React is a design pattern to separate cross-cutting concerns between different components, in short it is a component that accepts a component as an input and returns a component. One important aspect of this technique is that the function must not mutate the input component, otherwise the abstraction will be leaked. Why is that so ? Here's an example:

Here's the CommentList component, it subscribes and unsubscribes the datasource:

Here's another component called BlogPost:

BlogPost also subscribes and unsubscribes the datasource, to isolate this cross-cutting concern HOC can be implemented.

We implement a HOC that accepts a component and returns another component as follows:

The implementation is good because you can see it wraps the input component inside another 'high-order' component and returns it.

Here's an example of a bad implementation:

You can see that it returns the InputComponent directly and attempts to change the componentDidUpdate method, now suppose we want to add another HOC to modify the behaviour of componentDidUpdate and use the same technique, we will override the earlier version. This approach demonstrates leaky abstraction because subsequent clients must know how the previous implementation works before they can implement their HOC.

From the example above, I hope that you can have a good idea of the abstraction concept in software development and some of the pitfalls you may encounter when trying to implement an abstraction layer.