Lately I have been working on a frontend part of a project that was built in Blazor. The project was mainly built using Abp Suite Framework with Blazor server for frontend.
By default, when you make use of the ABP features of autogenerating CRUD operations endpoints/ interfaces and tests , based on the selected template (In our case , we were using Blazor server with Lepthon theme) , some frontend code will be autogenerated for you for the basic Create/Add/Delete/Update. By default , with blazor frontend themes, the ABP installs/adopts the Blazorise frontend Component library.
It's a useful library with plenty of features (80+ free and open source native Blazor UI controls) that helps with building rich blazor interfaces , and it was a nice default add On to the ABP.
However , since Great ships asks for deep water , same was our ABP application , with the evolving of business requirements , we needed to develop much more complicated forms and interfaces , and yes , it's here where the Blazorise falls short , mainly at Text editor and dynamic tabs components . Then Telerik comes in handy , especially with the rich pack of component and options , including the Text editor and the Dynamic Tab.
We went on with Telerik , all while keeping the Blazorise in place , since we couldn't miss all the ABP auto-generated staff that was so useful. Buying a Telerik license and starting to integarte its different components into our code. It went well at the beginning , except some few warning that we didn't care much about.
Always as the requirements get more complicated, the code base gets to grow and complications arise. and the issues now are much more then just few warnings, as we start encountering weird issues such as :
- Components not working as expected ( whether it is Blazorise or Telerik ) : for example input validations, Loader ...
- Text editor component of Telerik working fine, but sometimes content gets erased automatically
- hundred of warning about Telerik components not being recognised and sometime Blazorise components.
Found markup element with unexpected name 'TelerikCardBody'. If this is intended to be a component, add a @using directive for its namespace.
At first we didn't thought having a mix of those two libraries could be the source of those weird issues , we explored multiple paths including filing support tickets to Telerik, but that didn't resolve the issue. And we noticed that testing those components on a standalone projects worked fine.
Our mistake was that we were nesting components from different sources , which caused those weird issues to happen and make components not functioning clearly as mentioned in the documentation. If you closely into this small portion of sample code , you will see that we were using Blazorise Grid component , inside of it there was TelerikCardBody component , nested in it the Blazorise TextEdit Component. I wouldn't blame the team as when developing this , we were in a rush and had to get the initial version of the interfaces out. but for sure , that wasn't the smartest decision either.
At this point , if you are here to know if different component libraries could be mixed in the same Blazor application , probably you got your answer , and it's yes, you can , but get ready for some unexpected component behavior and irritating issues, so take the Yse with a bit of salt , and avoid this if possible, although I doubt that , especially with highly complicated interfaces as not Library is really perfect.
And if you still hungry for learning , or you are just try to find your way out of a similar situation , don't hesitate to read my next article , in which I will explain how we managed to use both of them with no issues.
With this , we come to the end of this article , I hope you find it useful . Happy Coding <3
Top comments (0)