Live data from Hacker News

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

giuseppegurgone.com

131–140 of 163 posts

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

#132

Earlier quoted context omitted.

What universe are you living in? Slack and GMail are horrendous compared to twitter. Twitter loads almost instantaneously. Only web app that correctly handles infinite scroll.

I'm living in a universe where Slack and Gmail are horrendous yes. That's why I brought them up as examples of low bars. Twitter is somehow even worse. There's nothing "correct" about Twitter's infinite scroll: back button is never quite sure where in the timeline it should bring you. Occasionally the top or your last position, but most frequently a random tweet somewhere in between. But the major issue isn't UX: I d…

my favorite is when I open a thread from a tweet partway through and try to scroll before the page finishes fully loading. it dumps you way back at the top

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

#133
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…

Twitter is unbearable for me on mobile web. Takes multiple reloads many times.

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

#135
post #27

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?

React, react-native and react-native-web are really interesting. Classic react (for the web) was built with a plugin based rendering system. Classic react's renderer targets HTML and the DOM. React-native swaps out the renderer for one that renders to native elements (for example, instead of a you would use a , which then renders a native "box" using system primitives). They are both running the same react code, just with different renders. There's a whole system in react-native to be able to wrap native APIs and access them via javascript, but at the end of the day, both systems are running the same react (just different renders).

React-native-web is basically a classic react component library that aims to be 100% compatible with react-native. You can literally do "npm install react-native-web", then "import {View, Text} from "react-native" and just start writing react-native code in a classic react-project. It's nearly feature complete, and pretty incredible. Really the only downside is that (obviously) react-native-web can't use those 3rd party libraries that use that "native API wrapper" features of react-native. That being said, a lot of packages are starting to offer react-native-web compatibility by writing web-specific "polyfills" for the native components.

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

#136

Earlier quoted context omitted.

What universe are you living in? Slack and GMail are horrendous compared to twitter. Twitter loads almost instantaneously. Only web app that correctly handles infinite scroll.

I'm living in a universe where Slack and Gmail are horrendous yes. That's why I brought them up as examples of low bars. Twitter is somehow even worse. There's nothing "correct" about Twitter's infinite scroll: back button is never quite sure where in the timeline it should bring you. Occasionally the top or your last position, but most frequently a random tweet somewhere in between. But the major issue isn't UX: I d…

Wait, what? What's horrendous about Gmail? It's one of the few sites that's predictable, gets out of my way, has a smooth workflow, and doesn't leave me shouting, "WTF? Why would you do that?"

The only issues I remember having are that sometimes label autocomplete is flaky and sometimes the new emails take too long to show up.[1] It has good support for vim-like keyboard shortcuts as well.

Don't want to sound like a shill, but I've found Gmail to be an outlier.

[1] There was also the April Fools "mic drop" feature where you could accidentally mute a conversation but I didn't experience that personally.

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

#137
post #111
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…

Agreed. I’d love to hear some alternative examples to Twitter’s web app or how one could build it faster. Also I’m curious if the original Twitter lite was well engineered. I generally share all the criticisms above about the web but I thought Twitter’s Scala back end actually made the response fast and resilient. I mostly use the iOS app but never had problems with the mobile (until recent changes). https://blog.twi…

>Agreed. I’d love to hear some alternative examples to Twitter’s web app or how one could build it faster.

Sure, Twitter from 2011. Backend handling might be faster today but that's decoupled from the frontend bloat and UI anti-patterns.

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

#138

So why isn't React Native for web, just, you know, React? What's the difference and why?

React-native-web is more or less a component library that re-creates react-native's API. Some will disagree, but react-native's API is much nicer and cleaner than HTML and CSS. It's like they took the best parts of HTML and CSS and left out the 30 years of cruft.

The idea is that since react and react-native API's differ so much, it's not really feasible to have one code base cover native and the web. React-native and react-native-web allow you to use the same code. I'd say I'm at about 90-95% code reuse. You can throw in little platform specific changes inline (Platform.OS === "web" ? : ) or use platform specific extensions for things that really differ(MyComponent.android.js, MyComponent.ios.js, MyComponent.web.js or MyComponent.native.js for example).

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

#139
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…

In my experience, Twitter is only bearable on a Zen 3 or equivalent processor with at least 16GB of memory. Anything less than that is almost guaranteed to slow to a crawl if you're doing something other than reading a single tweet and closing the tab immediately afterwards.

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

#140
post #136

Earlier quoted context omitted.

I'm living in a universe where Slack and Gmail are horrendous yes. That's why I brought them up as examples of low bars. Twitter is somehow even worse. There's nothing "correct" about Twitter's infinite scroll: back button is never quite sure where in the timeline it should bring you. Occasionally the top or your last position, but most frequently a random tweet somewhere in between. But the major issue isn't UX: I d…

Wait, what? What's horrendous about Gmail? It's one of the few sites that's predictable, gets out of my way, has a smooth workflow, and doesn't leave me shouting, "WTF? Why would you do that?" The only issues I remember having are that sometimes label autocomplete is flaky and sometimes the new emails take too long to show up.[1] It has good support for vim-like keyboard shortcuts as well. Don't want to sound like a…

Try opening a few Gmail tabs on a machine that's more than a few years old or has a relatively low amount of memory. It might be an okay experience if opening Gmail is literally the only thing you're doing with the machine.
Post reply on HN