Ben Halpern ・ Aug 30 '18 ・ 1 min read
I found it refreshing to read about the migration away from jQuery that GitHub successfully completed recently: Removing jQuery from GitHub.com frontend.
They did it incrementally for obvious reasons, leveraging modern browsers and (lots) of polyfills. It seems they haven't used Babel at all.
Two paragraphs of the article stuck with me the most:
Progressive enhancement is a concept at least ten years old and I'm glad more and more people are keeping it in mind.
Top comments (22)
It wasn’t too long ago that jQuery was a pretty hard dependency on Rails itself.
Seems like Rails area is moving faster than .NET world.
ASP.NET templates in Visual Studio still depends on jQuery & Bootstrap 3 😞.
That's one of the issues of having big frameworks depend on something they don't control
Well, to be fair, you should move past out of the box templates at some point anyways. Most of them are just references for a quick proto, and aren't ideal for real production applications.
For .Net as a whole, very little is moving forward as fast as it is, or breaking as many barriers as .Net core.
Honestly, if it feels stale, it's probably because you're defaulting to server-side rendering rather than treating it as an optimization.
jQuery changed the web for the better, but it's time to put it out to pasture! I hear the next big framework is Vanilla JS!
Lets be clear not everything needs to work without JS for a project to be a progressive enhancement success.
The feed on GitHub might have been deemed non-essential.
There should be better ways to handle than turning off features, but how do you get a dynamic feed without JS? You don't. Technically you could iframe it, or queue it for generation, use a refresh header, but then you risk interrupting other user behaviours.
I have a number of systems that use progressive enhancement for everything from infinite loading (prev, next, pushstate) which requires JS (fallback is standard pagination) to a SaaS GUI.
Browsers need to give people mechanisms beyond iframes if you want dynamic content without JS.
We know from the horror that is current gen single-page (garbage pile) apps that server side is a problem, but full SPA's cannot be progressive as they require JS to coordinate.
What else is missing? Does serviceworker exist without JS (it shouldn't as they are written in JS), what about the JS browsers use. If it's not off then addons & extensions could be draining battery anyhow. If it's not off, how do we ensure that malicious actors don't work out how to escalate scripts?
We need better browser-tools, native hypertext placeholder that are replaced if a URL is available are one. You can sort-of get that using headers and iframes. As my understanding goes that harms accessibility.
What about auto-complete? Firefox can search a site if you have OSD markup using search box or address bar. Could a non-JS input[type="search"] use that same data too? How do we format the results to be less than title, url?
In the case of autocomplete, what about linked fields? Some software I've written has custom markup for autocomplete content, uses linked fields, has required exists (similar to ) functionality. The only way I could get that without wasting lots of time & energy was with jQuery (although the code is nearly half-a-decade old now it works).
What about rich editing UI's like TinyMCE? It'd for-sure be nice to have some form of alternative for that which can be sent without JS. Again, a piece of software like that has no non-JS alternative I'm aware of.
Nor do any image editors with CanvasJS AFAIK
I don't have answers. I don't work for major browsers. I'm glad that large orgs are looking to avoid unnecessary JS, but it'll be a while before it can deliver native application experience, or sadly dated application experience without scripting.
Sure, I was totally teasing :-)
You can probably simply render the last 10 items of activity in HTML and that's it.
This is how the page looks without JS:
I feel like we're on different points on this. The purpose of progressive enhancement is not to give users the same exact experience, is to give users a functional experience. I can use GitHub without JS but I know I lose comment previews and stuff like that. The website goal is still 100% reached.
To use a search bar you don't need autocomplete and so on. Also why would you need service workers in a HTML + CSS web app?
I applaud your effort but I don't share the same goal.
The failure is when with JS turned off you get no website or a broken one.
I was reading an article (only images and text) on Vice Italy a few minutes ago, just for curiosity I tried to reload the article link with JS disabled and I got a blank page, with nothing on it. I have no idea what CMS they use but there's no reason in the world to have a magazine website to be completely broken without JS.
The point of progressive enhancement is to let me read the content and see the images even if I don't have flashy animations or preloading :D
For the feed thing, you can use something similar to EventSource infinite pipe. Eg:
This is about the simplest one I can come up with btw. It's pretty dumb.
Interesting that GitHub, of all places, cares about progressive enhancement.
I wonder why?
Why are you surprised?
Its UI is used by millions of developers in all countries of the world with all sorts of networks and browsers. Its Global Alexa rank is 60, according to Moz is at 38 (!): moz.com/top500
It's basically a public service website, hence they need to cater to most clients
I am not aware of any countries with an embargo on running JS.
It's the user's choice to disable JS.
An application shell that acts more like an installable app than a website, using Service Worker and caching data can perform a lot better on worse networks than a classic website.
Yes, that can be combined with server-rendered first load, but that's a ton of added complexity for developers.
Seems strange they go to such an extreme in the exact opposite direction.
What is described here and what I spotted myself seems like something that would benefit Wikipedia and allrecipes.com, but not GitHub of all things.
(And yes, the dark web should use modern web development practices as well, it's essential considering the bandwidth and latency impact)
Ok probably there's some miscommunication here. GitHub has always been a progressive website (not progressive web app, just a website with progressive enhancement), it just was a mish mosh of JS with jQuery, they documented over the years the evolution of the web app and now they decided to remove jQuery. That's it.
Yeah, doesn't seem like the right choice to me.
Obviously, I am wrong and they are right, so I was curious about the rationale.
Yay! Such progress. I can't approve of this enough. I have had such pain trying to pull jQuery out of applications dying from spaghetti code. This is comforting beyond words.
It's nice to see that graceful degradation is no longer considered the only option.
Does somone knows what is the replacement of JQuery ?
As rhymes said it depends on your use case. In my view JQuery is great for projects with a lot of interactivity, animation etc. and I wouldn’t go through the effort of replacing it in these cases.