Alan Richardson
Stephen Cooper was guest on The Angular Plus show podcast which was released on 8th July 2022. Stephen is a lead developer in Angular at AG Grid and joined the company because he had used AG Grid in the past and created various extension wrappers for it in previous roles.
You can listen to the show here:
Or below:
Listen to "S3 E12 - AG Grid v28, TypeScript, & Angular" on Spreaker.
Moving From C Sharp
Stephen described moving from C Sharp to front end development with Angular JS and then to Angular.
Stephen has a full stack background and moved to more web development when companies were migrating from WPF to web apps for increased flexibility and user experience:
"...ten years in my first company. The teams that I was working for, some of the projects were, migrating apps from WPF to web apps. And it was at that time when Angular, was AngularJS. So it started with AngularJS, and was having good success in creating these apps, and people were happy with the new level of interactivity they were getting. And then, it was really in the move through to Angular Two, which I then encouraged my company to carry on with Angular. And I think that really paid off."
Stephen found the range of libraries available and ease of installation through npm made a big difference to his productivity. Particularly when the company he was working for started using AG Grid.
"When you can start pulling in libraries from NPM. And straight away you've got this amazing grid, I have to say, about AG Grid. Because, I used it before I joined the company,."
Stephen now prefers working on front end coding.
"Now I've moved to the front end and really enjoy that slightly more creative and visual aspect of it."
First Experiences with AG Grid
On the podcast Stephen described his first encounters and experiences with AG Grid as a component that was fast to use and easy to delight customers. Stephen described the process of moving from an existing grid to choosing AG Grid because the data grid they were using couldn't handle the application load.
"Our web apps that we were doing, they were financial web apps. One of the big ones we had was for an internal client, and there's like 70,000 rows of data that he wanted to start sorting or grouping and filtering. And the grid that we were using, it couldn't handle it, and it was just getting a bit sluggish. So that's where I came across, AG Grid."
Stephen had seen an AG Grid demo at an Angular Connect conference in London and used it successfully in a trial from a C Sharp application.
"I tried it out and was just blown away at how easy it was to set up and then the way it performed. And so then when I put that in front of my client, he was just like, okay, I'll get my personal credit card out."
On the pod cast Lara Newsom described the draw backs of trying to create your own data grid because the complexity of a hand crafted solution quickly grows to an unmanageable state.
Lara Newsom said:
"I think we've all had that experience of struggling through a grid. Like, no, it's easy. I understand what a grid looks like. I'm going to just make some columns, I'm going to do this thing, and then you start to realise the complexity of it and it builds really fast."
With a professionally created Data Grid this is no longer an issue as someone else does the maintenance and introduces new features.
Stephen described this as:
"And then the amazing thing was then keeping up to date and seeing some of the new releases come out. Then there was integrated charting."
Integrated Charting
Integrated Charting is one of those killer features in AG Grid that is just waiting for a team to discover and allows a user to have full control over creating charts from data in the grid.
Stephen described the client wanting charting, and being able to implement the feature quickly by enabling two properties: one to enable charts, and one to enable range selection.
Stephen said:
"in another meeting, he was like, It would be quite nice if I could chart some of this data. So when I go back, I enable because we're already enterprise customers, I enabled the chart flag the same day, sent it back to him, and he was like, what?"
Advocacy
One of the ways that AG Grid spreads between companies is that people who use it become internal advocates and then want to use AG Grid when they change roles to a new company.
Stephen describes this process where he brought his positive experience of using AG Grid into a new company and advocated for its use.
"I was already a fan of AG Grid and was starting to then, advocate for it internally in our company, saying, you should use this. And I started creating shareable components and for it just to make it even simpler for people to use it and leverage it."
Brian Love, one of the podcast hosts is also an advocate of AG Grid having personally used it on many client projects and creating a free training course on Thinkster as well has having presented workshops on AG Grid at various conferences.
We list Brian on our "Collaborators and Friends" page, we didn't really know what else to call it.
Brian said:
"I personally have done a tonne of AG Grid over the years. Huge fan of it."
One aspect of AG Grid which helps with the advocacy of the Data Grid is that the Community Edition is completely free to use in commercial applications and the Enterprise edition is completely free to trial with no limitations.
Stephen described this as:
"community version is completely free to use. There's no licence, you can put it in your production application, just download it. You don't even have to get in touch with us, just take it from NPM, just star using it. Because I think that was the thing which Niall wanted. He's got this grid working and he did want to share it. You don't have to think all the features are behind Enterprise. There are a lot of features in there."
This is a very important concept for the AG Grid offering, and the team on the pod cast agreed that having a fully featured and low friction way of evaluating a data grid product is enormously important.
Brian Love commented:
"there are products out there where their free tier is like, itty bitty. Okay, I got to start paying for this immediately. I haven't even proved that this is what I want, but with AG Grid you to get to go really far with it."
"even the Enterprise addition with aggregate, you can just start using Enterprise features. You don't actually have to even go. You can get a trial licence, but you can start using it right away."
"And there's a little console that says you need to buy a licence or whatever. You don't have to pay for it to start using those features. So if you're like, oh, I need to do pivot tables and charting with data in my thing. What do I do? You can pull AG Grid into your develop branch and you could start spiking out today with it. Do a stand up or whatever, show it off at your Scrum meeting or whatever, and then you can make a decision. Take it up to whomever. Hey, I need approval for this. I need to buy a licence before you actually go to production with it. I love that about AG Grid. You guys aren't blocking. You're not trying to prevent people from taking it and innovating with it, so that's fantastic."
Brian also described some of the work that his consultancy company had helped clients with during their implementations of AG Grid.
Brian described advocating for AG Grid:
"I think historically my experience has been with AG Grid, with Angular and large enterprises that are really... pushing tonnes of data. One of our clients, they do like kind of buyer supplier stuff for Cell towers, and you can imagine how many parts go into a cell tower. And so you're talking like literally millions of rows. Right. And so like 10 million rows of data and so something like that, it's like, I'm obviously biassed, but I'm like, I know the tool for the job. I know what we're going to use."
"I'm very comfortable with it and I can just go fast. And so it's like, okay, this is how we're going to do this. Whatever use NgRx. We're going to stream in the data and we're going to do infinite role model or we're going to do server side paging or whatever that looks like. So it's very easy to kind of plug that in with just mass amounts of data."
"You don't usually load in 10 million rows of data, but you can easily load 10,000 rows of data into Grid and with DOM virtualisation, with the way they do kind of virtual scrolling, so to speak. Right. With the DOM and managing all that, like it doesn't actually blow up the page too much in terms of memory."
Angular Community Involvement
Stephen describes the benefit of using Twitter for sharing knowledge and learning from others.
Stephen described the reasons for using Twitter as:
"by joining Twitter, following these content creators, you're getting this new information sent to you before you've even looked for it, or maybe even before you knew it existed. And I could just suddenly see I was just learning so much, so much faster as well."
Stephen shares developer content on his blog, the AG Grid blog, and via twitter.
"it kind of feels natural. Then when you've, I guess you started learning all these things to then start sharing it back when you run into something which it wasn't quite so clear or you weren't sure how to do it, to then go and write it yourself."
All participants of the podcast described and shared their experiences of blogging and interacting with the community so there is a lot of information in the podcast that we haven't covered here.
Fully Typed Component
One of the tasks that Stephen undertook when joining AG Grid was to improve the developer experience for Angular developers by improving the type information available in the IDE to reduce reliance on documentation lookup during coding.
Stephen described this as:
"Once I came into the company I could see how this was all being fit together and that the Angular component is a hybrid piece of code where half of it is coded and half of it is automatically generated because there's hundreds of properties which need to be copied from the TypeScript definition."
"That was something which then I went into updated the underlying logic there so that we can start handling those TypeScript types. So that was getting into abstract syntax trees and parsing the core type interfaces. So we have that information available during that generation process... And so once we got that generation step done, suddenly the Angular component is just fully Typed, all the inputs are right and all the outputs with their events are correctly Typed. And then the side benefit of that is it then ensured that every interface that was mentioned was correctly exported from the core package."
"And so now where you're seeing interfaces on our docs that is being driven right off the code, they are real code interfaces. So suddenly the docs are now bang up to date....We don't have to worry about them being out of sync."
Stephen covers this in more detail in his blog post on documentation auto-generation the AG Grid blog and elaborates on this, in relation to Ivy, generics, and NG Static Input types, further in the podcast episode.
Auto-generating Examples and Testing
In addition to describing all the AG Grid trade secrets around keeping our documentation up to date, Stephen also revealed the trade secrets around how we keep 1000's of examples up to date and working for all the different frameworks we support and the combinations within the framework (e.g. hooks, and classes).
Stephen revealed:
"updating things to use the TypeScript parser meant in the AST we had these code models where the types were then available."
"Because the way the examples work is we write one single TypeScript version of it and then we parse that into: what's an event callback, what's a static config property. And then we have Angular, React, Vue. I guess we've got packages, we've got modules and all of these."
"It takes that inputs and then spits out these examples and then manage to get all the typing back into Angular and have it compile strict and actually run the TypeScript check over those generated examples so that people can now copy code from our examples, put it in their applications."
"I guess because I spent so much time in our docs as a user, I valued the quality and those code examples. So now that I'm in the team, the majority of my time has been on the docs as opposed to Grid internals, because there's so much value that we can add for our users there."
Fortunately Stephen didn't give away all our secrets about how we automatically test all the examples. [Edit... actually he did]
Stephen said:
"Another thing which I've really valued and enjoyed is setting up Cypress tests for all of the great examples, because that's such a great way of testing these examples external to the grid."
"Initially, we're just Loading up every single one of those examples. There's about 8500 once you consider all the different permutations, and making sure that there's no errors in the initial load. And then we're also doing snapshot tests for a good selection of the features so that now we're getting some improving our own confidence that when we're doing a feature, we haven't accidentally changed the stylings."
"I think there's much more scope for us with Cypress. I know there's a community plugin as well for testing AG Grid and Cypress, which enables you to pull out different rows and stuff. So, yeah, there's a growing set of tools there and examples that's really great."
Testing is covered in more detail during the podcast.
In the podcast Stephen and the hosts also describe effective documentation in more detail and mention the effectiveness of the search and getting started guides, as well as the depth of detail in the documentation.
In particular having all the examples hosted on Plunker to make them editable and easy to experiment with was mentioned as a plus.
Stephen said:
"One option on them is then to open up in Plunker and just start editing in there. And that was something that was quite exciting this year. I you drop a package.json file in [Plunker], then it will load in the typing. So suddenly our angular examples have now got auto completion and the JS docs are there, and the type of checking and even for our internal support team. And when we're testing things out, you're now getting the auto completion on the property. So it's just become even quicker as well to be able to test these things out."
Customising The Grid
During the podcast Stephen described the changes that AG Grid were making to support Angular v28 and Ivy in more detail.
During this discussion the topic of customising the grid came up.
Brian Love commented on how flexible AG Grid customisation can be:
"One of the things that's really powerful about AG Grid is the Extensibility, right? So AG Grid has tonnes out of the box. Beautiful, fantastic. Got great themes. Everything works. You've got filtering, sorting, editing, all this kind of tonnes and tonnes of features. But there are times when you actually need to take that and customise it."
"And you can do that customization, maybe through CSS or SCSS or Mix Ins and all these kinds of things. But then sometimes you need to really customise, like a header cell or an editor or something like that. And this is where you can actually build Angular components and then register those and use those with AG grid."
The podcast discusses this customisation approach at length.
AG Grid React All The Way Down
Although the podcast is primarily focussed on Angular, the podcast did touch on the recent work done by AG Grid to make the React experience 100% React and still support Angular, Vue and JavaScript.
Stephen explained:
"I think the starting point was for React, there was a React component and then within it was AG Grid, which was JavaScript all the way down. But then you might have a React component inside your cell. And that break in the React rendering I think was causing people issues."
"So the big goal of this rewrite was to say, well, can we have React components down the entire stack? ... And so then when you put your own React cell rendering, it will be React the whole way up. And so long story short, that's now achieved so that when you're using AD Grid React, all of the rendering is done in React."
"The way this works under the hood is that where previously, the rendering component was done in JavaScript, we've now got two implementations. And so it was a lot like the MVC model where a lot of the logic moved into a controller and we've separated that final rendering layer."
"So when you're using React, all those rendering pieces are React components, but a lot of the complex logic which makes AG Grid what it is is still in services and the controllers."
"And so it's exactly the same for Angular and Vue. So all the complex logic is the same. It's just that final display layer is then either React or JavaScript."
"And that's the thing. Like for Angular, it doesn't really matter. But for React, it was clearly obvious when you open up React Dev tools that it wasn't React all the way down."
"And so I think this has been very successful in terms of improving that React developer experience to give them something which now we can say it is a truly React component, but it still benefits from all the great work that is in AG Grid and all the new features."
"We still only have to write them once, but React gets them, Angular gets them, just plain typescript users get them. And that's something which I think has always been a core priority because I think as soon as you start trying to maintain a different grid for React properties and features, they're not going to get copied across properly. Whereas with this approach, everyone's getting them and everyone's getting as close to a native experience as they need."
End Notes
This is just a subset of the topics and conversation in the podcast so it's worth checking out the episode for more use cases, customisation, documentation approaches, getting started hits, more information about testing and everyone shares some helpful tools that they have been using recently.
In the podcast Stephen also describe some creative uses of AG Grid like using it for interactive schema management configuration tools on top of a Web API, and his work with NG templates.
You can listen to the podcast online at any of these hosting sites:
- On Spreaker
- On Player FM
- On Spotify <!--kg-card-end: markdown-->
