Debugging in Qard

canvas shadow, custom console, debug info printed on screen, FPS and UPS

React, RTK-Query

I kept hearing everybody is using React nowadays and when the company tried to hire new JS developers to our team, most of them were interested only in React. I don't have trust in it since Facebook's mingling with licenses in 2017, but the team ultimately chose Preact as a suitable alternative, which was OK by me.

So, the time came even for me, and I started learning (P)React. As usual, I watched several how-to videos on YouTube, and everything was looking quite straight forward.

I almost immediately fell in love with JSX, which felt very natural for me and is way better than cumbersome JSON component definitions I have in Qedy, but I despise toolchains and unnecessary compilations, so requiring Node.js server (with node_modules hell) is a no-go for me.

To be honest, I was the happiest before using ES6 modules, when you didn't even need a webserver at all and everything worked from file:/// just fine.

The concept of React hooks looked a bit lame to me, but on the other hand it felt somehow clever and especially quite nice to use. My “problem” with them may be the “misuse” of arrays (albeit clever and quite efficient) to return multiple values and the constant component redraws, because I'm a performance freak and I don't believe their DOM diffs are miraculously fast.

1. const [index, setIndex] = useState(0);

On the other hand, these hooks are also straightforward and easy to think that way. The concept itself is very neat and those redraws are very clever and convenient way to handle async operations without async or callback methods.

For state management we went for Redux. I wasn't the one who wrote the first usages to the codebase, so when I saw all the necessary code, I was uneased by the horrible boilerplate to actual code ratio, which was like 9:1.

But the Redux Team came up with RTK Query. It encapsulates most of the boilerplate into generated functions and you need to write mostly just the actual code, also in very practical way. It handles caching automatically and you can define cache tags for easier targeted invalidation.

The approach is very close to my data services, influenced years ago by IBM Worklight's adapters. I was happy I found yet another source of inspiration. I quite like how they implemented API for queries, lazy queries and mutations, it's very close to my style of programming. Like when cache tags can be either static array, or a function, if you wish to do it dynamically.

What I also like about React is I can “abuse” it to quite some extent. I was able to mimic QList.Table behavior in my QuickTable component. The company chose MUI as UI framework and dev experience with generic table there was quite poor, because it's based on HTML table element, so you have to import a zillion components to construct it.

My idea of table is to provide basic column structure and a plain array of objects as data. In QuickTable I abused component children not as actual nested elements, but rather as column prototypes for data representation.

I was ultimately able to even use plain text for column definitions and the end result is quite magic to me:

1. <QuickTable rows={rows} onClick={rowSelect}>
2. id
3. name
4. <Button onClick={rowDelete} />
5. </QuickTable>

With simplest tables you can go even to a one-liner:

1. <QuickTable rows={rows}>id name</QuickTable>

I was really surprised React allowed me to stretch it like this and I love it.

Shoutout to VS Code, which offers a terrific help with React development. So terrific in fact, that I decided not to renew my PhpStorm subscription into 11th year, despite the announced price hike wasn't that significant.

But my PHP adventures are not as big as they used to be, major things for me (like breakpoints or static analysis) work in VS Code as well and professionally, I'd like to move away from coding towards system analysis and architecture and keep programming only on QetriX projects.