Twitter | Search | |
Mislav Marohnić
We’re finally finished removing jQuery from frontend. What did we replace it with? No framework whatsoever: • querySelectorAll, • fetch for ajax, • delegated-events for event handling, • polyfills for standard DOM stuff, • CustomElements on the rise.
GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over 85 million projects.
GitHub GitHub @github
Reply Retweet Like More
Sponno - AskNicely Jul 25
Replying to @mislav
Not many people have asked why? But what are the key benefits have you noticed from the new solution?
Reply Retweet Like
Martin Jul 25
Replying to @mislav
So custom elements, but nothing else from web components then? Would love to see a blog post about this.
Reply Retweet Like
Mislav Marohnić Jul 25
Replying to @sponno
Fewer kb sent to visitors, more explicit syntax when performing DOM manipulations 👉 ability to use Flowjs for static type checking
Reply Retweet Like
Mislav Marohnić Jul 25
Replying to @mynyml
We would like to jump on the Shadow DOM train but for now, the polyfill incurs performance penalty for regular DOM lookups
Reply Retweet Like
Matija Marohnić Jul 25
Replying to @mislav
Someone at GitHub: "Need a file upload? No poblemo, let's use that shiny Fetch thingy! I'll just show a nice progress bar aaand… well, crap."
Reply Retweet Like
Mislav Marohnić Jul 25
Replying to @silvenon
Haha we’d simply use good ol XHR for that. But I don’t think we show progress bars on uploads anyway
Reply Retweet Like
Gustaf Nilsson Kotte Jul 25
Replying to @mislav
What has happened to jquery-pjax? Vanilla pjax?
Reply Retweet Like
Mislav Marohnić Jul 25
Replying to @gustaf_nk
Yeah internal vanilla pjax coupled to our codebase and having many GitHub-specific workarounds. It would be possible to open-source, but I don’t think we can take on the maintenance burden.
Reply Retweet Like
C. Spencer Beggs Jul 25
Replying to @mislav @mikeal
How long did it take?
Reply Retweet Like
Mislav Marohnić Jul 25
Replying to @spencerbeggs @mikeal
YEARS 😲
Reply Retweet Like
Šimun Strukan Jul 26
Replying to @mislav
OK, now what are the downsides? Do not tell me there aren't any? And why did u choose to remove jquery and not to use any popular fw in the first place
Reply Retweet Like
Joe B. Lewis Jul 26
Replying to @mislav
Polyfills: Are those jQuery polyfills? If not, did giving up jQuery's chaining hurt code's readability?
Reply Retweet Like
Mislav Marohnić Jul 26
Replying to @Struki84
Unnecessary dependencies become part of technical debt. jQuery simply wasn’t as needed as it was 10 years ago to normalize browser behavior; regular DOM APIs do just fine and lend themselves better to static analysis.
Reply Retweet Like
Mislav Marohnić Jul 26
Replying to @vettijoe
Giving up chaining actually *improved* readability, even if it would lead to more verbose code. More explicit code often communicates intent better.
Reply Retweet Like
Mislav Marohnić Sep 6
Replying to @mislav
We wrote a little bit more about going vanilla JS on
Reply Retweet Like
Billy Williams Sep 10
Replying to @mislav
This is ace. Out of interest what do you use to determine polyfill bundles?
Reply Retweet Like
Mislav Marohnić Sep 10
Replying to @iambillwill
We just manually maintain lists of imports
Reply Retweet Like
Kevin.Hill Sep 16
Replying to @mislav
Did you see general perf improvements after removing jQuery? Did TTFP improve? For the polyfills was there any perf degradation on older browsers over jQuery?
Reply Retweet Like
Mislav Marohnić Sep 17
Replying to @KevinJHill
We did see some improvements to TTFP, but considering that the jQuery migration was performed gradually across months and that many other unrelated changes shipped in the meantime, we can't isolate the cause-and-effect and say how much exactly was it due to jQuery removal.
Reply Retweet Like