Alan RichardsonWhat's happened in and around the world of AG Grid in October 2021?
We put most of our blog content over at blog.ag-grid.com and release notifications of content we find useful on our social media accounts.
But I thought I'd summarise some of it in this post to bring the 'good stuff' to a wider audience.
Hope you find this useful.
Angular Nation
Angular Nation received some more positive feedback online with Igor Minar, Team Lead of Angular promoting the Angular Nation Patreon Account.
Angular Nation is a free online Angular Community with many free events, talks and courses.
Plunker
Plunker don't create release notes or announce their new features but it's recently had an update to:
- use HTTPS throughout
- make embedding easier
The HTTPS has helped make the embedding faster and avoid any mixed content warning messages. The embedding makes Plunker even faster to load, so if you are looking for different code hosting sites for releasing code online. Remember to give Plunker an evaluation.
Conferences
The React Summit compiled a list of talks from their 2020/2021 season.
I'm still working through the talks but I found the talk from Shawn Swyx Wang in explaining some of the fundamental concepts around React.
Kent C Dodds talk on Managing React Application State explained React Context very well.
And it was interesting to learn about React on the server with Blitz and Redwood from Brandon Bayer's talk.
I have yet to listen to the other talks, but there are plenty there that look interesting.
Community Apps and Examples
Most of AG Grid's customers use AG Grid on commercially sensitive applications and as a result we don't list all of the Fortune 500 customers that use our product, which is why it is great to see community projects using AG Grid. Those we can talk about and promote easily.
Unit Testing Angular Components
Guillermo Arellano demonstrates the use of Karma and Jasmine in this YouTube video showing Unit Testing of Angular AG Grid Custom Renderer Components.
There is also a detailed blog post from Guillermo explaining the approach and showing the code.
Test Data Generation and Table Editing
One of those is a project I created. It started as a simple Markdown and CSV editor, with most of the heavy lifting being carried out by AG Grid. Then I expanded it to cover Gherkin, HTML Table code generation, and in the last release I added Test Data Generation.
It uses RandExp and Faker to generate data, so a simple spec like:
name
faker.fake {{name.lastName}}, {{name.firstName}}
desc
faker.lorem.paragraph
collects
faker.hacker.noun
prefers
(Connie|Bob)
Can generate data like this:
| name | desc | collects | prefers |
|---|---|---|---|
| Oberbrunner, Augustine | Dolorem quod consequuntur. Cum consequuntur ut quae exercitationem aperiam inventore ipsa eveniet facilis. Temporibus voluptatum architecto velit esse qui itaque harum fugiat. Voluptatum nostrum dignissimos maiores expedita. Cumque temporibus quo provident ut. | panel | Bob |
| Hamill, Lulu | A quia omnis et qui. Consequatur commodi est. Cupiditate commodi id illum et occaecati vel. | transmitter | Bob |
| Hagenes, Godfrey | Perspiciatis et exercitationem distinctio ipsum. Quasi libero perferendis modi est aperiam recusandae. Aliquam earum ut amet ea rerum dolorem consequatur qui distinctio. | transmitter | Bob |
It remains a CSV and Table editor so the data is easy to re-order and amend.
Source Code for the Markdown and CSV Table Editor and a Runnable Version on GitPages or Stackblitz
Flight Delays
Armela Gjoka showed a preview of a Flight Delay project with source here.
I like reading through other people's source doe to see what I can learn, and find it useful to see a project early on when the code is usually smaller
React Docs
The beta versions of the React Docs have been released:
I'm particularly interested in reading these because all the examples are now using Hooks rather than Classes.
And... just like The documentation for AG Grid all of the examples have interactive code samples. The React docs use codesandbox.io we usePlunker.
Podcasts
- WebRush Building StackBlitz with Eric Simmons
- Discussions of StackBlitz architecture with a lot of WebAssembly and the ByteCode Alliance being an interesting site to learn more.
The WebRush podcast is always a good listen.
Back in episode 149, Proof Trading described their architecture for a high performance trading system. We have a Summary of the episode with transcribed quotes on the blog, because Proof Trading use AG Grid as part of their GUI.
Niall Crosby, founder of AG Grid, appeared on the JavaScript Jabber podcast Episode 504. Topics discussed included - JavaScript Data Grids, supporting multiple frameworks, DOM performance, Web Components, IOC, developing with no dependencies, turning open source into a profitable business model, typescript and more.
We have an edited transcript of the podcast episode on the blog.
On the Blog
We have released quite a few blog posts in October:
I find our blog posts educational and I'll probably try and add Tippy into my Test Data and Table Editor to simplify the GUI at little.
This was a 'mega' post. I was using a Podcast Player as an example to learn AG Grid and I created a version in plain JavaScript. In order to learn React I wanted to convert the app over to React so I kept notes as I was doing the conversion and created the tutorial blog post.
The post also has two videos showing the creation process Part 1 and Part 2
Shows how to apply OR filtering conditions in a Custom Tool Panel.
Because our documentation has multiple framework support, the development team have created a whole bunch of ways of auto generating a lot of it. In this post you'l learn how we use JSDoc and ASTs to generate the type definition documentation.
The Type Definitions are explained in this blog post.
The latest version of AG Grid introduces in cell Sparkline charts which is an easy way to add programmer controlled charting in the grid rows.
Just for fun I created a slider puzzle game using AG Grid, this has buttons in a cell renderer and custom headers to simulate a 3x3 tile puzzle game.
