Declined
Last Updated: 26 Apr 2023 13:17 by ADMIN
Jan
Created on: 26 Apr 2023 07:19
Category: KendoReact
Type: Feature Request
0
Micro frontend support

We would like to use Kendo React to build a micro frontend UI but we did not found any relevant information that this is currently supported.

The main issue we are facing is how it isolate Kendo theme styling between different micro frontends.

Let's say we have 2 micro frontends A and B:

- A is using Kendo v6.

- B is using Kendo v7 (or some other future/past version).

Both of them will include their global Kendo styles which will collide.

After some investigation, we came up with 2 possible approaches:

  1. Isolating micro frontends using shadow DOM. This is the most common technique but unfortunately not supported by Kendo React yet.
  2. Prepend custom class to all Kendo CSS selectors (for example ".microfronend-a .k-button" instead of just ".k-button").

We have experimented with the second approach and it seems like a way to go. It also required to append all popups to root DOM node of a micro frontend which can be done easily using PopupPropsContext.

But adding a class to all Kendo CSS selector is technically not a trivial task. It would be nice if Kendo supported this out of the box, for example by providing some SCSS configuration variable.

1 comment
ADMIN
Ivan Zhekov
Posted on: 26 Apr 2023 13:17

Hi, Jan.

I answered in the related thread -- https://feedback.telerik.com/themes/1606227-micro-frontend-support, but I will paste my answer here, as well:

All KendoUI suites, Kendo React included, and the themes are general purpose UI frameworks based on the underlying framework. In terms, having something baked in that is tailored for react microfront end, which is just a concept, is incompatible with the idea of having general purpose UI.

That's not to say you absolutely cannot achieve what you need. Quite the contrary -- you can absolutely achieve it, just not by means provided by KendoUI. You could very easily achieve the desired transformation of CSS by using a css processor, like PostCSS -- you can iterate over the rules, by using Rule walker, get just the selectors and prefix them.

I am declining the feature request.

Regards,
Ivan Zhekov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.