Twitter web app now runs ES6+, reducing polyfill bundle size by 83%
twitter.com
twitter.com
A couple orders of magnitude are missing from these sizes if my browser dev console is any indication. What are they even talking about.
As far as I remember, Twitter PWA was a React app, and React comes at about 30k minified gzipped.
I use Firefox with uBlock (standard lists) and uMatrix (all Twitter-related requests permitted) and it's still buggy as hell.
If I try to paste anything into the "compose tweet" dialog it just completely crashes with a very helpful "something went wrong" message.
If I try to cut and re-arrange parts of my tweet, it duplicates all the text and puts it out of order.
The tweet box is not even a <textarea>, it's a <div> stuffed full of <span> elements.
Additionally, the tweet box <div> is nested over 40 layers deep in a massive pile of divs.
As always, they're trying to be way too clever for their own good.
I'm not at all surprised they need polyfills for that trash.
ah yes, because webdevs love reimplementing widgets from scratch. that's no a problem in and of itself, but they also implement it half-assed, so you end up with gems like what OP described, or links being implemented as <a href="#"> with an onclick.
A <richtextarea> that yielded HTML or even RTF seems like it was an obvious need by time of the end of the Netscape/IE browser wars.
Come to think of it, I was basically hired to do that one thing because the existing team was struggling with it and it was blocking a launch.
I've had these issues nonstop for the past year.
There's a lot of repetitive debate on HN about JS web apps slowing things down and I'd like to know if the effects would be as bad if you could use the latest browser tools unpolyfilled.
Feels like you should make that the start of the blog post and cut it down massively, so people know it's not worth bothering with?
This isn't like statistics in a political poll where there is an expected margin or error, when it comes to logging sites you absolutely know everything about your users in regards to browser, operating system, and even the hardware (sometimes).
3% of a million is 30,000, 3% of 500,000,000 is 1,5000,000. An absolutely real chunk of users that can produce real value (for Instagram, ad dollars).
Why would there be a margin error at all? How would it be introduce? A large portion of crawlers masking themselves? I mean it's possible, but I do not know if that's enough to throw off proper logging.
Unless your initial page load is taking like 10 seconds, a human wouldn't even notice. And if it is taking 10 seconds, well, then you've got better things to fix.
That's not an actual improvement. That's just noise.
Imagine you lower the grip on everyone’s tires by 3%. Most people wouldn’t notice, but for a few people it will prevent them from being T-boned when they wait too long to brake for a red light. That improvement would be measurable if your data was good enough. I’m not saying optimizing your website is important like preventing car crashes, but it’s an illustration of how a small change can lead to a measurable improvement.
14KB is nothing when you're shipping 1MB+ of JS and all the other assets.
Also Twitter is such an incredible product. I love it. It's one of the few curate-by-default (along with Instagram, another masterpiece) feeds one can have. If your feed sucks, only you are to blame. Beautiful.
I'm glad the company I work at also dropped IE in new projects and have plans to upgrade older projects too.
However the apps developed for clients are for Chrome
B2B side has been moving slowly off IE11, but moving faster since the start of the year and with most of the rest of the customers targeting to be off of it originally by end of quarter. Currently sitting around 40% but if they go through with their plans to upgrade by end of quarter then will be around 5%
B2C side is much lower, the users who visit not very frequently or are newer that use IE is low single digits. On the other hand we have some long term continuous use users who use IE at a higher rate than the B2B side
Interesting - like what?
The sites range from small mom & pop stores to restaurant chains with dozens of locations worldwide to large scale CRMs for larger corporations. We're all over the place. The sites we host, which often do not include our bigger clients, are doing about 30 million unique visitors each week across them currently. Not a massive amount of traffic by any means, but it's still upwards about 400k users we're dropping support for (in addition to about 500k on older versions we already dropped).
Note: all of my metrics are coming from server access logs. Nothing complex any no front end validation of the browser versions (I don't have access to client-side Analytics for each site)
Around 78% of browsers hitting the site are running IE8, and these will be parents making use of the portal to do stuff like check calendar dates, book appointments to see teachers, and check student grades.
We tried extremely hard to move the community onwards, including outreach to upgrade computers for families and so on. But in the end, they just don't want to move on from Windows XP because everything else is too confusing. Even if you make it look the same.
As for how often they're using the site... It's somewhere around 1/3rd of the parents hit it at least once a day using an outdated browser.
... Whilst their kids are using school-provided Thinkpads all running on Windows 10, or recent-ish school-provided iPads. (The school does all the maintenance on them as well).
Windows xp + IE + elicipse + office 2003 or 2007 I think.
If Google and Mozilla aren't going to step up their "managed browser" game then we're going to continue seeing MS and Apple dominate education. It's not like school IT depts like running IE, but it's basically the only browser you can lock down.
"But you shouldn't lock down kids' browsers, and let them have blah blah..."
Okay look, I don't actually give two shits if little Marcus wants to browse Pornhub on his school laptop, we're honestly not paid enough to care. But we do have administration breathing down our necks, school policies to enforce, and angry detached parents to appease.
It was the parents who refused to move beyond XP.
https://support.mozilla.org/en-US/products/firefox-enterpris...
Still hard for me to believe the figures though. 78%??? Wonder which country they live in.
I've seen things like that here in Mexico but not winxp, and not in 2020. And not to younger parents with kids who can use computers. Maybe they're in China or something where pirated winxp still apparently flourishes.
Most of the parents I dealt with treated technology like it might be infectious, and they didn't want to get sick. Most didn't even have email.
Think... The sort of people who print and mail pictures someone found on the internet, because they never touch email.
They don't actually want to visit any website.
The customer was happy for us to only cover "core functionality" and not visual and minor issues in IE 11.
I think one of the main drivers of IE support is clients who will test in IE because it's their default browser or only allowed browser at work.
Because it's an educational organization, we must assume that members are operating on outdated solutions behind weirdly restrictive firewalls. I don't bother to fully support Internet Explorer for all features, but I do need to make sure the critical path at least functions on a basic level, and I'm careful not to rely on any dependencies (analytics, etc) that I cannot self host.
Of course, it's the directors who insist on doing everything on their iPad that give me more trouble, as I don't actually own one to test. :)
Shouldn't they give you one for testing?
#zgrep -i trident access.log*.gz | wc -l
580
Still too high of a % to ignore.
Gamers tend to be pretty technically inclined, so the audience mostly uses pretty modern browsers.
I support down to ES3 (Safari 5, IE9) mostly because I can (I learned web dev back in the old days and still remember all the tricks), although it's nice to see fans talk about playing on obscure platforms like the Nintendo 3DS browser or a Samsung smart refrigerator.
Animations are implemented in jQuery animations, and the networking is provided by SockJS (which can fall back to JSONP long-polling and even iframes if the browser doesn't support WebSocket).
Already removed some polyfills, biggest win will be transpiling just for modern browsers [1]. This all ties in nicely with general performance initiatives.
[0]: https://gitlab.com/gitlab-org/gitlab/-/issues/197987
[1]: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36840
* of the modern browsers.
edit: I'd like to clarify the reason I don't regard Safari as evergreen is it's tied to iOS versions. Enough users still use iOS 12 and 11
A browser with no support for DRM can still be standards compliant too.
Although, some browser teams, like Google Chrome, has apparently the ability of just shoving Google people in the standards process so they can fast-track stuff.
But in the end, it's _supposed_ to work in the fashion where one browser starts implementing something, then others.
I’m complaining about the armies of web developers who seem to think Chrome IS the standard and anything Chrome has that other browsers don’t mean the other browser is ‘The new IE’ and ‘holding the web back’ even if it just came out last week.
Unfortunately, since most web devs develop under Chrome (and rarely if ever test under other browsers) this perpetuates the myth that "Safari is holding the web back" or "Firefox is slow and doesn't implement standards fast enough".
Here's total Web Apis counts in different web browsers: [1]
- Chrome: 7106
- Firefox: 6376
- Safari: 6130
Of them: browser-specific APIs that developers cannot reasonably assume are a part of the web platform:
- Chrome: 949
- Firefox: 507
- Safari: 546
And in 2017-2018 Chrome removed over a thousand APIs that were only implemented in Chrome, but were assumed to be standards" [1]
And if you look at the omissions tab, you'll see that Firefox and Safari and not too far behind Chrome. But they are very wary of implementing quite a few standards just because Chrome fast tracked them (Constructible Stylesheets? Safari flat out refused to implement them. Signed HTTP exchanges? Mozilla considers them harmful and will not implement etc. etc.)
If IE 11 auto-updated to Edge, then it would be considered Evergreen under this definition.
I am not sure how good of an adjective evergreen is in this case, if it is being used how I imagine it is being used.
Fuck the users if they're using anything older, force them to buy new hardware and create more e-waste, because we just want the latest crap regardless. That sums up the sad state of "modern" web development.
And hope this change makes it easier to block trends from explore tab. I love topics, but I don’t wanna see all the celebrity and politics crap every day...
The only success I've had is by starting a private list of knowingly healthy users that's aggressively curated to make it stay that way, and never looking at the home timeline.
Every reduction is good in my view.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
update: thanks for disambiguating the title, OP!
Edit: For context, previous title was "Twitter web app gzip size dropped from 16.6 KB to 2.7 KB by removing polyfills"
modern: ES6+, less polyfill
legacy: ES5, more polyfill
The appropriate variation is served by detecting browser’s version from the User-Agent string
This is code, so after it’s downloaded it needs to be parsed and executed… needlessly.
What are you complaining about exactly?
Alternatively, for reading only, there is https://nitter.net/
Hopefully that will be the next step after reducing the bundle size.