The old stack

First of all, the choice of my stacks don't make sense. I often refactor a site that falls under Yireo with a certain technology, not because that technology is so much more superior, but simply because I want to get into that technology. In the past, I wanted to try out different PHP engines (Symfony, Laravel, Slim, Zend Framework 3, Zend Expressive) so I built various satellite sites with them. The main Yireo site at that time was based on Slim and I decided to write my own templating engine on top of it, based on simple PHP files including each other, rendering content via various definition files (Markdown, YAML, JSON, etc), no database.

The frontend was based upon Bootstrap 3, because of legacy sake (the version before that was based on Zend Framework 2 and the version before that was based on Joomla 3). I never got around in updating that and frankly didn't really care. On top of the HTML and CSS, I used jQuery, decided to phase that out, wrote some vanilla JS, included some micro-apps based on Vue and React, and the whole thing became ugly.

The new stack

The new site is actually based upon SlimPHP. However, as soon as I discovered the upgrade from Slim 2 to Slim 4 required me to touch upon so many files that made me sick, I decided to take the opportunity to remove old stuff and refactor things a bit more. For instance, I built some old PHP CLI scripts and now converted them into Symfony Console commands. Also, I used a microservice for event scheduling (trainings, workshops, hackathons, conferences) and decided to drop the entire microservice. And I decided to add multi-lingual support (English and Dutch) based upon different domains (yireo.com vs yireo.nl) - if there is Dutch content, that Dutch content is served on the Dutch domain.

But the main refactoring was done on the templating level: First of all, the templating engine I wrote myself became uglier and uglier and most of its logic overlapped existing engines anyway (Twig, Smarty, Blade) so I picked Plates. Dunno know, it works for me. Second, the old CSS was cluttered with pieces of Bootstrap, CSS written by a non-CSS developer (me) and Magento 2 CSS (barf). This was all replaced with Tailwind: Even better, I implemented atomic design (atoms, molecules, organisms) with some bits more (sections, pages, layouts) so that every single piece of Tailwind mockup is reused - even down to that H3-tags and buttons are separate templates.

The result?

First of all, the result is that I understand my own templates again. It is easier for me to read and customize existing pages, add new content, etcetera. It's not a CMS, but it doesn't need to me because I'm a developer.

Another benefit is the performance. Half way of refactoring things, I decided to implement a system that allows me to load the necessary (vanilla) JavaScript on those pages that need it and skipping it on those pages that don't. That, plus the loading of inline CSS, caused the Lighthouse score to go up to 100. I plan to go up even higher by optimizing FontAwesome icons.

Secretly, part of this refactoring is also getting closer another plan I have: To refactor my Magento 2 shop towards Hyvä, with a custom theme not being based upon the Hyvä Default Theme, and partially reusing my current PlatesPHP templates. Sounds like a lot of work, so I'm in for it!