Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Twitter.com's HTML, which is produced by React Native for Web, explained

giuseppegurgone.com

Post reply on HN
Print view View original

91–100 of 163 posts

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#91

Post by SilasX »

dionidium wrote: post #58
xgulfie wrote: post #31

Twitter's website is absolute garbage, the feed is unresponsive, tweets fail to load, it's just terrible. If you're modeling your frontend off of anything please do not pick Twitter because their web experience is awful.

The thing that drives me crazy is that it breaks a basic feature of the browser, which is that if you load a bunch of tweets in your feed and then ctl-f to search for something, it doesn't work (on Chrome, at least); it doesn't find stuff that's on the page. This is particularly frustrating, because my normal use case for this is that a bunch of new stuff loaded, which throws everything that's on the page already out…

Yep, it breaks a ton of standards and UI expectations, I don’t know where people get off saying it’s good for accessibility. (Sorry, a11y.) Don’t reinvent the back button!

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#92

Post by seph-reed »

Tajnymag wrote: post #68
seph-reed wrote: post #56

Earlier quoted context omitted.

I'm a solo developer, and I have a project that totally can do it. I've done the proof-of-concept in an afternoon, but am mostly focused on web stuff atm. Granted, it leverages NativeScript, but it's really not that hard once you have that.

Could you please share the details? I don't know about a way to render the same template in the browser and nativescript.

In my case, you basically just take some code like this:

    const renderEl = flex("UserList", [
      label("User", ["Alice"]),
      label("User", ["Bob"]),
    ]);
In NativeScript, you would have these functions create those types of UI elements. For web, they'd probably produce divs and spans.

Ofc, there will be certain elements that are native only, or require really special stuff to create.

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#93

Post by darepublic »

handrous wrote: post #66
nfRfqX5n wrote: post #47

Earlier quoted context omitted.

I rarely experience any of these issues and think their front end is quite good. Just their a11y / keyboard nav stuff is some of the best I've seen. Some questionable design choices but that's more of a product thing

Tweets not loading, with an error, except after several tries, is a commonly-reported problem. I've seen it for years, across multiple browsers & devices, happens all the time. It might go away if you log in. I wouldn't know.

In fairness sounds like a backend problem. But I have the same experience and it's annoying

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#94

Post by [deleted] »

rgbrgb wrote: post #79

Lots of classic HN dismissals here, though I am glad we as a community have finally gotten past the anger around requiring JS to use the site. In my mouth, Twitter is probably the best, most responsive web app I've ever used. It is not trivial to make a responsive infinite scroll that remembers your place on back, live updates gracefully, has useful shareable URLs, keeps memory usage low, loads quickly, etc. To me it…

[deleted]

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#95

Post by SilasX »

chmod775 wrote: post #64

I consider any site that loads 3 seconds to display about 100 bytes worth of unicode text to be utter garbage. I actually wanted to check the precise loading times before posting this, but would you look at this: https://i.imgur.com/VWOlNHu.png I rest my case.

This is old, but I thought another hilarious unforced error was when you could click on a tweet link, and it couldn’t fit the 140 character message in your initial view!

https://imgur.com/972el7u

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#96

Post by userbinator »

turminal wrote: post #83
rgbrgb wrote: post #79

Lots of classic HN dismissals here, though I am glad we as a community have finally gotten past the anger around requiring JS to use the site. In my mouth, Twitter is probably the best, most responsive web app I've ever used. It is not trivial to make a responsive infinite scroll that remembers your place on back, live updates gracefully, has useful shareable URLs, keeps memory usage low, loads quickly, etc. To me it…

> we as a community have finally gotten past the anger around requiring JS to use the site. We have not. It still sucks. As for the twitter responsiveness experience... You must be living in an alternate universe.

Indeed. If Twitter is your definition of a good webapp, I'm scared to know what "average" or "bad" is like...

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#97

Post by kall »

gedy wrote: post #27
robertoandred wrote: post #21

Earlier quoted context omitted.

An important distinction that often gets lost is that React itself is an abstract, standalone layer above web and native. It handles deciding what to render and when. When you learn the concepts of React, you're learning this layer. Then there are layers that decide how to render. Regular React has a renderer that accepts HTML tags spits out HTML for the browser. React Native has a renderer that accepts more abstract…

I'm curious why it's a special renderer vs just another React component library?

As far as I know, it is. I think OP simplified for the explanation but when I last used it, RNW did not include a react render, it uses react-dom.

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#98

Post by 3g34g34g4y657 »

xgulfie wrote: post #31

Twitter's website is absolute garbage, the feed is unresponsive, tweets fail to load, it's just terrible. If you're modeling your frontend off of anything please do not pick Twitter because their web experience is awful.

They have been trying to kill their web experience longer than most other modern platforms have been alive. The latest iteration of that is requiring a Twitter account to see any posts at all now.

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#99

Post by bmeski »

rgbrgb wrote: post #79

Lots of classic HN dismissals here, though I am glad we as a community have finally gotten past the anger around requiring JS to use the site. In my mouth, Twitter is probably the best, most responsive web app I've ever used. It is not trivial to make a responsive infinite scroll that remembers your place on back, live updates gracefully, has useful shareable URLs, keeps memory usage low, loads quickly, etc. To me it…

This is actually not that hard to do and has been done many many many times before.

URLs can be unique ids for scrolling to.

Simple Ajax function to attach cards on scroll.

Poll or get pinged by SSE to pull updates, swap by url as Id

Loads fast if you simply render html and lazy load the images. Css is almost instant.

We can do better with so much less. Unfortunately we now have front end engineers everywhere doing web development.

Re: Twitter.com's HTML, which is produced by React Native for Web, explained

#100

Post by indiv0 »

LukeShu wrote: post #90
nfRfqX5n wrote: post #47

Earlier quoted context omitted.

I rarely experience any of these issues and think their front end is quite good. Just their a11y / keyboard nav stuff is some of the best I've seen. Some questionable design choices but that's more of a product thing

About 90% of my interaction with Twitter is is clicking a link from HN. When I do so, there's about a 1/3 chance that tweet doesn't load.

I was under the impression this was an intentional dark pattern to get users to sign up / log in to twitter? The reason I believe this is because if you get that failure and back out and click the link again it works 100% of the time.
Post reply on HN