AG Grid's New React Rendering Engine

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 Landsman. I'm lead framework developer at Agigrid. The picture on there is obviously pre-lockdown, this is post-lockdown. So I'm going to talk a little bit about our React rendering engine. But before that, I just wanted to give you guys an overview of what Agigrid is and what we do over at Agigrid. So in a nutshell, Agigrid is a table, rows and columns. If this works, there we go. So what we see there is 10,000 rows with 1,000 updates a second. The blue and the green and the red, sorry, 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 Agigrid is an enterprise component. So what you can see here are 10,000 rows, same as what I've just described, with 1,000 updates a second, but here we're 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 and you can see it's pretty seamless. So Agigrid 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 Agigrid. It comes straight out the box. Very little coding is required. Most of what you've, well, everything you've just seen from simple tables, aggregation, sorting, charts, comes straight out 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, Agigrid 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. So the way we like to think of it is Agigrid superpowers any application you might have. People often ask us, and I've had a few questions on the store outside, is what the difference is between us and React Table. We actually have a great working relationship with Tana at React Table because we don't see us as competing. We see us as doing two very different things. Agigrid 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 Agigrid. 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, what occurs to us is 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 a core intelligence in Agigrid 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 Agigrid 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, which lives under a row comp and all the way up the React hierarchy, which is exactly how it should be. And that makes it a native React experience all throughout. You get all the performance benefits and benefits of React and all the intelligence and power of Agigrid and this is transparent to you and it's a recent update and makes a huge difference if you're using Agigrid and React. And that's all I had. Thank you very much. If you have any questions, we've got a booth outside. We'd love to meet you. Thank you. Thank you.