DEV Community

loading...

Discussion on: Why your website should work without JavaScript.

Collapse
qm3ster profile image
Mihail Malo

"Make your site work without JS and use JS for progressive enhancement" sounds good on paper, but in real life, implemented perfectly, it just means "Make a worse site for 99% of your audience. Less dynamic, slower to react, not offline-first, not as flexibly executing the designer's vision." It might take equal effort to making a modern site. It might even take somewhat less effort. But to do it without harming the experience of 99% of your users, you'd have to make a whole separate NoJS site. Is that something you have the budget for?

You might say that there are frameworks, even React and Vue-based, that offer server side rendering. That you could offer the same site to be consumed in two ways, "isomorphically". That is, of course, a complete fabrication.

You don't just lose clientside navigation of the outermost pages, at the cost of "merely":

  1. doing the client-authenticated web requests for data from the frontend server
  2. storing client data by session
  3. storing "incomplete" data what would not have touched your infrastructure yet (think multipage "wizard"-style forms)

But you also lose anything that's not a standard HTML5 element. Right click(long press on mobile)? Gone. Draggable lists? Gone. Sortable tables? Gone. 3D object views for your shop? Gone.
Applications for the mobile/touch web hardly use any standard elements at all.

Collapse
shadowfaxrodeo profile image
Nathaniel Author • Edited

I've only just started making things that work without javascript. I learned to code primarily with vue.js. So pretty much everything I've made up til now doesn't work for a lot of people.

What i've learned from building sites without js is that it's actually easier to build and use.

Some things you just can't work without javascript. Of course.

For things that can you should try and make it work. And if you've got something ike a sortable table, then just show a non-sortable table when js is turned off. That'd be the default behaviour of something like nuxt.js the SSR framework built on vue

Here's a site built with nuxt: sumcumo.com/en/path-next-generatio...
It works completely fine without js
Their contact form doesn't work — but it doesn't appear either, it shows their email and social media instead.

Collapse
qm3ster profile image
Mihail Malo

Yes, most of the stuff on this non-application purely "business card" website is still accessible without javascript (at a cursory glance, on sumcumo.com/en/company and sumcumo.com/en/products

We bring the Internet success story to the insurance and lottery industry.

and

Managing digital success in the insurance world with SCIP

never appears, and you are left with an almost blank above-the-fold)

But at what cost? On sumcumo.com/en/jobs try scrolling down (with JS on)
When you switch from "products" to "people", there's a strange flash of color.
When you switch from "people" to "jobs" the site jerks sideways (probably a vertical scrollbar issue)
Generally, there is quite a bit of jank. I am not a neurotypical, so I am not going to judge how this affects the usual visitor, but this is one of the sites where I wish less JS (and less CSS animations, if that's what some of them are) was used. It's very distracting from the content.

I understand that NoJS is important here, as this seems to be a B2B product for the financial industry, where security might be ridiculous? Good job addressing that then.

Anyway, for me, good JS is subtle. It replaces native HTML constructs to be more convenient and effective. Which is why it is a lot of extra work, if at all possible, to automatically generate fallbacks from it.
Most NoJS/CSS tour-de-force s aren't like that. They take mediocre documents, and make them "pop" (viciously attack your face).

There is a time and a place for NoJS. But let's not pretend it's a sensible default, or that there aren't serious costs and potentially insurmountable handicaps associated.

Forem Open with the Forem app