Couple of thoughts on React

Pretty sure it’s nothing nobody has noticed already, but I farted out some thoughts about React a while back. I figured I should publish more of this type of rubbish:

I have been watching Kent C. Dodds’ fantastic Advanced React Patterns course on Front End Masters. It occurs to me that a lot of the React patterns and principles which are being uncovered and taught to us all by the likes of Kent relate quite directly to more traditional patterns & principles – in the Gang of Four sense, regarding SOLID and further.

Some examples off the top of my head:

  • Render props feel like a sensible way of implementing dependency injection.
  • Pretty much every major React pattern is a different take on Inversion of Control.
  • Compose-all-the-things is generally a decent approach, good React seems to encourage this.
  • Redux implements Event Sourcing and the concepts of CQRS in an extremely elegant manner.
  • The Single Responsibility Principle underlies the entire concept of web components and React itself.

At first, I was quite snobby about it all: “They’re just coming up with new names for old things”, “all of this has happened before and will happen again”. But when you think about it, this is such a visual way to implement and explain these patterns.

It’s a lot easier to explain event sourcing with “it’s like a distributed redux”. The metaphors feel simpler to solidify when a method hidden in a class called component.setDependency() or a hugely overloaded constructor (new Component(dependency1, dependency2, dependency3);) becomes <component><dependency /></component>. I find that coupling, and its costs are so much easier to visualise when you can see the logic spelled out in this way.

I think this has a lot to do with React making interfaces so explicit. If you’re writing sensible components, it is trivial to convert from React’s XML to the correlating UML in your head. (If that doesn’t exist as software yet, I expect it will eventually.)

jquery-mondrian : My Very First jQuery Plugin

I am a massive fan of jQuery. Earlier in my career, we made do with massive custom libraries full of nasty hacks to make everything work across all browsers (back to IE5.5, when I began, eurgh), and this left very little time to have fun with JavaScript. jQuery has corrected that for us – it takes care of nasty cross-browser stuff (especially ajax), makes traversing the DOM an absolute joy, and has a huge library of user-contributed code – in the form of plugins – to solve just about every common JS problem you can imagine, as well as quite a few not-so-common ones.

This post is about one of those not-so-common ones, namely the one used here on this site to print those shit-looking attempts at Piet Mondrian canvases on the background. It all came about because a) I saw a Mondrian piece and figured ‘those look kinda automatable’ and b) I’d been looking for an excuse to piss about with canvas.

You can download, fork, or just laugh at the code here on github, there’s nothing revolutionary in it – it randomly places lines and fills some of them with given colours. That’s it. Really. There are a couple of extras that I’d like to code into it further down the line, one of which is functionality similar to what can be seen on Composition With Javascript – an awesome site I discovered not long after starting to code this plugin, which executes a similar idea in a much better fashion. Another thing I’d like to possibly mess on with is the Piet programming language, how about feeding the output of such a plugin into a Piet interpreter? Or reading in piet-formatted programs? Obviously, there’s a long long way to go to get to any of that from what is essentially a toy, but they’re fun ideas – to me, at least.

But all of that really comes down to time available, there are a couple of other avenues that I’d still like to explore with regards to canvas, and they might get played with first – but the bottom line is that I’m writing in this blog more often in order to push myself to do more fun stuff to have more bollocks to write about.