Architecture question (not really Ionic, but Angular/TS): Base/extends

Hi, I’m experimenting with a complete rework of one of my v1 apps. It’s a mobile app that is intended for home security. This time around, I want to do the abstraction properly and ‘cleanly’ disconnect the backend from the mobile app so that other developers can use my mobile app as a front end for multiple backend home security servers, which may have different APIs to do the same job.

My goal is to create a ‘base service’ in my app, say NVRService that implements multiple methods like register(), getEvents(), subscribeToAlarms() etc. What I then want to do is write ‘backend solution specific’ implementations for different providers that write custom code for these methods that work with a specific service.

I will implement one of the backend specific implementations, but I want other developers to be able to write their own and make it work as easy as possible to swap out my implementation with theirs (at compile time is fine).

Finally, in addition to creating this abstract base service with one real implementation, I also want to create a base UI component that people can extend. For example, lets say I create a custom component that defines a tag <show-video> which in turn, depending on the backend service translates to a <video> tag (for vendors that stream in video) or a <img src> tag for vendors that stream jpegs. Again, the goal is my core app should not be concerned with the specifics. I want these to be ‘plugins’ that developers can put in.

That being said, what is the best way to implement this from an architecture perspective that I won’t have to fight against as I start developing?

Ideally I want to be able to develop the ‘backend specific’ code as coherent/isolated plugins - developers shouldn’t have to dig into my code or app flow - they should only have to implement the interfaces