How to design app to be modular / support plugins

Question

I'm currently in the process of refactoring my webplayer so that we'll be more easily able to run it on our other internet radio stations. Much of the setup between these players will be very similar, however, some will need to have different UI plugins / other plugins.

Currently in the webplayer I do something like this in it's init():

_this.ui = new UI();

_this.ui.playlist = new Playlist();

_this.ui.channelDropdown = new ChannelDropdown();

_this.ui.timecode = ne Timecode();

etc etc

This works fine but that blocks me into requiring those objects at run time. What I'd like to do is be able to add those based on the stations needs. Basically my question is, do I need to add some kind of "addPlugin()" functionality here? And if I do that, do I need to constantly check from my WebPlayer object if that plugin exists before it attempts to use it? Like...

if (_hasPlugin('playlist')) this.plugins.playlist.add(track);

I apologize if some of this might not be clear... really trying to get my head wrapped around all of this. I feel I'm closer but I'm still stuck. Any advice on how I should proceed with this would be greatly appreciated.

Thanks in advance,

Lee

Answer 1

You would need to expose certain functionality within your application that you want others to be able to work off of. IE: making public get{} set{} accessors on major components like your UI and your player. The more functionality you expose the more plugins will be able to modify important parts of your functionality.

So let's say you have a UI.header, and header contains properties that define how the header displays the UI. So you expose header.backgroundImage as a public string, header.Text as a public string, and header.height as a public int. Now someone designing a plugin can change your header values and make it look and say what they want.

It's all about how much you want people to be able to alter your player based on what you expose.