Frontity: Upgrading my WordPress game with React

Whether you like it or not: React is part of the future of the web. So is TypeScript. And most certainly: WordPress is too.

Another reality we as web developers may or may not like is that if we are doing client work, 98% of the time, WordPress is the right choice. Either the client is tech-savvy enough so they have in-house developers, or they need a robust (read: fool-proof) system like WordPress to work with. Most people associate the WordPress admin panel with “this is how you write things on the internet” and let’s face it – chances are rather slim your client is going to confront you with a problem that hasn’t already been solved via an existing plugin.

Booooring

It’s no secret that working with WordPress in this manor is not exiting for people who love to write code (like me). It’s mostly just a game of click-and-wait, but – as stated above – it usually is the best solution for the client, so it needs to be done.

However, there are ways to combine the upsides of WordPress with the excitement of cutting-edge web development. One of them being Frontity.

Meet Frontity

What Frontity does is this: it asks your WordPress installation for the data via the WP REST API and renders a React front end. Easy, right? Well, yes it is, but there are more hoops to jump through than you might at first expect, it does take some serious work.

Rendering web content this way as obvious upsides like performance benefits, preloading and access to the newest and sharpest tools available via npm. This also has obvious downsides like extra infrastructure to maintain and the fact that things like WP Statistics won’t work at all.

Frontity supports server-side rendering (for SEO) though and can be used with TypeScript (for my own sanity).

I have been introduced to Frontity a couple of months ago and have only side-eyed it until now. Per this blog post though, I am committing to a pet project that has been itching me to get to for weeks.

Tufte WordPress theme

I want to create a (rather simple) WordPress theme from tufte-css. As you can see this project is not a fully fledged CSS framework by any means, but it is an intriguing (and responsive) way to display articles of information. (You can see it in action here.)

Accordingly, my first Frontity theme will not be focused on UX and user journey at all. Instead I want to focus all my attention bringing WordPress’s new Gutenberg editor with all it’s benefits and restriction and Edward Tufte’s distinctive style together as seamlessly as possible.

I’ll keep you posted on my progress right here.