Upgrading my smarthome frontend from static pages to React app with websocket support

Frontend development is suddenly fun. Previously I used JQuery in hopes of making my projects a little bit more interactive (see GLaDOS for example), but the more complex something got, the messier the codebase ended up. I’m not going too much into the pros and cons of React. I tried it out, played around with it, loved it, and rewrote my smarthome frontend.

When working with static pages, I used something I called abstractHTML. As the name implies, it abstracted away the HTML into PHP classes in hopes of making the whole thing more easier to maintain than blobs of echos riddled with variables. It was definitely better than writing the same HTML stuff over and over again while also having the advantage of automatically escaping any texts or attributes in order to prevent XSS attacks.

React does the same better, and even more on top of it. The whole state based rendering is awesome. I change a value somewhere, and the page automatically reflects that. I don’t have to reload the page, I don’t have to change it manually with JQuery, it just happens.

Which is even more awesome when using something like websockets. With websockets, my server can update the state in my browser whenever it deems it necessary. That’s usually happening reactively, e.g. when the user clicks on a link or updates some settings, but can also be used actively. Real time graphs of smarthome data are a thing now. Hell, with websockets and the speed upgrade coming with them I can control devices in real time. All my devices connect via sockets to my server as well, which means direct communication between browsers and devices is also possible.

Talking about speed, the whole page is blazingly fast. The handshake overhead is gone, and responses are immediate. During development I used AJAX requests instead of socket communication in order to update the state of my page, and added a fancy loading screen. That was a waste of time, as with websockets now, I don’t get to see the loading screen anymore.

After all this, I still have to check a few things and clean up some code. I’m also not quite sure if I’ve even already reached the edge of the possibilities that opened up to me. There’s probably some other cool stuff waiting to be implemented, but I’ll figure that out as I keep working on my smarthome.