#StandWithUkraine
Andrey “Rarst” Savchenko —  — WordPress — api, javascript, php

Progressive enhancement — JS sites that work

There is excitement in WordPress community about upcoming REST API. It represents an opportunity to build JavaScript driven sites on top of WordPress. Unfortunately the trend seems to ignore progressive enhancement principles.

If you build a content site which needs JavaScript to work — what you have is a broken site.

Broken site plus JS

[update] this section was amended to remove negative example of specific site in favor of generic description of the issue.

From the materials and WordCamp talks I saw REST API currently goes hand in hand with such JavaScript frameworks as React.

The major oversight is that those frameworks go hand in hand with Node.js server–side. Facility, which PHP–powered WordPress core simply doesn’t have.

This creates a rift in templating between server and client. Rift which developers tend to ignore in favor of building site that only receives data via API and is templated client–side.

And it is broken.

If your content website breaks down from JavaScript issue — it is broken.

That this considered to be acceptable future of WordPress sites is terrifying.

Not everyone has JS

JavaScript goes through a surge of popularity due to the lure of availability. There is no alternative languages to use for client–side code in browsers.

But people confuse availability with reliability. Hard JavaScript dependency is a fallacy and a foundation of sand.

Everyone has Javascript, right? site explains that well. Unfortunately people shrug that off, because JS sites is what they want.

But you can make JS sites that still work without JS.

Site that works plus JS

Composer in WordPress is a JS site I had built while back with pjax (and other buzzwords). It features that desirable app–like experience with blazing fast content navigation, without page reload.

When JavaScript is unavailable or fails for any reason at all — it just works as a “normal” boring site.

Progressive enhancement — make site that works first, then make it better with JavaScript.

Progressive enhancement, please

Please make content sites that work for everyone. You don’t have to discard fancy JS toys for that, only learn how to use them better.

Please do not reinvent content, images, forms, scrollbars, and so on with JavaScript. They work just fine in first place, just sprinkle them with bits of improved experience here and there.

Otherwise you are just paving a road to a more shitty web.

Responses

More on topic

As tweets

Progressive enhancement

Related Posts

10 Comments

  • Caspar Hübinger #

    Every self-respecting developer will see progressive enhancement as a requirement, not an option. That being said, regarding the blank out of [the site] when javascript is deactivated I think everyone who knows the developers would assume (or have read even) they set the site up as sort of a quick example of what can be done with the WordPress REST API. They certainly would not forego progressive enhancement as a design principle in general. Maybe we’re witnessing a live demo of the significance of said principle even, and they’ll add a non-JS version of the site later on? :P

  • Joe Hoyle #

    I wrote a (somewhat lengthly!) response to this, as it includes links and images, I gist'ed it: https://gist.github.com/joehoyle/e2bbb4a07403afb08e27

  • Andrey “Rarst” Savchenko #

    Let's leave "virtually everyone" out of it. You don't speak for them. I don't speak for them. It's untrue that progressive enhancement holds back innovation. This very post has example how you can build a content site that acts like single page app with JS and like normal site without. I would argue that it is more innovative than site that can only do half that. I am perfectly aware that React can do server side rendering. And unless I am mistaken that takes Node server-side. When is that getting into WordPress core, I wonder. You claim that my viewpoint is less practical. It is just differently practical. For me practicality lies in reliability, performance, and resulting experience. If pushing those forward costs me resources I just consider them well invested.

  • Noel Tock #

    I also think that your viewpoint is less practical, similar to how many argue AAA is not very practical. Speaking of how people view things, I'm guessing your links aren't even AA compliant with regards to colour contrast :D

  • Andrey “Rarst” Savchenko #

    I know about links. Was hard to adjust shade and my font sizes are on larger side, which negates the issue a bit. Will revisit them some time. At least they stay clickable if my JS doesn't load. ;)

  • Leho Kraav @lkraav #

    Where do you think Web Components are taking us, for example http://polymer-project.org

  • Andrey “Rarst” Savchenko #

    Hadn't used, no opinion.

  • Francis Kim #

    You have some great points Andrey - I enjoyed reading :)

  • Mike Little #

    I published my own opinion here https://mikelittle.org/thoughts-on-progressive-enhancement-and-accessibility/

  • Andrey “Rarst” Savchenko #

    Thank you for your take. :) My point wasn't even as wide as all of Internet, I was mostly focused on content sites. Left a more extensive comment on your post.