UI composition for a list that should support filtering, sorting and pagination

I’m curious, how do you handle filtering, sorting and pagination in UI composition approach for the list of items where each item contains data from multiple services?

I.e. when sorting and filtering is done across attributes/information that are part of different services involved in composing UI.

Example: we want to show a list of restaurants available for ordering on the mobile app screen, where for each restaurant listed we have delivery time, delivery fee, rating, etc. and this information comes from different services. We should be able to filter top-rated restaurants (say, restaurants with the rating 4.0+), free delivery and under 30 mins delivery time.
Sorting would be based on the rating and the delivery time.

Good day, @dragan.stepanovic, and welcome to the Particular discussion group.

I have written extensively in the past about UI and ViewModel Composition. I prefer the term ViewModel Composition to disambiguate the topic from UI-related concepts, such as micro-frontends.

There are limited options for ViewModel composition and search capabilities, and, in all honesty, all of them have downsides related to the system’s distributed nature.

I wrote about paging, sorting, and the various search options in the following articles:

To achieve decent search performance, we need to accept some coupling and relax our expectations of data consistency. There is no other way around it.

All that said, in the presented scenario, there might be an additional option to the ones listed in the above-linked articles.

Composed search results are an instance of composed lists. Usually, when composing a list, we first identify the logical/business owner of the list. For the sake of discussion, let’s assume the restaurant registry service is responsible for that. However, the restaurant registry only knows about names, addresses, and, let’s say, ratings. The delivery service is aware of fees and times.

If it’s an acceptable requirement that there is no way to combine filters from different services, for example, I cannot order or filter by both rating and delivery time. The UI could be aware that to use some filters, it needs to go to the restaurant registry service first, and composition will happen based on what that service returns; otherwise, to use the other filters, it goes to the delivery service first, and composition will happen based on the decisions made by this service.

It’s another instance of a suboptimal approach because, based on the use case, the logical owner shifts. This could create confusion and a different form of coupling between the two services.

Please let me know if all that helps. If you have any further questions, don’t hesitate to reach out.

Regards,
.m