Comparison with other React UI frameworks

[rps]

I was recently involved in a "deep dive" comparison between PrimeReact, MUI and Kendo React. Not sure if anyone is interested, and if this is the place to share high level findings? Of course, it is primarily my opinions / interpretation of our findings, but seeing it in a positive light, it may help focus future development efforts?

[Melloware]

Oooh both here and Discord would be awesome!

I have worked with Kendo and Material UI so I will be interested in your findings. I personally find Kendo and MaterialUI bloated and difficult to work with!

[rps]

I was recently involved in a "deep dive" comparison between PrimeReact, MUI and Kendo React. In the interests of "constant improvement" I am hoping that sharing these "high level" findings will help with the future growth of PrimeReact.

Of course, these are my opinions alone, and don't reflect those of my employer / client. Meanwhile, I will not reveal any employer or client company names, or the final UI library that they selected. I know there is no perfect UI library, but bear in mind that the company's I am working with prefers a one stop solution to meet all of their React UI component needs!

Feel free to disagree, and point out mistakes. Bear in mind that if I missed something significant about a PrimeReact feature, then it is probable that other "first time experience developers" will probably also miss it!

Background
- Sponsor already owns multi-licence Kendo React
- Sponsor is concerned with current developer effectiveness using Kendo
- Sponsor development team has extensive javascript experience, but new to React
- Sponsor is focused on BOTH capability and developer usability

First Impressions
- Given the client's skepticism towards open source software, they were very impressed with offerings from both PrimeReact and MUI
- MUI dominates the open source UI library space
- PrimeReact has a more complete set of UI components / widgets than MUI
- Kendo is very "React unfriendly". It is very clear that this is javascript library that has been poorly wrapped / packaged into React
- Both MUI and PrimeReact feel like they have designed for React from the Ground up
- Unpaid (forum and GitHub) support for MUI / PrimeReact are very good! I understand that unpaid support relies on the goodwill of the two user communities, but nevertheless support is responsive and practical. Kendo technical support is very poor, and the most common response is "You are correct that we don't support that. Please open a feature request and if enough users vote for it, we will consider adding it"
- Purely based on numbers, MUI seems to have the largest and most active support community
- Both MUI and PrimeReact focus on what is important (the actual UI component function) and leave other well known frameworks to pickup the slack for other functionality, e.g. Form management, Charting, etc
- Kendo tries to do its own "form management" and does a very poor job of it compared to Formik or React Hook Form
- Not sure whether Kendo React Charts is built on top of charts.js but it does a good job with this
- Across the board for most components, Kendo requires up to three times as much code to write and their examples encourage several React anti-patterns!
- The three Key areas for my client are DataTables / grids, Trees, and Forms and these are discussed below
- Client was not impressed that the PrimeReact release they evaluated had several bugs in key functions (such as DataTable editing)! Not only were they concerned about the fact that these were regressive bugs, but it gave them concern about overall Software Development Lifecycle Control quality. Unsure whether the Paid support versions were better, but this issue was used to highlight concerns with Open Source software!

Forms
- Not directly supported by MUI / PrimeReact and I think this is a smart move! There are several very good React form libraries and they all work well with MUI and PrimeReact
- Kendo's form support is very limited and new developers end up learning two approaches: The Kendo form design, which quickly runs out of steam and doesn't scale well, followed by one of the several good React Form libraries that the developers inevitably need!

Trees
- Very important to my client, and unfortunately not a part of stable MUI
- Functionality between DataTables / grids and trees overlap, in that it is often the case that a multi-column DataTable / DataGrid is needed to view hierarchical data
- PrimeReact Trees are very good and work well with / are integrated into DataTables
- Kendo Trees work well, but require a lot of code!
- One of the biggest criticism I have of all Trees is that developers often can't control the json structure being returned from service calls and yet each tree I have used forces specific json naming conventions, e.g. children must be called "items". Yes you can map the inbound data structure to another, but why can't I just parameterize the TreeComponent with data structure meta data?

DataTables / Grids
- Not to be confused with plain old html tables!
- MUI had the best grid capabilities. However, you are forced to pay for Premium / Pro versions to get this capability. Not an issue for my client, as they expect to pay for Premium support anyway
- Consistently, Kendo DataGrid required 2 - 3 times as much code to implement the same DataGrid / DataTable compared to PrimeReact / MUI - and unnecessarily complicated
- If you implement a simple grid, with no sorting, no filtering, no selection, and no column data formatting / manipulation then Kendo is about the same amount of code - but who implements this scenario!
- PrimeReact was slightly more developer work than MUI to implement sortable filterable grids
- MUI's approach is preferred by client, namely sorting and filtering is turned on by default, and you have to turn it off rather than turn it on! This makes for more consistent grids across their entire application
- MUI grid has virtualization turned on by default which means this is one less thing for developers to be concerned about, and they get high performance out of the box!
- Grid virtualization for PrimeReact was similar to Kendo's effort but we never really got it to work correctly!
- Column grouping (columns that contain other columns, e.g. an overall "Sales" column with "US", "Canadian" and "Mexican" columns within it was complicated to implement in PrimeReact. It is definitely supported, but it was much simpler in Kendo and MUI, as you simply add columns inside of columns (or inside of column groups)
- Data formatting / manipulation was superior in MUI! An example is a server data structure that contains separate First and Last name fields. All grids supported custom rendering so you could have one column containing First and Last name combined, however, sorting always sorts on the Column's identified data field! This means that the column content displays as required, but sorts incorrectly! The work around was to Map the incoming data and add a derived "FullName" field. MUI has a much more elegant solution, namely a "valueGetter" Column method which returns the data value you want to render, followed by a "valueFormatter" method which is given the result of the "valueGetter" to format / render. Meanwhile column sorting is done on the result of the valueGetter - so no additional Mapping is required for the incoming data array
- ActionColumn support in MUI was very nice and easy to use. It is very common to have actions (buttons / icon links) to perform against rows. Yes you can implement the same thing in Kendo or PrimeReact, and I am sure you can build your own component to do this, but out of the box, MUI has GridActionsCellItems that does the heavy lifting for you
- MUI's integrated support for Printing, and Exporting (PDf / excel) was superior. Again yes, the same thing can be implemented for PrimeReact / Kendo, but MUI simply has a set of GridToolBar items that you can simply add to a GridToolbarContainer and in turn add to a DataGrid slot which does all the work!
- Flex sizing, namely columns that expand to fill remaining grid width based on a flex value was a great feature of MUI. I have read that similar function can be implemented for PrimeReact but requires more work than simply "flex: <number>", and it is challenging to implement in Kendo!
** Criticism of all (MUI, PrimeReact and Kendo) DataTables / grids is integration with the underlying data structure! For example, all grids allow specification of a dataField for each column, however, none seem to support getter methods, e.g. instead of using the "firstName" or "lastName" field / property, use the "getFullName()" method from the data row. I know you can use column formatters (please read comments above), but I come from the ExtJs world where we can feed our incoming service json data into a Store with an Object Model definition and then connect this to our DataGrid / Table. This allows reuse of the ObjectModel definition (calculated values, getter methods, etc) across multiple grids.


Documentation
- Kendo docs are OK but difficult to navigate. Both PrimeReact and MUI are better and similar in nature.
- Forgive me for forgetting the correct name, but the IDE / Visual Studio Code documentation integration (when you hover over components and see popup documentation) for both PrimeReact and MUI is very good, and much weaker in Kendo

Support
- Cannot fairly evaluate MUI and PrimeReact paid support as client hadn't committed to / paid for support during evaluation
- Both MUI and PrimeReact community support is good, but of course, you get what you pay for
- Kendo support is fast, but frustrating. Yes, they will answer techy questions and provide additional examples to help understand or work around some issues. However, a lot of conversations end up with "Yes we don't support that. It sounds like a nice idea, please open a feature request and if enough users vote on it, we will eventually add it"!

[Melloware]

This was excellent and very fair assessment. I have had some similar experience let me share what I have found.

- 1 client dumped Kendo because it was so heavyweight and developers were struggling
- 1 client that had 4 apps using Material UI, I have since switched 3 over to PrimeReact and the 1 team left using Material UI is jealous how fast and easy we make changes in our PrimeReact apps.

Some complaints about Material UI I had...

1. Verbose code. One application I rewrote from Material to PrimeReact with identical functionality went from 14,000 lines of code to 5,000 lines. 67% less code to build the exact same app.

Example that I call the "Christmas Tree" development because it looks like a Christmas Tree on its side. And don't even get me started on "<Typography>" nonsense in Material UI!

Code: Select all

<TableCell
  key={`package-table-cell-name-${row.packageId}`}
  component="th"
  scope="row"
  padding="normal"
  style={{
    fontWeight: "bold",
    width: "20%"
  }}
  id={`package-name-${row.packageId}`}
>
  <span
    onClick={persistTableState}
    key={`package-name-click-span-${row.packageId}`}
  >
    <SpaceIconObject
      key={`package-table-cell-icon-element-${row.packageId}`}
      tooltipLabel="View details"
      variant={"link"}
      onClick={(): void =>
        navigateToPackageDetails(row)
      }
      label={
        searchedText ? (
          <SpaceHighlight
            searchWords={debouncedSearchedText.split(
              " "
            )}
            textToHighlight={row.packageName}
            id={`package-table-cell-icon-element-highlight-${row.packageId}`}
          />
        ) : (
          row.packageName
        )
      }
      iconElement={<GskBoxIcon />}
      style={{ width: "100px" }}
      id={`package-name-${row.packageId}`}
    />
  </span>
</TableCell>

That code is to render 1 Grid/DataTabkle column and display a Link with an Icon in the cell.

Same exact code with PrimeReact.

Code: Select all

<Column field="packageName" header="Package Name" sortable filter filterMatchMode="contains" body={packageBodyTemplate} />

const packageBodyTemplate = (data: PackageData) => {
	const id = `${data.packageId}`;
	return (
		<div className="flex align-items-center">
			<Link id={`link-${id}`} className="gsk-link" data-pr-tooltip="View details" to={`/package/${data.packageId}`} key={data.packageName}>
				<i className="fa-solid fa-box-archive" />
				{data.packageName}
			</Link>
			<Tooltip target={`#link-${id}`} position="bottom" style={{ minWidth: '200px' }} />
		</div>
	);
};

Simple clean easily readable.

2. Icons. Material UI has us locked into 100 icons for Material UI. Not sure if that has changed with Material UI or not but With PrimeReact I can use any icon library but I use FontAwesome with 6000+ icons to pick from.

3. Performance. Comparing those same two apps my Google Lighthouse score when went 64% with Material UI to scoring a 98% with PrimeReact. Many factors go into this but just comparing these two apps I got this result.

I could go on an on but the team still left using Material UI begs their manager all the time to let them switch to PrimeReact like my 3 projects did.

[rps]

Appreciate your thoughts... I really like PrimeReact!

Ultimately I don't get to make the final UI library selection decisions, but the more information the better.