JavaScript
Article
By James Hibbard

Editorial: Is JavaScript Always the Best Solution?

By James Hibbard

This is the editorial from my latest JavaScript newsletter, you can subscribe here.

Lately, there has been a lot of discussion surrounding the role of JavaScript in modern web pages and web apps. It all seems to have kicked off with an amusing (but not entirely untrue) article entitled How it feels to learn JavaScript in 2016 in which the author expresses his concern at the fragmented state of the JavaScript ecosystem and the amount of tooling necessary to start a JavaScript project today.

In the debate that followed, there was an interesting Twitter poll that caught my eye. It asked if in 2016, it’s OK to build a website that doesn’t work without JavaScript. Of the 4,157 people that replied, 42% (so 1,746 people) declared that it was. Woah!

As editor of SitePoint’s JavaScript channel you might expect me to be among those 42%. Well, sorry to disappoint, but I’m afraid I’m not. As my colleague Patrick recently pointed out, it all depends upon the context. Keeping an open mind as to the most accessible and most reliable method of solving a problem, will inevitably lead to the best solution. Here’s a small example to illustrate the point:

Some time ago, I was helping someone on SitePoint forums make a product comparison page, where a user could select multiple products, click a button and be presented with the relevant product specs. The person I was helping had already built the page and the products were marked up as list items (<li> elements) in an unordered list.

My initial solution was to add a hidden <input> element to the page and use that to pass the selected items to the server. I coded up this solution, it worked fine and everyone was happy … that is until I bumped into another forum user called PoPSiCLe. Here’s what he had to say about using JavaScript for the job (edited to remove the expletive):

*headdesk* I can’t even… no, sorry. I can’t. Do people actually make code like this?

“A bit harsh,” I thought, but inquiring as to what the problem was, revealed a much neater solution I had overlooked completely. Namely, to add a checkbox and a label to each <li> element, then to use the adjacent sibling selector (input:checked+label) to style the user’s selection and absolute positioning to hide the checkbox itself. Not a single line of JavaScript was necessary, making the solution more accessible by default! Here’s a demo of what we ended up with for anyone that’s interested.

It’s a small (and somewhat contrived) example, but it serves well to illustrate the point. Just because you can do something with JavaScript, doesn’t necessarily mean you should. Keeping an open mind as to the best tool for a job, will not only lead to the most accessible and robust solution, but means you might also learn a thing or two along the way. This is also the reason that I welcome all of the debate around JavaScript’s position on the web today.

But what do you think? In 2016, is it OK to build a site or an app that only works with JavaScript enabled? Do you do progressive enhancement? Let me know in the comments below.

  • Andres Vaquero

    Nice article that illustrates how prone we are to use a tool by default without thinking much of better or more accessible alternatives.

    In my opinion technological interdependence is overly abused when building web apps. If some pieces of functionality rely in JavaScript, instead of building a bit with PHP, a bit with HTML, a bit with CSS, and another bit in JavaScript that hooks functionality to the aforementioned, why not do it all in JavaScript? (including creating dom elements etc…)
    I find technological interdependence is bad for re-usability and that JavaSctipt kept entirely to itself is the most powerful and reusable it can be, and this is where I’m actually heading at in my development trends. I only use JavaScript as last resort, and where some solutions might be hybrid or rely in dependency injection, there are some parts that, if entirely reliant on JavaScript I keep the whole or 99% of the solution to JavaScript.

  • Camilo Reyes

    To me, it’s a matter of whether you are hacking or designing. Developers often see the DOM as hackable. But, forget one can design the DOM without a single line of JavaScript.

  • mbokil

    All the enterprise apps we work on are dependent on JS to function. Our public sites are mostly WordPress and custom PHP which can degrade naturally without JS. We wouldn’t be able to give customers the features they want without JS.

  • hengels

    JavaScript is a great tool. But websites should work without JS. JS features should enhance website features and not be a requirement to use a website. Currently everybody seems to move over to client-side coding. Although this offers some benefits the web gets really a mess with these wobbly “solutions”. I am old enough to remember the time when JS was considered as evil. Now the perception seem to be the opposite. I think the “truth” is in the middle: Basic functions should be realized in an HTML only form and all the fancy stuff gets added via JS. But the wiz kids of today do not learn longer server-side languages properly and therefore the client space will get more and more cluttered with poorly written JS code which is based on terribly bloated JS libraries.

    • You probably can’t find the “middle way” since most frameworks are loading data asynchronously, thus users without JS wouldn’t see anything.

      • zoobab

        Most frameworks are wrong then. I don’t see why you can’t replace most of the features with asynchronous loaders, as most of the generation can happen server side.

        • Of course you can, you can even implement everything yourself and don’t need to use frameworks at all. But, most JavaScript frameworks are built using templates, async file loads or are based on the MVC pattern in general. Even layout frameworks like Bootstrap require JavaScript.

  • Joe Lloyd

    I would argue that JS is mandatory for every modern app. For stuff like modifying data attributes. This gives a clear seperation of concerns, where a class is for styling and data attributes are for state management.

  • M S i N Lund

    GENERAL REAL WORLD ALERT!
    ===========================

    That checkbox/css-hack doesn’t work in all currently used browsers.

    I have toyed around with it a couple of times, but always had to abandon it as soon as i started testing in real life.

    If I remember correctly, its at least among for example some android devices it fails.
    And it fails badly, with zero clues to the user.

    Doing it in java-script also makes the code/markup much simpler.

    Don’t put shiny fancy hacks you found on some blog post, on live sites if you don’t know exactly what you are doing.

    And obviously, if needed you have to put a little noscript-blurb on your pages to alert the user that js is required for 100% functionality.

    And don’t demand that I “prove” that it doesn’t work, just do a bit of testing with that pile of old phones and tablets etc you have laying around.

    Because that what you always do anyway …right?

    • James Hibbard

      Those are shitty sites, made by shitty developers.

      Why have you got to be so offensive? You’d get taken much more seriously if you could make your point politely and without swearing.

      That checkbox/css-hack doesn’t work in all currently used browsers.

      It should do. In Pre-CSS3 browsers you won’t get the highlight effect, but then you could position the checkbox not off-screen, but so that it is visible (for example in the top right hand corner of the element).

      Because that what you always do anyway …right?

      No. Maybe I’m doing it wrong, but I normally offer clients support for the latest three versions of all major browsers (i.e. the current version and the previous two versions).

      • M S i N Lund

        Anyone who gets offended by that, deserves to be.
        Its a self-regulating system.

        Personally, I get offended by sites with empty body-tags.

        And if you use hacks, and only test in the very latest browser versions, you are asking for trouble.

        3 versions back is nothing, in for example android.

        The checkbox/css-hack is ridiculously easy to implement in js.
        And it works even with ancient browsers, without you having to lift a finger to make it.

        So if you use it, I’m pretty sure its not for the benefit of the users.

    • Peter Mumford

      No need to be an ass to make your point.

      • M S i N Lund

        So you are either one of the guys who build those blank sites,
        or you go around getting offended on behalf of other people?

  • Renan Borges

    JS maybe, PHP NEVER!!

  • js is a medium idea, but yes…php is from old times for website

  • Thank you for sharing your story. It’s good to be reminded to keep an open mind when searching for the right solution.

  • Ahmed Abderraham

    No, it’s not ok, sorry.

  • I personally think that it’s okay to implement websites that require JS. If at some point the content would become unreadable without JS, I’d just show a fallback message inside a tag. Since JS can’t be deactivated in most browsers (of course you can do it in the config, but not in the UI) and most users probably don’t see a reason anyway (great security restrictions), users without JS are rarely.

    • zoobab

      And most of the web is going dark because of Javascript. The other day I had to debug a webpage which was , the web is not designed to be a Javascript loader.

  • Matti

    Yes it is. This is only in topic because it was easy t disable JavaScript before. If browsers has never give this option there is no reason to talk it.

  • Peter Mumford

    It’s totally possible to build a website with out any JavaScript, even a blog. For, example, with Jekyll. And you’d have a robust, high performance site. But for web applications, you need JS.
    If you want comments on that static blog, you’ll need JS.

    • zoobab

      “If you want comments on that static blog, you’ll need JS.”

      What for? PHP server side with simple HTML forms, that’s all you need to have comments.

      • Andres Vaquero

        No need for JS to apply some comment functionality, but JS can, and probably should, enhance the usability after everything is working fine

      • Peter Mumford

        That’s true—you can post data without JS. But if you are using php and a database, then you no longer have a static website. If I want comments on a Jekyll site I use Disqus.

  • Geoffrey

    I think there is a distinct difference between a ‘Web App’ and a ‘Web Site’. Sorry, I can’t give instructions for telling the difference between the two, but I know it when I see it.
    IMHO, a web site should function without javascript, and get some enhancement from it if needed. Actually, it should be understandable without CSS as well. I generally turn off CSS to double check if my DOM has been created well.
    A web app MIGHT require javascript to function. But it really needs to have the requirement of frequent server interaction and a lot of truly dynamic content. There are many web apps that could function just as well without javascript if you try.

  • Δημοσθένης Νικολής

    Javascript is a functional language for me. It can be used for advanced and complex styling or animation but in most cases if something can be done without it then we should avoid it especially if its for styling reasons.

    A simple site or a simple blog can exist without javascript but thats the best it can get. I personally love javascript and the more you learn about it the more you understand when, how and if you need it in components

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.