I’m learning React

Some people who know me well may not quite have heard me correctly, so I’ll repeat:

I’m learning React.

Does this mean I’m turning my back on the principle of Progressive Enhancement? Does it mean I’m going to start building websites which are 99% JavaScript and 1% everything else? Have I given in?

No, dear reader, my opinions – shaped by luminaries like Jeremy Keith, Alex Russell, Tim Kadlec and many others – have not changed. The web is neck-deep in JavaScript and sinking deeper all the time, and organisations drinking the SPA framework kool-aid think that browsers are waving not drowning.

There are two reasons I’m learning this framework – and I’ll also be looking at Vue as well (I already have some commercial experience with Angular).

Firstly, when talking with teams and encouraging them to reduce their reliance on JavaScript for core functionality I’ve repeatedly received a “but you don’t understand it!” response. I do understand it, my 20+ years building websites hasn’t been spent hiding under a rock. JavaScript is cool, I get it,

This “but we’re building a web app, not a static site” is a common fallacy, and in a large part fuelling the current untenable position. I’ve not yet found anyone who can explain the difference between an “app” and a “site”, and most grudgingly accept there’s a big grey area between the extremes of a rarely-updated content site and, say, GMail. Most projects involve a mixture of slow and fast-moving information.

If I learn React then I can counter the lack-of-understanding argument. I can speak in the language of die-hard Reactians (is that the right word) and – hopefully – put across some reasons why core functionality should be delivered using the simplest technology possible (generally server-side generated HTML).

Secondly, I expect to fail to convince many people to use less JavaScript. So I want to have some practical examples of apps that use React (or any JavaScript framework) in a less all-or-nothing way.

After all, I don’t see any reason why this should be delivered to a browser:

<!doctype html>
<html>
<head>
<title>MY 'app'</title>
<script src="my-huge-bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

If I learn React maybe I can implement some new patterns that will incorporate a Progressive Enhancement mindset.

I may fail at both those aims, of course. In which case I will still have learnt a new technology.

Week One (and a bit)

It’s hard to describe what’s happened in the UK in the last week (and a bit). Although many of us had kept half an eye on developments in China and around the world, the speed and scale of changes to life in this country came as a massive shock.

Seems like those ‘tin foil hat’ people might be right about a few things.

I think it may be useful, at least to me, to write a record of my thoughts and feelings at this unprecedented – a word that is currently being blared from every screen – time. In years to come this will be a memory, a historical event that people will study and ask each other ‘do you remember?’ I want to remember, and as my memory is lousy it’s better to write it down.

Except… I can’t. In some ways life is pretty normal, it’s just that I’m working from home all the time and the child is not at school. But there’s an eerie quiet everywhere due to much lower levels of traffic. Being put in a queue to access the Morrisons online shopping site is weird.

We’re tuning in pretty regularly to the nightly government press conferences, but I expect at this point in time there won’t be much happening as serious measures – a pretty strict lockdown – have already been put in place. We’ll just hear of COVID-19 cases climbing steadily higher. We’ve also found some good (and local) online faith resources. Mark Umpleby from Batley is doing night prayers at 9PM each night on Facebook which is very calming at the end of each fraught day. People are pulling together, it seems.

Not all people. My young friend Josh who is a security guard at a small supermarket told me he was assaulted yesterday trying to enforce a “only 5 people in the shop at once” policy. Still, it feels many people are being patient and kind – and the stories of individual acts of compassion and downright bravery (especially in the NHS) are humbling.

There is hope, although as I write it seems like a long way off.

Year end

So, the end of 2019 looms. It’s been a good year in general for me, with continued employment (always a bonus) and important family events happening. I got to visit “our” village in France again for the first time in several years, this time entirely by train.

Looking back on this blog, however, I’m not so happy. I thought it was about this time last year I decided to (try) to go full IndieWeb, but was slightly shocked to see it was January 2018. Where have the last 2 years gone?

Likewise my decision last May to strip this site back to just HTML and ‘design in the open’ resulted in just one thing: someone contacting me to ask if the site was broken. You’ll see there’s a bit more colour and layout implemented now, but a long way to go. And my skills – or rather, lack of skill – as a designer is painfully obvious.

So here’s to 2020. May I find more time to spend on this site, blogging about the many things I’ve been learning. Because, I have to admit it, I really miss the old days when I would blog more.

Designing in the open

It’s been a while since I last redesigned (or should I say, realigned) this site. Six years, in fact. My regular visitor, if they are still regular, will have noticed that this site has been somewhat broked for a week or so.

I’m not sure what I did, but I clearly mangled something. Anyway, it’s an excuse to realign.

This time I have some simple requirements for myself:

  1. Mobile first. The reality is that most browsing is done on a mobile device of some kind, so I want to primarily cater to those constraints. That means mobile-first CSS, Service Workers, small images only where necessary etc etc.
  2. Performance second. Closely related to the mobile thing, good performance is a must. I’m aiming for sub-second render times. I also want to use no JavaScript. This is a content site, why would I need it?
  3. More emphasis on the IndieWeb. I’ve started doing this, by pulling in my tweets. But I want to go much further down that road.

And I’m doing all this in the open, live on the site. I may fail completely, in which case it will be a public humiliation. But maybe it will force me to get on with it!

A Sprinkling of JavaScript

Over the last few months there has been a surge of prominent web people – designers, developers, thinkers – questioning the current obsession with complex “web app” style frameworks. Perhaps this was prompted by Jeffrey Zeldman’s ‘The Cult of the Complex’ article from June 2018, or perhaps this is a natural reaction from people who deeply understand the web.

The ‘backendification of front-end development’ is causing a lot of different questions to be asked. From Bridget questioning the usage of a JavaScript framework to Michelle building a dependency-free site. There are designers learning about semantic HTML and calls to consider limiting JavaScript usage. And reminders to developers that you probably don’t need a single-page application.

The theme perhaps culminates in this instant-classic article by Jeremy Wagner on A List Apart: Responsible JavaScript. This pared-down approach is closely aligned with accessibility – it’s about using the most suitable technology for the job.

Which brings me on to horses. But first, web apps.

What is a ‘web app’? Wikipedia helpfully has a definition – of sorts. But there’s a certain amount of bet-hedging:

The general distinction between a dynamic web page of any kind and a “web application” is unclear.

https://en.wikipedia.org/wiki/Web_application

Which chimes with my experience when I ask peers for a definition. They all but cry “You just need to feel the difference, man!”

After all, it’s not like we’ve not had interactivity in web pages before the advent of the current crop of JavaScript frameworks. Gmail, considered by many the poster-boy for a modern web app, was launched this very day in 2004. Fifteen years ago!

Single horse in a mountain field

So, horses. Back when the early automobile engineers were putting together the first cars, there was a clear distinction between the mode of transport widely used before – the horse – and what they were building. There was no confusion, no perplexed on-lookers asking “is that a horse, or an automobile?” There was a world of difference between the ‘old’ and the ‘new’.

1907 Franklin Model D roadster automobile

A world of difference, but still much the same. The problem that horses and automobiles were solving was, essentially, the same: getting people from point A to point B. But the mechanism – the technology – used to achieve that goal was entirely different.

Not so with ‘web apps’. The technology is pretty much the same as before: HTML, CSS and JavaScript. The application of that technology has a few extra bells and whistles, and there are newer browser APIs we can take advantage of – Service Workers being a prime example. But, essentially, what we build for the web hasn’t changed all that much.

Except it has, or so the framework-fanboys would have you believe. I’ve heard developers talk about the more traditional ways of building websites to be akin to riding a horse, while using a Single Page Application framework is like driving a sports car.

Red sports car on a racing track

I have bad news. A sports car works great in the circumstances for which it was designed. But take it out of its natural environment – take it off the track and onto a mountain pass, for example, and you’re in trouble. For harsh terrain you’ll need a horse, not a sports car.

Riders and horses on a mountain

You see, a horse might not be as quick on a flat race track. It might not have a heads-up 3D display to show you the turns ahead. It probably isn’t equipped with intelligent side impact protection systems. But you know what it does have? The ability to do the job in less-than-ideal conditions.

Because that is how the web is experienced by most people, most of the time. Poor bandwidth, slow latency, underpowered devices – these are the bumps, potholes and rocks in the road which will stop your JavaScript sports car in its tracks.

So, like the luminaries of the web I mentioned above, I add my voice to the growing cry: consider your JavaScript use carefully. You may not need as much of it as you think.