DEV Community

Discussion on: Simpler React component design with the Chain of Responsibility pattern

Collapse
 
walkhard13 profile image
Phillip Smith

I like the explanation and demonstration of the Chain of Responsibility pattern and I appreciate the clear, concise article. However; I have a couple of questions.

  1. Why do we not have Article extend AticleHandler?
  2. Do you have an example of a project where the benefit of using this pattern would outweigh the additional overhead (cognitive, testing, maintenance, future refactoring) of implementing this pattern?

Please ignore the second question if the purpose of this article is to make readers aware of the pattern and demonstrate a possible implementation.

Collapse
 
xavios5 profile image
Xavios

Hi Philip,

Thank you so much for taking the time to read the post, and also thanks for the kind feedback. Let me answer your questions:

1) The Artcile component in this example becomes a client of the ArtcileHandler, so Article uses a service, which is provided by the ArticleHandle. Article gives a request to the ArticleHandler, and asks it to retrive a proper JSX element for that answer. ArticleHandler does this by holding a list of different handlers and passing the request to them one-by-one. Eventually one handler will be able to serve the response, and it can be consumed by the Article component.

As you see, within this context the role of the Article component and and ArticleHandler are different, so it would not make sense to extend one form an other.

  1. In my day job we create software for institutional banks. There I came across quite a few examples of this, but mostly in back-end parts. These were mostly about validating business rules, like let's assume that there is a service to download investor related data in PDF form:
  • is the user authenticated?
  • does the user have authorization to reach the content?
  • is the requested investor data proprietary?
  • is the format allowed for pdf generation?
  • for all parts check whether we need to generate it?
  • etc..

So instead of endless switch cases and if statements we usually turn to this pattern. The benefit: we can see in the code easily against what the request will be validated, with an unambiguous domain specific language.

A fronted example: consider that you would like to render a table which consist information about the shares an investor firm owns in different trading companies.

Fidelity Capital Investment Partners Ltd

Code | Name | Amount
COKE | Coca Cola Ltd | 10%
PEPSI | Pepsi Int Ltd | 100.000 $
NIKE | Nike Sport | 120 BPI

So let's see the rules for displaying the amount:

  • if the firm is not in the USA display percentage
    • display red background if the percentage went down since yesterday
    • display yellow background if the percentage is stable
    • display green if it went up
  • if the firm is in the USA, but the percentage is less then 1%, then display basis point indexes, where 1000 BPI = 1%
    • if the BPI wend down display it with italics, else in bold
  • if the firm is from abroad display the dollar value
    • if the dollar value is greater than 1 million $ then display it whit 1.XX M $ format

As you can see writing this logic to display a single cell in the grid would take quite a few swithces and / or if-s. In this case I do think it is worthwhile the mental overhead to future-proof our code.

Hope I made some sense :)

-Xavios

Collapse
 
walkhard13 profile image
Phillip Smith

Thanks for your reply! I can see using the Chain of Responsibility pattern for complex situations like the examples you've provided. Thanks again for your article 😁