Two Clipboards, One Copy Button

If I have two ways to copy something to the clipboard, I don’t want everything above them to become two versions too. I want to choose the implementation in one place and keep building above it.

Imagine an application that runs in the browser and on desktop. Both have a copy button. The button takes some text and asks for it to be copied. But underneath, the browser and desktop versions use different APIs.

I could check the platform every time I want to copy something. If it’s desktop, call this function. Otherwise, call that one. Then do the same thing wherever else the application copies text.

But I want to write the UI once. So I give both implementations the same interface and supply the one the application needs:

                   Copy button
                        |
                 Copy this text
                        |
              Shared clipboard interface
                   /          \
        Browser implementation  Desktop implementation
                |                        |
          Browser API                Native API

The split is still there. It just sits underneath the interface. The copy button receives a clipboard service and asks it to copy the text. It doesn’t need to choose a platform implementation itself.

The shared interface is where that difference stops traveling through the application.

That’s a concrete version of building blocks stacked on top of each other. Two implementations fit the same connection, so everything above that connection can use the same block.

This is where dependency injection has been most helpful to me: there are already two implementations, and I want the same UI to work with either one.