I threw out React and saved the user from downloading 175 kB JavaScript spread across 1 bundle and 8 chunks. Almost 600 lines of code written for React was converted to under 200 lines of Twig code and 25 lines of JS.
Additionally, I removed:
- 200 lines of PHP to generate the JSON output.
- React and react-waypoint.
- Duplicated SVG code (Craft can flexibly inline SVGs instead).
I have previously written about how I’ve made this site unnecessarily complex; that has changed now. It still runs on the PHP-based Craft CMS – which is not uncommon or complex – but it no longer outputs JSON through its Element API for fetching and displaying using React and TypeScript.
Now, it’s all Twig plus some JS.
Progress is learning #
I used React for two reasons, to learn and to get some waypoint functionality. The latter is now replaced by 15 lines of JS via the Intersection Observer API.
The top portion of the front page was the first thing I built with React, back in 2016. I expanded from that to test new things on a small scale. Everything from learning Webpack and xhr properly to looking into TypeScript started there. But it doesn't provide learning at a large scale, and now I have other projects that better serve as learning opportunities.
I’m also at a point where regular JS for enhancements in efficient frontend setups is much more fun to write than the mishmash JS frameworks have a tendency to become. And text-based content plus React is such a bad combination I didn't want it anymore. JavaScript frameworks are better suited for applications – where complexity is necessary to actually make it simpler.
As long as the users don’t suffer a lot, I think most choices are OK if the goal is to learn. And now I like to make frontends more efficient and write less but better JS, it also makes sense to just write what I needed myself. It’s a way of iterating instead of remaking.
Now that the site only has some nuggets of JS, I plan to refactor it into TypeScript. It’s not necessary, but it’s a nice exercise and one that doesn’t affect the users.