JavaScript Libraries (or frameworks) like React, Angular or Vue.js have been the main protagonists of web development in recent years. While they are all great pieces of software and solve real problems, we've been relying on them too much, and we've made the web worse as a result.
The problem is to use too much JavaScript. Of the three core languages on the web (HTML, CSS, and JavaScript), JS might be the most versatile, but it's also the most expensive for the user, and the most fragile.
A big advantage of HTML and CSS is that they are very tolerant to errors. In many cases, when the browser finds errors in HTML or CSS, it can just ignore them and keep displaying the web page. For example, let's see this HTML snippet:
My name is <stronk>Nico Zerpa</stronk>
In this example, I misspelt the tag name (it should be strong, not stronk). However, when I open the page in a browser, the content will appear just fine. Yes, my name won't appear in bold, but the site won't break.
JavaScript doesn't work like that, it's less forgiving when an error occurs. And if most of our websites rely heavily on it, an error might mean that the page doesn't work at all.
Another drawback is that JavaScript may be slower, especially when the user is using an old or low-range device. That's especially true when people try to replicate with JavaScript some functionality that HTML can already do on its own (something that sometimes happens on UI frameworks.)
When using large libraries, you also have the problem of load times, making the website even slower.
However, it doesn't mean that you shouldn't use JavaScript at all. JavaScript does play an important role in web development.
Every time you add a new JS library or functionality, think first if it will really improve the user experience. Also, look if there's a way to implement what you want to do with HTML and CSS. Quite often, there are JS-free alternatives.
If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter
Top comments (24)
I'd say the worst scenarios are when you're stuck between low JS and high JS so you mix techniques. There's some validity to just doing more and more in JS so you colocate more of your logic. But if that's the plan, you should probably be all in.
Agree in general of considering leaning harder on fault tolerant HTML + JS.
Actually the site WILL break, for non-visual users. Well, not break, but the grammatical implication of strong won't be conveyed to users on braille readers, screen readers, or search engines. After all if you think ANY of the tags mean "fonts in bold" or "fonts in italic" you've failed to divine the purpose of HTML. EVEN tags like B, I, STRONG, EM, and CITE.
Apart from that, yeah I agree. People use WAY too much JS and seem to dive for it now as the answer to every problem. Just look at the bloated idiocy people still vomit up with jQuery, React, Angular, and so forth that HTML+CSS can handle without any scripting whatsoever using pseudo-states like :checked or :target.
I've said it for decades, at least for websites quality JavaScript should ENHANCE an already working page, and not be the only means of providing basic functionality.
ofc this comes from an PHP Developer...
Go with the Time or stay behind - and who the f... still uses jquery?
Always comedy gold when people say "Go with the time" and don't recognize that the time we're in is filled with businesses getting sued for accessibility violations. Now, JS in and of itself isn't a violation, but if scripting off basic functionality doesn't work, you fail the "perceivability" standard. That's why SPA are inaccessible JUNK that many places -- medical, government, public utilities, banking, and now retail -- NEED to avoid on those grounds.
And I'm not a "PHP Developer", I'm an accessibility and efficiency consultant who works with whatever languages my clients are using. That includes node.js, C, even Ada. I'm proficient in about a dozen more, and I code x86 assembly language for fun.
Interesting though you laser-focused on PHP, likely meaning you've bought into the lies where people use "market share" as an indicator of its health and usage, without looking at the ever-growing pool size. Same lie Firefox fanboys used 15-16 years ago -- before Chrome came along and kicked everyone's arse -- to claim that IE was dying and hemorrhaging users because their market share dropped from 95% to 45% over just four to five years. Ignoring that they actually gained a quarter of a million users in that same time-frame. Share is often a poor indicator of health of a product, and you can lose share whilst still gaining users if the pool size -- the number of total users -- goes up!
Much like your comment about jQuery. Sad and disgusting as it is, that steaming pile of manure still drives around 78% of the web, and its decline in share is not outpacing the growth in market size.
Even if everything we've ever seen done with jQuery -- and most other client-side JavaScript frameworks -- falls into one of three categories:
1) Stuff that would be smaller/simpler/easier to maintain without the framework
2) Stuff that HTML and CSS can handle just fine without client-side scirpting.
3) Stuff that has ZERO business on a client-facing website or application if you give a damn about accessibility, usability, and ease of access.
If the web were a person and JS frameworks were body parts, React, Vue, Angular, Lodash and YUI COMBINED would barely make up the fingernails on one hand. No matter how hot and trendy they are amongst insular echo-chamber fanboys who hop between frameworks with all the frequency of a cheap transistor radio. Remember if you're looking at market share, if they don't tell you the pool size at each time index, any conclusion drawn from it is 100% ignorant bullcookies!
"Go with the time" also being the typical lame excuse common to the mob mentality. If all the other lemmings go running off that cliff... Popular, common, and "Hot and trendy" do not necessarily mean it's any good. It could just mean they've got better propaganda and are saying what people want to hear, not what they NEED to hear. Look at mind-numbing half-tweet nose-breathing garbage like HTML/CSS frameworks. Insanely popular and people keep saying "that's where the industry is heading", when they violate accessibility norms, result in fat bloated harder to work with code, but most importantly use presentational classes to drag markup practices back to the worst of mid-90's browser wars era bullshit.
As I've said for over a decade now, the difference between:
And
Amounts to just two things, and Jack left town.
JUST like how these garbage frameworks use scripting only elements in the markup leaving braille readers, screen readers, and search confused, or JavaScript for things like mobile menus resulting in broken inaccessible menus. Don't even get me STARTED about the habit of duplicating the main menu on a site two or three times for different appearances of the menu (like the horrifically and inaccurately named "Semantic UI") by people not qualified to write a single blasted line of HTML!
Even so that asinine rubbish is so popular, that if we counted bootcrap's "JS for nothing" it's the #2 JS "framework" in use, with React in somewhere around 8th place.
But sure, keep up with that mid '90's mindset and pat yourselves on the back over how "modern" and "with the times" y'all are, even if you're about as modern as HTML 4 Tranny. Which is to say "in transition from 1997 to 1998 development practices". Sooner or later I'll probably see you in court; since teaching and fixing the problems these idiotic outmoded but "new" practices create for companies being sued over? That's my bread and butter.
And it's why most of the time I see any of these frameworks be it JS or HTML/CSS, I am left no recourse other than to instruct my clients to rip it all out by the scrotum just to even TRY to fix their issues.
Whatever.
I couldn't put it much better myself. I wish you build all the websites I visit.
Think of the last time you used JavaScript redundantly in your website—I can't. Unless your creating a very minimalistic blog, there's not many cases that one doesn't need JavaScript.
For one, JavaScript may cause the device to slow down. Yeah, but do you actually know someone who uses IE 4? I don't even know anyone that uses IE at all. Know anyone that uses Windows 98?? Well, I don't, and I don't really care about the ~0.01% (made-up stat) people that do. Just get a new device.
Secondly, you said that HTML and CSS are forgiving. Yes, in a non-error-throwing way. Imaging if you are coding something in JavaScript that simply doesn't work. How would you debug it? In a way, thrown errors is a way to help you write better, high quality, and working code. And as a good web developer, you should never make syntax errors in HTML and CSS, and for me, I'd rather have HTML and CSS throw errors to save me frustration sometimes; don't you think? Forgiving code isn't necessarily good code, nor helpful code. In your context, forgiving code is code that doesn't work, but doesn't directly let you know.
Check your website Chrome User Experience Metrics. A then you will really know how many of your users have slow loading speed. Numbers can be unpleasant, even considering that now it is almost 2022.
Unpleasant, maybe. Necessary? Yes!!
Sorry, if I harm somebody.
It's a trade off right?! Do you want to spend more time catering on old underpowered devices or building the next generation modern features? I will always choose the second one.
I don't want the "Modern" features Cough Cough I mean bloat. And it isn't just performance, it is about building sites that work is a reasonable way. The over the top use of JavaScript to make sites "Modern" is why I don't like either GitHub or GitLab.
Github doesn't feel like a bloat to me. There was a blog post mentioning on why they had to use react framework. In fact I keep track of my frequently use websites: gist.github.com/artidataio/009b5de...
Perhaps, dont you feel this site is more modern looking than any other minecraft server list: findmcserver.com/servers, it uses React specifically nextjs.
The problem I have is that I use the back button in my browser. There are many times when I will press it, the URL in the address bar changes, but the page does not update. This is the biggest problem I have with it. GitLab is worse because it doesn't load the page at all without JavaScript.
I guess you have to report a bug to GitHub, cos I don't really experience the issue. But disabling JS while browsing the internet is like:
There are ways to break page with invalid HTML or CSS. JavaScript or even frameworks are not the problem. I've seen plenty of tweets lately where folks were bragging how they learn just a little bit of web and landed a dream job. I have hard time imagining that they'd give a nickel about accessibility or would wonder if there'd be a better tool for the job. And even if so happens and an aspiring web developer would come to their product owner and point out all of these improvements, chances are they'd be laughed at. Now ranting about it here would have some effect on developers but not the management. For them it helps to remind that bad practices (bloated size, lack of accessibility etc) means bad ranking on Google and more expenses on marketing due to higher dropout. I myself haven't yet heard of being sued for bad accessibility here in Europe, but sounds like a worthy argument! And then top it all with showing the website on throttled 3G 😎
I think, when You as developer start to design (architectural design I mean) your site.
You have to ask yourself a very important question. Is your site contenful (public for users) or private (corporate crm for example).
In 1st case, it is extremely necessary to limit your css and js bundles. In most cases it mean that You have to refuse of using SPA approach at all, cuz most of today SPA frameworks are not about performance.
unless you are creating a basic landing page, blog or simple website, you can never use too much JS. It requires experience to know where to go full in with JS and where to just sprinkle a bit of it, or use none at all. for instance, there's no way you'll create a modern web app without going full in with JS and it's goodies such as fetch api, dynamic components etc
Very true 👍
I think it's similar to saying "People are using too much English".
That's the reason why my project was born 😄
github.com/kyoto-framework/kyoto