Best Web Grids for 2020

Many things have changed in the webapp world since we last did a grid comparison, way back in 2017.

Chrome is increasing its domination in the market of browsers. Edge ditched its own web engine and is essentially a Microsoft clone of Chrome now. Firefox is in decline, has less than 10% of the market and Mozilla recently had to let go 70 of its employees as its revenue keeps falling. Meanwhile, more companies than ever are working on, or considering creating modern web applications that will replace their legacy desktop products and embrace a ubiquitous model for desktop and mobile platforms. The combination of converging technology and increasing development of web applications makes it an exciting time – and make technology choices more important than ever.

In our last evaluation, we already established that web interfaces can be as flexible, feature-rich, and robust as their desktop analogues. The centerpiece of any modern data-intensive web application is a grid, so now it’s time to review the most popular web grids on the market and see which one is the best pick for 2020!

Contestants

Let me introduce the contestants – these are all powerful, well established grid engines that are widely used to build modern snappy web applications.

• ag-Grid 22.1.1: “The Best JavaScript Grid in the World” is an extremely feature rich, good looking and well documented grid that claims to be even better than before. We found that it has definitely improved since the last time we tested it.

ag-Grid 22.1.1

• Sencha Ext JS 7.0.0: A part of “the most comprehensive JavaScript framework for building data-intensive applications”, this grid claims it can “handle millions of records”. Perhaps the most upsetting part about testing this grid was its restrictive license and a requirement to provide your email and phone number so they can spam you – not cool, Sencha, learn from ag-Grid on how it’s done right.

Sencha Ext JS 7.0.0

• Kendo UI Grid 2019.3.1023: Allows you to “quickly build eye-catching, high-performance, responsive web applications”. We’re about to find out if, in fact, it ken do it.

Kendo UI Grid 2019.3.1023

• w2ui 1.5: A nice contrast to big JavaScript frameworks, this grid can do most of what other grids offer, but is tiny and lightweight. In fact, it is 9 times smaller than Ext JS and 7 times smaller than Kendo UI.

w2ui 1.5

• FancyGrid 1.7.87: A very good looking grid with a large list of features. Perhaps by pure coincidence they never mention performance of the grid. Unfortunately, it was way too slow in our tests, so we excluded it from the final results. Without pagination, FancyGrid can only handle ~10K records without having significant performance issues, and that’s well below our testing threshold.

FancyGrid 1.7.87

• Webix DataTable 4.3.0: part of Webix framework, DataTable component provides a highly efficient grid that delivers blazing fast performance. We included Webix here because it was the best grid in our previous comparison.

Webix DataTable 4.3.0

We excluded SlickGrid and HyperGrid from this comparison. SlickGrid, one of the best grids from the previous test, despite all of its benefits, is currently in life-support mode, with only a moderately active fork of the original product being available. HyperGrid, a product that we expected to become mainstream by now is still a niche offering that never gained considerable traction in the web development community. Perhaps there’s a future for Canvas-based grids, though at the present moment they are losing the battle – some of the HTML5 grids are getting very close in terms of performance, and also have the benefit of better customization due to the DOM access. Having said that, HyperGrid’s recent experiments in combining the grid engine with a web-assembly based data engine can result in a significant increase in performance and create a new class of ultra fast web applications. We’re still paying attention to Hypergrid.

Tests we run

Our main focus is user experience. The grid should look good, feel snappy, hold a huge amount of data and yet still go easy on memory as it often is a limited resource. A good grid shows results of a query with subsequent updates that occur to that grid, such as deletes, updates, and new records. On average, we used a message size of 140 Bytes– it’s big enough to show meaningful information and is small enough to fit millions of such messages into the grid without taking all the available RAM on our test system. The following set of tests should give us a good picture of how the selected grids will perform in a real world situation:

• Rendering Time: How much time it will take to render the initial portion of data. Fast rendering is important so that the web application loads and is ready to work as soon as possible. Another situation when fast rendering might be useful is switching data sets to display in the grid.

• Frames Per Second (FPS): The more FPS a grid can produce while being used, the smoother and more responsive it looks and feels. Significant changes in FPS are perceived as freezes and should be avoided as much as possible.

• Memory Consumption: If a grid is memory efficient, it can work well and do more on a device with less memory, such as mobile devices and laptops. In our test we will measure how many rows/records a grid can render using no more than 2 GB of RAM. Last time we used 4 GB as the target value, but people in comments made a valid point that some entry level devices, such as office desktops, smartphones, and Chromebooks might only have 4 GB available, so we lowered the threshold accordingly.

• Live Updates: Rendering the initial portion of data is important, but that’s not enough if a grid cannot smoothly render changes in real time. According to MDN, “A frame rate of 60fps is the target for smooth performance, giving you a time budget of 16.7ms for all the updates needed in response to some event.” In this test we will measure how many rows per second we can add to the grid while maintaining maximum FPS and experience no lagging.

Environment

Hardware

• CPU: 6th Generation Intel® Core™ i7-6820HQ Processor (8MB Cache, up to 3.60GHz)
• GPU: NVIDIA® Quadro® M1000M 4GB
• RAM: 64GB DDR4 2133 MHz
• Storage: 1TB PCIe SSD

Software

• OS: Ubuntu 5.3.0-27 GNU/Linux x86_64
• Browser: Google Chrome Linux 79.0.3945.130 (64-bit)

We don’t test other browsers, due to the factors I mentioned in the beginning of this post. Chrome and its clones (including Safari which is using WebKit) are, at this point, the only significant platform that people use. Some people don’t like this fact which reminds them of the sad era of Internet Explorer dominance, however it’s not the same situation. This time the platform is free and open for everyone – and being packaged into independent browsers by multiple independent teams. This fact ensures there will be no stagnation, violation of standards, or reliance on vendor-lock-in solutions. On the side note, web developers are happier than ever!

Time to Render

Once the initial data portion of a query is loaded (typically, in a separate WebWorker, especially if it’s large), we need to display it in the grid. Considering the size of the initial portion, all grids did great, but as usual, some did better than others.

Even though every grid in our tests is using virtualization, ag-Grid’s Viewport model was absolutely the best – it feels like there’s no limit to amount of data it can handle! Webix’s results are second best. w2ui has a somewhat linear dependency for the rendering time required which might be a limiting factor for extremely large datasets.

Rendering Performance in Dynamic: Scroll Tests

Okay, we have our data loaded and rendered. Is the grid still responsive and snappy? Can we look through these rows without having a feeling that we’re watching a slide show? To make this test more objective, we measured FPS using Chrome Developer Tools. Scrolling using Touchpad/Mouse wheel simulates slow scrolling, while scrolling by dragging the scrollbar will show how the grids are optimized for very fast scrolling. As before, we test for each dataset size.

ag-Grid and Webix are clear winners, followed by Ext JS, which demonstrated great performance and is very well optimized out-of-the-box for buttery smooth rendering regardless of the dataset size. On the other hand, Kendo didn’t perform as well. In our test, every grid except Kendo felt snappy and smooth.

Memory Efficiency

This is a test that answers one simple question – how much data can we display in the grid on an entry level desktop?

Due to the tricks that ag-Grid provides for its row model, data consumption is extremely efficient and almost identical to Webixagain. The two cool kids absolutely destroyed the rest of competition when it comes to memory efficiency. Kendo continues to disappoint us with 4x less memory efficiency than the winners.

Real Time Updates

Now the grid is loaded and rendered with all of the original data, but that’s not enough – without real-time updates, the dataset becomes irrelevant. This test starts with the 20,000 records and applies updates at an increasing rate, until the grid starts lagging.

w2ui is simply mind blowing when it comes to real-time updates! Having said that, all contestants (except, again, Kendo) demonstrated great performance when it comes dynamic data updates. It’s worth mentioning that most grids allow batching grid updates and ag-Grid demonstrates insane performance.

Learning Curve

While users care about performance and look-and-feel of a grid, developers care about how easy it is to work with the grid and implement application functionality with it. Let’s see what each grid engine can offer in terms of documentation, examples, and support.

I’ve ranked the grids as follows:

1. ag-Grid– Excellent documentation and examples. Commercial support is available.

2. Webix– Almost as good as ag-Grid. The grid provides tons of examples and live demos, API is very well documented and easy to search and navigate. Commercial support is available.

3. Kendo UI– Nice, well structured documentation and examples. Commercial support is available. The only downside is a restrictive license and lack of public access to the framework, as well as a private NPM repository, which makes it harder to begin evaluation.

4. FancyGrid– Nice, clear, and concise tutorials and docs with editable live examples, but lacks built-in search. Commercial support is available.

5. Sencha Ext JS– On the bright side, the docs are very well written, and live examples with the playground are amazing. Having said that, the documentation is in a poor state. It is extremely fragmented; most of it is divided into “classic” and “modern” parts, sample projects are spread into multiple versions of the API. Worse of all, links throughout docs often lead to earlier versions of the API and it’s possible to switch to an older API version and potentially get incompatible or deprecated code. Try to google extjs grid and you’ll see 4-6 various versions of the docs in search results). Some of the example links on the site don’t work (for example, “Buffered Scrolling”). Similar to Kendo, a restrictive license and lack of public access to the framework as well as a private NPM repository make it harder to begin evaluation and also result in unsolicited calls and emails. Commercial support is available.

6. w2ui– Documentation is present, but feels a bit limited. There are a few examples but for most part it’s a trial and error process to make it work as expected. There’s no commercial support available, although it’s possible to order a training session if your company happens to have an office in California.

Conclusion

We took a look at some of the great modern web grids. Test results prove the point that web interfaces combined with modern technologies can provide a highly responsive and well performing user interface.

This time, the winners are:

1. ag-Grid: Absolute winner! It’s greatly improved since the last time, and I tend to agree that it is perhaps the best HTML5 grid available today.
2. Webix: Excellent performance in all categories, great API and documentation – this is a great alternative to ag-Grid although not as robust when it comes to integration with modern applications built in React and Angular.
3. Ext JS: The documentation is a mess, but it performs really well and working with it was nice and easy. It sure does have every possible feature you can imagine in a grid engine!

Honorable mention: w2ui. It wasn’t the fastest, but it is very compact and simple to work with. If you’re looking for a low calorie alternative to the Enterprise giants, this is a great pick.

Hopefully, these results can help steer you in the right direction of selecting the best web grid for your next project. As you can see, some of the grids were more performant along several dimensions so that gives you some choice and ability to cater to your specific requirements.

For users who want to try these grids in action, we’ve prepared a GitHub repository with the sample projects for each grid used in the above tests. Did we miss something? Do you know a great grid we should totally try? Let us know what you think!