AG Grid's New React Rendering Engine

Welcome, I'm Eoin Langsman, lead framework developer at IGrid. Thanks. It's awesome to be here, it's great to meet so many great people, meet so many great speakers.

My name is Sean Lansman, I'm lead framework developer at AGgrid. The picture on there is pre-lockdown, this is post-lockdown. I'm going to talk about our React rendering engine.

Before that, I wanted to give you guys an overview of what AGgrid is and what we do over at AGgrid. In a nutshell, AGgrid is a table, rows and columns. So what we see there is 10,000 rows, with 1,000 updates a second. The blue and the green and the red updates are happening in real time. I've skipped a slide.

So this slide is actually taking the simple tabular data a step further and adding enterprise goodness, because AGgrid is an enterprise component. What you can see here are 10,000 rows, same as what I've just described, with 1,000 updates second. But here we are aggregating by sum of the group children, sorting. So this is, again, 10,000 rows, 1,000 updates a second. This is all happening in memory. You can see it's pretty seamless.

So AGgrid is an enterprise component, enterprise features. We can take this a little bit further by adding some cool chart features. So this is included in AGgrid. It comes straight out of the box. Very little coding is required. Most of what you've, well, everything you've just seen from symbol tables, aggregations, sorting, charts, comes straight out of the box, very little coding. You give us the data, you tell us how you want the data to look, and it'll work.

So what's cool here is you can see that the charts is updating, the underlying data, grid is updating. It's all happening in memory. There's a huge amount of updates, probably more than most people would display for real in a real application, but it's all there.

The way we like to think of it is AG Grid superpowers any application you might have. People often ask us, and I've had a few questions on the store outside, is what's the difference between us and React Table? And we actually have a great working relationship with Tanner at React Table, because we don't see us as competing, we see us as doing two very different things. AG Grid has a UI, it has everything you could possibly require, and probably a few things you don't even know you need until you've used it.

And that's great for enterprise applications. But React Table doesn't come with a UI. If you want a UI, you have to code it, which requires more coding. But sometimes less is more. If your target is super lightweight table for the worldwide web and SEO is super important, React Table is a great choice. It's a great product.

If, however, you want everything all included, you want an enterprise application with an enterprise component, you should consider AG Grid. Both very good products, targets in different areas.

So one of the challenges we have, one of the main challenges we have as a library vendor is how do we support all the different frameworks out there without targeting and having multiple different libraries. So we've got one library and yet we support all these frameworks. Well, it occurs to us that all the frameworks do one thing ultimately and that's DOM and CSS and they have to, because that's what the browser understands.

So what we can do and what we do do is we've got the core intelligence in AG Grid with a UI wrapped around it. And what that allows us to do, and this is a recent change in our offering because before we used to use portals, is we redesigned and rethought about how we do support libraries. What we now have is a set of simple components that sets templates and they set CSS but they don't know why. The intelligence lives in a shared services and we can strip out the UI and add a new UI and in this case, we redeveloped the React UI.

And what that enables us to do is the little dancing robot is a React component. And before we would have had Agy Grid React and we would have had a whole bunch of dynamic components within that. I'll pause it there. What we now have with our React UI, is a React rendering engine is React from top to bottom throughout and all the components are exactly where you expect them. So my React comp up there is the dancing robot. It lives under a cell comp and a row comp and all the way up the React hierarchy which is exactly how it should be and it makes it a native React experience all throughout. You get all the benefits of React and all the intelligence and power of Agy Grid and this is transparent to you. And it's a recent update and makes a huge difference if you're using Agy Grid and React.

And that's all I had. Thank you very much. If you have any questions we've got a booth outside.