Frontend Quick Tips #2 Adapter Pattern - How to Integrate Different Interfaces

Bernard Klatka

Apr 19, 2021 • 3 min read

No one likes those big articles - that’s why we’re creating Quick Tips - short tips to change your developer's life from the moment you read them.

Those may be some patterns explained in JS code on real-life examples or some techniques for better code.

Problem?

Imagine you have input like in Google Maps where you can enter some value about a location.

This value can be:

How to unify different interfaces?

Solution

We can create a scalable solution using the Adapter pattern and create an abstraction layer over every parser to unify interfaces.

Note: Please have in mind the presented code is only for presentation purposes, so it may be "unfinished" (e.g. input without debounce).

We can create parsers where each function takes a value as a string and returns the same lat/lon object.

Screenshot 2021-04-19 at 17.55.34

As we can see, we've created 2 adapters for each parser. No matter what interface the parser has, we always unify the end result to the same lat/lon object.

Now we can just run through each parser and see.

adapter pattern

This way we could scale up our solution to add as many parsers as we would like without complicating our code. We can also easily swap or remove parsers.

When to use it?

Whenever you'd like to combine different interfaces.

This would also be relevant if you would like to integrate some old module with a new interface.

Imagine a scenario where you’re refactoring your code to a new interface and you have several modules that you don't want to touch, but you want them to work with your new pure module.

You can just create an adapter for your old module to fit your new module interface.

More examples/description:

Check out this website:

https://sourcemaking.com/design_patterns/adapter

More posts by this author

Bernard Klatka

New call-to-action

Read more on our Blog


Check out the knowledge base collected and distilled by experienced professionals.