interface-vs-implementation/

[utterances-bot]

Programming to Interface Vs to Implementation

How programming to an interface can make your application easier to change in the future.

https://dmitripavlutin.com/interface-vs-implementation/

[taniot]

Hi @panzerdp. Great Article as always :)

[hedwardd]

Although this example seems object-oriented, the principle and implementation reminds me of what I understand to be functional programming. Either way, very cool and great article!

[panzerdp]

Hi @panzerdp. Great Article as always :)

Thanks @taniot!

[Jaanilj]

Awesome article! I really like your takes on software design, and I hope you will write more of them in the future :)

[panzerdp]

Awesome article! I really like your takes on software design, and I hope you will write more of them in the future :)

Thanks, @Jaanilj! Yes, I'm learning a lot about software design and will try to write more useful things in the future.

[Red02Raccoon]

Good explanation. It seems the last version of the render method is a violation of the Single responsibility principle. Am I wrong?

[panzerdp]

Good explanation. It seems the last version of the render method is a violation of the Single responsibility principle. Am I wrong?

Nice catch @Red02Raccoon! Seems like the last version violates SRP because it renders the list, and also invokes the sorting.

[codthing]

It can also be understood as extracting reusable methods

[sosioo]

I'd love to see an example of this concept without Classes...

[polyakh]

Hi. I guess it's a wrong link "For example, if the ListRenderer will always sort the names alphabetically in ascending order: then stop at the design presented at the beginning of section 2. Do not add unnecessary complexity." => 2. Have a nice day :) Thanks

[chuckwondo]

I see the last comment was made almost a year ago, but thought I'd add my 2 cents in case anybody is still interested.

@sosioo, here's one possible solution without classes:

const localeCompareAsc = (s1: string, s2: string) => s1.localeCompare(s2);
const localeCompareDesc = (s1: string, s2: string) => localeCompareAsc(s2, s1);
const renderListItem = (item: string) => `  <li>${item}</li>`;
const renderList = (items: string[]): string =>
  ["<ul>", ...items.map(renderListItem), "</ul>"].join("\n");

const ascending = false; // Perhaps obtained via system input
const comparator = ascending ? localeCompareAsc : localeCompareDesc;
const names = ["Catwoman", "Joker", "Batman"];
const renderedNames = renderList([...names].sort(comparator));

console.log(renderedNames);
// <ul>
//   <li>Joker</li>
//   <li>Catwoman</li>
//   <li>Batman</li>
// </ul>

This also addresses @Red02Raccoon's point about single responsibility because the renderList function only renders the list. Sorting is handled independently, before the list is passed to renderList.