15 ms·

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

160 points by ggurgone 5y ago

gwbas1c 5y ago
??? This page is just an animation, and has nothing to do with "Twitter.com's HTML, which is produced by React Native for Web, explained"
- Scottopherson 5y ago
  Apparently is has a screensaver if you don't interact with the page after a certain amount of time.
  - Milolol 5y ago
    That's cute but less accessible than I'd expect from a site that discusses the importance of web a11y so specifically.
DoctorOW 5y ago
So pardon my ignorance but I thought React was already for web and React Native merely a set of tools to help port React web apps to native mobile apps. What is the difference between React for web and React Native for web?
- giaset 5y ago
  React Native for web allows you to use the same primitives (View, Text, Image, Button) across platforms (web/iOS/Android/etc)
- notamy 5y ago
  React Native for web is, as the name implies, React Native components used for building websites. The idea is that you can share code between your native apps and your web app.
- deleted 5y ago
  [deleted]
- robertoandred 5y ago
  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 tags (<View>, <Text>) and spits out native views for apps. There are other projects that make renderers for making PDFs, animations, etc. React Native for Web is basically a renderer that accepts the abstract tags React Native uses (<View>, <Text>) and spits out HTML. React Native does not really help you directly port a web app to native, but React Native for Web is designed to directly port a native app to the web.
  - gedy 5y ago
    I'm curious why it's a special renderer vs just another React component library?
    - kall 5y ago
      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.
    - gorbypark 5y ago
      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 <div> you would use a <View>, 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.
- lemax 5y ago
  React and React Native are separate tools, and they don't play with each other. You actually need to build two separate apps and you don't get much of any re-use. For example, you can't use Material UI for React in React Native, and you can't build a React component library and just pull it into React Native. So if you want a fully cross platform React experience, you need React Native from the get-go and to compile it for web when you want web.
  - usrusr 5y ago
    Almost holding my breath for the time we see a version of react native for web getting packaged into a container that mimicks a native mobile app. And back then I thought that I've seen it all when apps built with scalajs-react-native appeared on Android.
  - jamesisaac 5y ago
    This isn't really accurate. Presuming you're using react-native-web [1] (the most popular version of RN targeting the web, although there are others), it's essentially just a set of components and APIs, fulfilling RN's API, which sit on top of React DOM. So anything you could do in React, you can also do in RNWeb, as it's a superset of React. Of course, you'd need to use the RN components if you want to share code between web and native mobile. But there's nothing stopping you reaching a high degree of code re-use, and/or using React components for the web-only portion of a RNWeb project. [1] https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web
- lxe 5y ago
  It's simply React (for web), but for native, ported for web. Would be cool to see a react-native-web-native port to use react-native-web for native apps!
cruano 5y ago
I love that the site has a screensaver
- ourcat 5y ago
  I came across this too. Really nice idea.
karimf 5y ago
I've been searching a stack which could allow for a single codebase to be rendered in Android, iOS, and the web, and React Native + React Native Web might be the top choice for that. Other competitor includes Flutter, which used to only render canvas on the web, but right now it seems they have an option to render as HTML as well. I bet the need for cross-platform stack might continue to rise in the future. It's just impossible for small team/solo founder to target 3 different platforms, while handling three different codebases.
- Cloudef 5y ago
  I've recently been playing with flutter and I like it more than react-native. React-native feels kind of a hack job, and the resulting program isn't really that well optimized (both performance and size wise). Flutter seems like more thought out solution where react-native was afterthought for react. Both are very productive environments however.
  - jadbox 5y ago
    I'd like to say imho that Fluttter seams to have the reverse issue from react-native in that it isn't tuned for website rendering. Since Flutter has to redraw it's canvas for animations and user interactions, it can be slow for websites where the browser window is fairly large.
  - hunterb123 5y ago
    I've had the opposite experience. The only thing Flutter has going for it is the batteries included aspect, which can be a bad thing as well. I prefer the flexibility of the React stack, being able to match different libraries vs a framework. E.g. maybe you want a more native router, use Wix's native navigation, otherwise use react navigation. Maybe you love reactive programming, use observables, otherwise maybe generators for side effects. The apps Flutter produces don't feel right, RN does have a more native feel since it uses native primitives. Kinda like wxWidgets vs QT. I'd rather use native controls than trying to mimic the look and feel of native (and keep up w/ changes). This is especially noticeable on iOS and even more so on web. React Native was definitely not an after thought, it's simply another bridge. I've had great experience with all the bridges. RN for Windows / Mac (both the MS fork and Catalyst), and RN for Web. I've made and work with a production React Native Web / React Native website and apps. It's been very pleasant to maintain apps and a website (desktop & mobile site) with one codebase.
endisneigh 5y ago
React native I believe is the right approach given the current constraints, but I’d prefer that it would be possible to access native device apis via the browser. Does Twitter really benefit a native app? Perhaps, but it’s certainly not necessary. Ideally iOS and Android would simply expose native apis via browser and allow one to toggle access to said apis per site. My conspiracy theory is that the only reason this isn’t already possible is due to vendors wanting more control.
- tdhz77 5y ago
  Have you seen expo? You can access native browser apis.
  - endisneigh 5y ago
    Yes, but that’s not what I’m describing.
- hunterb123 5y ago
  With React Native Web, that's exactly what this gives you. Basically you get a PWA for free with your app. All "native" features that you have can then use web device apis if they exist. Basically React Native Web allows you to have a lite version of your app that lives on the web.
  - endisneigh 5y ago
    Yes, but then you must use React Native. What I’m describing is that you could use regular JavaScript to access native apis. That way if you preferred Vue, Angular, Ember, Elm, etc you could use that.
    - hunterb123 5y ago
      Well you can, but the point of React is to abstract the view from the platform, not much more. You can use something like Solid or JSX lite to maintain standard components that are compatible with most of those frameworks and web components.
Milolol 5y ago
The classic mistake of thinking role=button replaces <button>. It doesn't (as mentioned in the linked PR comments). Native HTML buttons are supported by all user agents and assistive technology and provide keyboard and focus requirements by default [1]. The "short answer" they give as to why they did this (a flexbox bug) links to a comment from February saying this was fixed in Firefox 63. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#best_practices https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
- slowwriter 5y ago
  > > The "paragraph" role isn’t mapped to a <p> tag because it’s an HTML conformance error to include block-level children within the [article] element I believe you are misquoting here. "The element" refers to the paragraph element, meaning that valid HTML5 doesn't allow block-level elements within <p>. This is supported by what follows the quote: > in React Native for Web both Text and View support block-level children.
  - deleted 5y ago
    [deleted]
- extra88 5y ago
  At least they were thorough enough in their re-implementation of <button> to include activation by pressing either Enter/Return or Space bar.
- dexwiz 5y ago
  I think years of <div> only development has destroyed most developer's knowledge of semantic HTML elements. There are over a hundred elements with various meanings, but to a visual user, they all look the same. With a renewed interested in A11Y people are still starting to rediscover these, but it's still slow.
xgulfie 5y ago
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.
- jdavis703 5y ago
  Is there any infinite scrolling website that works smoothly on mobile devices?
  - selykg 5y ago
    I mean... I'm perfectly fine hitting buttons to goto the next page honestly.
    - inbx0 5y ago
      I kinda want to agree but then, I practically never do hit that button. Not on google search results. Not on hacker news.
      - progbits 5y ago
        Which is probably a good thing. Neither of those sites wants you to "stay engaged" and keep scrolling forever. Old reddit was the same, but of course the redesign is infinite scroll.
- nfRfqX5n 5y ago
  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
  - unknownOrigin 5y ago
    You literally can't use the site properly when you're not logged in (and I mean basic clicking on retweeted/quoted stuff shows a login page, clicking on people's names shows a login page etc.) - how is that good? (I mean sure, build your walled garden as you please, but then you have no business showing in search engine results.)
cblconfederate 5y ago
Too much complexity with garbage excuses. A lot of the web is like that now. You can't link to a specific tweet. 'Nuff said
- zachrip 5y ago
  > You can't link to a specific tweet. 'Nuff said What? https://twitter.com/Twitter/status/1433462575438643206 https://twitter.com/Twitter/status/1433462575438643206
  - cblconfederate 5y ago
    Not possible for a single tweet that is deep in a thread of replies. You can only link the topmost tweet
    - zachrip 5y ago
      From the same thread I linked before: https://twitter.com/MR_Professor45/status/1433464280850960387 https://twitter.com/MR_Professor45/status/143346428085096038... - they give you context, if that's what you're meaning? But that is how it should work.
      - cblconfederate 5y ago
        Maybe they fixed it? For very long time you couldn't show a specific tweet in a long thread with more than ~20 tweets, it would default to the topmost one with the relevant usually hidden behind "show more"
marstall 5y ago
rnweb saved my bacon in an app I did that was architected as a react app hosted within an iOS webview. the killer problem I was facing is that the webview didn't handle touches well within a scrolling context. so if you began your scrolling gesture by touching down on a button's box, it would often interpret that as a button press. which was hella annoying and a classic "tell" that you are dealing with a web app trying to masquerade as a native app. refactoring to use rnweb's <ScrollView/> and <Button/> made all that go away. Now I'd (boldly) challenge you to find a "tell" that this app is not native. (shelf.fm if you're curious).
antigirl 5y ago
Would one have to write custom CSS for the desktop version after the generator has spat out the css? Mobile first, so thats not the issue but targeting the various classes generated would be a pain?
chmod775 5y ago
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 https://i.imgur.com/VWOlNHu.png I rest my case.
- spiderice 5y ago
  This is genuinely what I see 50% of the time I go to Twitter. Every other big website can keep their site loading >99% of the time. The fact that Twitter can’t is beyond me, and speaks to their incompetence.
  - jspash 5y ago
    Been to Reddit lately? It's gotten better to be sure, but I have to reload or dance around with the back/forward buttons so often simply because I attempted to visit a page.
    - userbinator 5y ago
      If you haven't heard of it: old.reddit.com (I'm not even a Reddit user, but it shows up in search results and I get linked there.)
  - kilroy123 5y ago
    Same here. I truly do not understand why. For a while I thought it was some weird blocking from Privacy Badger.
- SilasX 5y ago
  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 https://imgur.com/972el7u
chadlavi 5y ago
> To the eyes of somebody who’s not familiar with the framework, the HTML produced by React Native for Web might look utterly ugly and full of bad practices. To the eyes of someone familiar with the framework it is still full of bad practices.
steviedotboston 5y ago
So this explains how their markup is hot garbage, but not really WHY it is.
- awinter-py 5y ago
  is this a torlet / uriness callback
- tomgp 5y ago
  laziness. they could just not use a tool that generates reams of bullshit markup but that would require thought and effort to understand and work with the material of the web.
  - ggurgone 5y ago
    React Native for Web is the tool that generates that HTML
rgbrgb 5y ago
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's the real proof point for RN web and web workers.
- turminal 5y ago
  > 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.
  - userbinator 5y ago
    Indeed. If Twitter is your definition of a good webapp, I'm scared to know what "average" or "bad" is like...
- deleted 5y ago
  [deleted]
- bmeski 5y ago
  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.
- tomgp 5y ago
  Maybe not trivial but these are all solved problems - media queries, http get requests and history state manipulation are all mature and well understood. In common with 90% of the web twitter’s performance and memory usage is utterly abysmal. We’ve been trained to accept this kind of thing but it doesn’t have to be this way. Im prepared to accept that there are complications that i don’t know about but Twitter is not that complicated a front end and it shouldn’t be beyond the wit of a tech company the size of Twitter to make something that y’know actually shows a tweet when you click a link to see a tweet.
awinter-py 5y ago
ohhhh finally an explanation for why my whole machine blips when I type into the search box and then I wake up 5 hours later in a stolen car with lost time
skytreader 5y ago
Amusing anecdote involving div soups: Back in 2010 in one of my CS classes, the professor maintained a Google Sites to communicate with her students and upload slides. At the end of the semester, she wrote a list of students who must take the finals to get at least a passing grade. The thing is, you view it Chrome, the list displays normally, a handful of students. But you view it in Firefox and it's an empty list. On Firefox it would look like > (MM/DD/YY) Here's the list of students who must take the finals: > > (MM/DD/YY) [Next reminder...] Sucks to be a Firefox user and be on that list. A few years later, maybe 2015/2016, with a few years in the industry under my belt, I remember this curiosity and rechecked. Firefox is still not showing the list. I open developer tools to inspect and I'm greeted by an eldritch, decadent, and blasphemous nesting of divs. I did not try to understand it but it seems the stylesheet in use indents divs a certain amount and they abused this rule to get the list to the indentation they want. Probably it hit some limit in Firefox. I've never used Google Sites so I can't guess whose fault is this. But it's unlikely my prof hand-wrote that HTML. With this article, it seems to me that Twitter devs, for all their fancy dev toolchains, could only produce slightly better HTML than my professor. Perhaps the industry in general is really not much better than Google Sites, seeing our reliance on such bloated frameworks. What a sobering thought. P.S. I did look her up just to check if this bug is still present. Her Google Sites is still up, she still teaches, but she seems to have taken down her earlier course pages.
- dexwiz 5y ago
  Wouldn't be surprised if this was an output of a WYSIWYG editor. These are notoriously bad for outputting garbage HTML, especially since multiple edits to the content can leave behind unneeded elements. Browsers are incredibly tolerant of invalid HTML (will do things like add closing tags), but they aren't all the same. When you generate garbage HTML, it's easy to see the differences between browsers and their attempts to correct it.
- BiteCode_dev 5y ago
  > With this article, it seems to me that Twitter devs, for all their fancy dev toolchains, could only produce slightly better HTML than my professor. I assume they also make the html complicated to make it hard to scrap the site.
bastawhiz 5y ago
It feels very unnatural to me to use React Native semantics and bolt on props for headings and the like; it seems like it would be better to write <H1> than <Text accessibilityRole="heading" accessibilityLevel={1}>, even just from a DX perspective.
- ggurgone 5y ago
  Since everything is a component in React you could abstract that eg. const H1 = props => <Text accessibilityRole="heading" accessibilityLevel={1} {...props} />
  - bastawhiz 5y ago
    Sure. But I think the framework would need to emit a proper tag rather than the tag soup that it seemingly emits now. I can't see a win in expressing something in an idiomatic way, to have it translated to an unidiomatic output that mimics the behavior of the original idiomatic code. Like, if you're typing the Text version, you already know it's going to be a H1. So just write that.
heavyset_go 5y ago
Twitter is almost unusable on a machine with 8GB of memory. Many M1 Macs ship with 8GB of memory to this day.
notpachet 5y ago
I am increasingly of the opinion that we need to ditch HTML in order to protect and advance the open web. We've lost something valuable in this brave new HTML-as-a-compile-target future. The original intention of HTML was to serve as a a lightweight, semantic language that people could use to produce documents that were more-or-less structurally understandable (by both humans and computers). Now it's so muddy that we may as well be downloading binary files. (Sometimes we are.) Gone are the days when you could disable custom CSS and still kinda-sorta navigate the web. These days, it is en vogue to tightly couple what we're seeing on an HTML page (a product listing, a social media post) with instructions about how to render it (250px wide, black background, blinking marquee text). This is great for the tech companies that are producing these HTML blobs, because they have a lot of control over what they're showing to their users. It's only good for the users if they're 100% happy with how the data is being presented. I don't know about you, but I'm rarely happy these days. To say nothing for users with more stringent accessibility requirements. I wonder if there's a future where we all use a different kind of web browser -- one that doesn't accept any styling instructions from the websites it's visiting. It would probably need to be built on top of accepted data types for various things, like product listings or social media posts. That way, it wouldn't matter whether I was looking at a product on Amazon, Ebay or Etsy. I could tell my browser that I want all product listings to be rendered in dark mode, with a thumbnail preview image instead of a full-sized one, regardless of what site I'm currently on. Google is already in the process of trying to become this kind of "browser". It has the advantage of being the "front door" of the internet in doing so. It aggregates, and homogenizes, similar documents from various companies and presents them in a uniform way on the results page (eg, hotels, flights, word definitions). I don't want to rely on Google to do this for me. I want the documents of the web to be semantically meaningful to the point where my browser can make opinionated decisions about how to style the information I'm downloading.
- Seirdy 5y ago
  > I don't want to rely on Google to do this for me. I want the documents of the web to be semantically meaningful to the point where my browser can make opinionated decisions about how to style the information I'm downloading. You've described the Gemini protocol and Gemtext markup. Gemtext is explicitly designed to leave presentation up to the user agent. https://gemini.circumlunar.space https://gemini.circumlunar.space
jonplackett 5y ago
So why isn't React Native for web, just, you know, React? What's the difference and why?
- gorbypark 5y ago
  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" ? <This> : <That>) 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).
  - jonplackett 5y ago
    Thanks for the description! I’ll have to check it out… only just got really comfortable making react web apps. If you’re not making an app would you still use react native web over old stool react for the reasons above?
deleted 5y ago
[deleted]
SergeAx 5y ago
Let me write it all down, it's a bit confusing. There is a React framework, created to produce Javascript backed applications running in the browser. Then there is a React Native, a wrapper to run those applications on mobile platforms by compiling Javascript apps to native code. And then here is a React Native for Web, a way to compile a Javascript React Native apps into... Javascript to run inside browsers? Boy, that frontend ecosystem is really cursed.
- _fat_santa 5y ago
  React Native web is really all about code sharing between web and mobile in my mind. Say Twitter were to build their website in plain ReactJS, if they did that then there would be no easy way to transfer components from web to mobile, yes they are both written in React, but regular React isn't 100% interoperable with React Native. This is where React Native for Web comes into the picture, RN for Web patches that gap of interoperability between web and mobile, what Twitter likely has behind the scenes is a custom UI library that provides all the elements you see on Twitter, if they had chosen ReactJS for the web, they would have to maintain two libraries, however with React Native for web, they only have to maintain one.
deleted 5y ago
[deleted]

160 points by ggurgone 5y ago

??? This page is just an animation, and has nothing to do with "Twitter.com's HTML, which is produced by React Native for Web, explained"

Scottopherson 5y ago
Apparently is has a screensaver if you don't interact with the page after a certain amount of time.
- Milolol 5y ago
  That's cute but less accessible than I'd expect from a site that discusses the importance of web a11y so specifically.

DoctorOW 5y ago

So pardon my ignorance but I thought React was already for web and React Native merely a set of tools to help port React web apps to native mobile apps. What is the difference between React for web and React Native for web?

giaset 5y ago
React Native for web allows you to use the same primitives (View, Text, Image, Button) across platforms (web/iOS/Android/etc)
notamy 5y ago
React Native for web is, as the name implies, React Native components used for building websites. The idea is that you can share code between your native apps and your web app.
deleted 5y ago
[deleted]
robertoandred 5y ago
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 tags (<View>, <Text>) and spits out native views for apps. There are other projects that make renderers for making PDFs, animations, etc. React Native for Web is basically a renderer that accepts the abstract tags React Native uses (<View>, <Text>) and spits out HTML. React Native does not really help you directly port a web app to native, but React Native for Web is designed to directly port a native app to the web.
- gedy 5y ago
  I'm curious why it's a special renderer vs just another React component library?
  - kall 5y ago
    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.
  - gorbypark 5y ago
    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 <div> you would use a <View>, 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.
lemax 5y ago
React and React Native are separate tools, and they don't play with each other. You actually need to build two separate apps and you don't get much of any re-use. For example, you can't use Material UI for React in React Native, and you can't build a React component library and just pull it into React Native. So if you want a fully cross platform React experience, you need React Native from the get-go and to compile it for web when you want web.
- usrusr 5y ago
  Almost holding my breath for the time we see a version of react native for web getting packaged into a container that mimicks a native mobile app. And back then I thought that I've seen it all when apps built with scalajs-react-native appeared on Android.
- jamesisaac 5y ago
  This isn't really accurate. Presuming you're using react-native-web [1] (the most popular version of RN targeting the web, although there are others), it's essentially just a set of components and APIs, fulfilling RN's API, which sit on top of React DOM. So anything you could do in React, you can also do in RNWeb, as it's a superset of React. Of course, you'd need to use the RN components if you want to share code between web and native mobile. But there's nothing stopping you reaching a high degree of code re-use, and/or using React components for the web-only portion of a RNWeb project. [1] https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web
lxe 5y ago
It's simply React (for web), but for native, ported for web. Would be cool to see a react-native-web-native port to use react-native-web for native apps!

cruano 5y ago

I love that the site has a screensaver

ourcat 5y ago
I came across this too. Really nice idea.

karimf 5y ago

I've been searching a stack which could allow for a single codebase to be rendered in Android, iOS, and the web, and React Native + React Native Web might be the top choice for that. Other competitor includes Flutter, which used to only render canvas on the web, but right now it seems they have an option to render as HTML as well. I bet the need for cross-platform stack might continue to rise in the future. It's just impossible for small team/solo founder to target 3 different platforms, while handling three different codebases.

Cloudef 5y ago
I've recently been playing with flutter and I like it more than react-native. React-native feels kind of a hack job, and the resulting program isn't really that well optimized (both performance and size wise). Flutter seems like more thought out solution where react-native was afterthought for react. Both are very productive environments however.
- jadbox 5y ago
  I'd like to say imho that Fluttter seams to have the reverse issue from react-native in that it isn't tuned for website rendering. Since Flutter has to redraw it's canvas for animations and user interactions, it can be slow for websites where the browser window is fairly large.
- hunterb123 5y ago
  I've had the opposite experience. The only thing Flutter has going for it is the batteries included aspect, which can be a bad thing as well. I prefer the flexibility of the React stack, being able to match different libraries vs a framework. E.g. maybe you want a more native router, use Wix's native navigation, otherwise use react navigation. Maybe you love reactive programming, use observables, otherwise maybe generators for side effects. The apps Flutter produces don't feel right, RN does have a more native feel since it uses native primitives. Kinda like wxWidgets vs QT. I'd rather use native controls than trying to mimic the look and feel of native (and keep up w/ changes). This is especially noticeable on iOS and even more so on web. React Native was definitely not an after thought, it's simply another bridge. I've had great experience with all the bridges. RN for Windows / Mac (both the MS fork and Catalyst), and RN for Web. I've made and work with a production React Native Web / React Native website and apps. It's been very pleasant to maintain apps and a website (desktop & mobile site) with one codebase.

endisneigh 5y ago

React native I believe is the right approach given the current constraints, but I’d prefer that it would be possible to access native device apis via the browser. Does Twitter really benefit a native app? Perhaps, but it’s certainly not necessary. Ideally iOS and Android would simply expose native apis via browser and allow one to toggle access to said apis per site. My conspiracy theory is that the only reason this isn’t already possible is due to vendors wanting more control.

tdhz77 5y ago
Have you seen expo? You can access native browser apis.
- endisneigh 5y ago
  Yes, but that’s not what I’m describing.
hunterb123 5y ago
With React Native Web, that's exactly what this gives you. Basically you get a PWA for free with your app. All "native" features that you have can then use web device apis if they exist. Basically React Native Web allows you to have a lite version of your app that lives on the web.
- endisneigh 5y ago
  Yes, but then you must use React Native. What I’m describing is that you could use regular JavaScript to access native apis. That way if you preferred Vue, Angular, Ember, Elm, etc you could use that.
  - hunterb123 5y ago
    Well you can, but the point of React is to abstract the view from the platform, not much more. You can use something like Solid or JSX lite to maintain standard components that are compatible with most of those frameworks and web components.

Milolol 5y ago

The classic mistake of thinking role=button replaces <button>. It doesn't (as mentioned in the linked PR comments). Native HTML buttons are supported by all user agents and assistive technology and provide keyboard and focus requirements by default [1]. The "short answer" they give as to why they did this (a flexbox bug) links to a comment from February saying this was fixed in Firefox 63. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#best_practices https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

slowwriter 5y ago
> > The "paragraph" role isn’t mapped to a <p> tag because it’s an HTML conformance error to include block-level children within the [article] element I believe you are misquoting here. "The element" refers to the paragraph element, meaning that valid HTML5 doesn't allow block-level elements within <p>. This is supported by what follows the quote: > in React Native for Web both Text and View support block-level children.
- deleted 5y ago
  [deleted]
extra88 5y ago
At least they were thorough enough in their re-implementation of <button> to include activation by pressing either Enter/Return or Space bar.
dexwiz 5y ago
I think years of <div> only development has destroyed most developer's knowledge of semantic HTML elements. There are over a hundred elements with various meanings, but to a visual user, they all look the same. With a renewed interested in A11Y people are still starting to rediscover these, but it's still slow.

xgulfie 5y ago

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.

jdavis703 5y ago
Is there any infinite scrolling website that works smoothly on mobile devices?
- selykg 5y ago
  I mean... I'm perfectly fine hitting buttons to goto the next page honestly.
  - inbx0 5y ago
    I kinda want to agree but then, I practically never do hit that button. Not on google search results. Not on hacker news.
    - progbits 5y ago
      Which is probably a good thing. Neither of those sites wants you to "stay engaged" and keep scrolling forever. Old reddit was the same, but of course the redesign is infinite scroll.
nfRfqX5n 5y ago
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
- unknownOrigin 5y ago
  You literally can't use the site properly when you're not logged in (and I mean basic clicking on retweeted/quoted stuff shows a login page, clicking on people's names shows a login page etc.) - how is that good? (I mean sure, build your walled garden as you please, but then you have no business showing in search engine results.)

cblconfederate 5y ago

Too much complexity with garbage excuses. A lot of the web is like that now. You can't link to a specific tweet. 'Nuff said

zachrip 5y ago
> You can't link to a specific tweet. 'Nuff said What? https://twitter.com/Twitter/status/1433462575438643206 https://twitter.com/Twitter/status/1433462575438643206
- cblconfederate 5y ago
  Not possible for a single tweet that is deep in a thread of replies. You can only link the topmost tweet
  - zachrip 5y ago
    From the same thread I linked before: https://twitter.com/MR_Professor45/status/1433464280850960387 https://twitter.com/MR_Professor45/status/143346428085096038... - they give you context, if that's what you're meaning? But that is how it should work.
    - cblconfederate 5y ago
      Maybe they fixed it? For very long time you couldn't show a specific tweet in a long thread with more than ~20 tweets, it would default to the topmost one with the relevant usually hidden behind "show more"

marstall 5y ago

rnweb saved my bacon in an app I did that was architected as a react app hosted within an iOS webview. the killer problem I was facing is that the webview didn't handle touches well within a scrolling context. so if you began your scrolling gesture by touching down on a button's box, it would often interpret that as a button press. which was hella annoying and a classic "tell" that you are dealing with a web app trying to masquerade as a native app. refactoring to use rnweb's <ScrollView/> and <Button/> made all that go away. Now I'd (boldly) challenge you to find a "tell" that this app is not native. (shelf.fm if you're curious).

antigirl 5y ago

Would one have to write custom CSS for the desktop version after the generator has spat out the css? Mobile first, so thats not the issue but targeting the various classes generated would be a pain?

chmod775 5y ago

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 https://i.imgur.com/VWOlNHu.png I rest my case.

spiderice 5y ago
This is genuinely what I see 50% of the time I go to Twitter. Every other big website can keep their site loading >99% of the time. The fact that Twitter can’t is beyond me, and speaks to their incompetence.
- jspash 5y ago
  Been to Reddit lately? It's gotten better to be sure, but I have to reload or dance around with the back/forward buttons so often simply because I attempted to visit a page.
  - userbinator 5y ago
    If you haven't heard of it: old.reddit.com (I'm not even a Reddit user, but it shows up in search results and I get linked there.)
- kilroy123 5y ago
  Same here. I truly do not understand why. For a while I thought it was some weird blocking from Privacy Badger.
SilasX 5y ago
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 https://imgur.com/972el7u

chadlavi 5y ago

> To the eyes of somebody who’s not familiar with the framework, the HTML produced by React Native for Web might look utterly ugly and full of bad practices. To the eyes of someone familiar with the framework it is still full of bad practices.

steviedotboston 5y ago

So this explains how their markup is hot garbage, but not really WHY it is.

awinter-py 5y ago
is this a torlet / uriness callback
tomgp 5y ago
laziness. they could just not use a tool that generates reams of bullshit markup but that would require thought and effort to understand and work with the material of the web.
- ggurgone 5y ago
  React Native for Web is the tool that generates that HTML

rgbrgb 5y ago

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's the real proof point for RN web and web workers.

turminal 5y ago
> 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.
- userbinator 5y ago
  Indeed. If Twitter is your definition of a good webapp, I'm scared to know what "average" or "bad" is like...
deleted 5y ago
[deleted]
bmeski 5y ago
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.
tomgp 5y ago
Maybe not trivial but these are all solved problems - media queries, http get requests and history state manipulation are all mature and well understood. In common with 90% of the web twitter’s performance and memory usage is utterly abysmal. We’ve been trained to accept this kind of thing but it doesn’t have to be this way. Im prepared to accept that there are complications that i don’t know about but Twitter is not that complicated a front end and it shouldn’t be beyond the wit of a tech company the size of Twitter to make something that y’know actually shows a tweet when you click a link to see a tweet.

awinter-py 5y ago

ohhhh finally an explanation for why my whole machine blips when I type into the search box and then I wake up 5 hours later in a stolen car with lost time

skytreader 5y ago

Amusing anecdote involving div soups: Back in 2010 in one of my CS classes, the professor maintained a Google Sites to communicate with her students and upload slides. At the end of the semester, she wrote a list of students who must take the finals to get at least a passing grade. The thing is, you view it Chrome, the list displays normally, a handful of students. But you view it in Firefox and it's an empty list. On Firefox it would look like > (MM/DD/YY) Here's the list of students who must take the finals: > > (MM/DD/YY) [Next reminder...] Sucks to be a Firefox user and be on that list. A few years later, maybe 2015/2016, with a few years in the industry under my belt, I remember this curiosity and rechecked. Firefox is still not showing the list. I open developer tools to inspect and I'm greeted by an eldritch, decadent, and blasphemous nesting of divs. I did not try to understand it but it seems the stylesheet in use indents divs a certain amount and they abused this rule to get the list to the indentation they want. Probably it hit some limit in Firefox. I've never used Google Sites so I can't guess whose fault is this. But it's unlikely my prof hand-wrote that HTML. With this article, it seems to me that Twitter devs, for all their fancy dev toolchains, could only produce slightly better HTML than my professor. Perhaps the industry in general is really not much better than Google Sites, seeing our reliance on such bloated frameworks. What a sobering thought. P.S. I did look her up just to check if this bug is still present. Her Google Sites is still up, she still teaches, but she seems to have taken down her earlier course pages.

dexwiz 5y ago
Wouldn't be surprised if this was an output of a WYSIWYG editor. These are notoriously bad for outputting garbage HTML, especially since multiple edits to the content can leave behind unneeded elements. Browsers are incredibly tolerant of invalid HTML (will do things like add closing tags), but they aren't all the same. When you generate garbage HTML, it's easy to see the differences between browsers and their attempts to correct it.
BiteCode_dev 5y ago
> With this article, it seems to me that Twitter devs, for all their fancy dev toolchains, could only produce slightly better HTML than my professor. I assume they also make the html complicated to make it hard to scrap the site.

bastawhiz 5y ago

It feels very unnatural to me to use React Native semantics and bolt on props for headings and the like; it seems like it would be better to write <H1> than <Text accessibilityRole="heading" accessibilityLevel={1}>, even just from a DX perspective.

ggurgone 5y ago
Since everything is a component in React you could abstract that eg. const H1 = props => <Text accessibilityRole="heading" accessibilityLevel={1} {...props} />
- bastawhiz 5y ago
  Sure. But I think the framework would need to emit a proper tag rather than the tag soup that it seemingly emits now. I can't see a win in expressing something in an idiomatic way, to have it translated to an unidiomatic output that mimics the behavior of the original idiomatic code. Like, if you're typing the Text version, you already know it's going to be a H1. So just write that.

heavyset_go 5y ago

Twitter is almost unusable on a machine with 8GB of memory. Many M1 Macs ship with 8GB of memory to this day.

notpachet 5y ago

I am increasingly of the opinion that we need to ditch HTML in order to protect and advance the open web. We've lost something valuable in this brave new HTML-as-a-compile-target future. The original intention of HTML was to serve as a a lightweight, semantic language that people could use to produce documents that were more-or-less structurally understandable (by both humans and computers). Now it's so muddy that we may as well be downloading binary files. (Sometimes we are.) Gone are the days when you could disable custom CSS and still kinda-sorta navigate the web. These days, it is en vogue to tightly couple what we're seeing on an HTML page (a product listing, a social media post) with instructions about how to render it (250px wide, black background, blinking marquee text). This is great for the tech companies that are producing these HTML blobs, because they have a lot of control over what they're showing to their users. It's only good for the users if they're 100% happy with how the data is being presented. I don't know about you, but I'm rarely happy these days. To say nothing for users with more stringent accessibility requirements. I wonder if there's a future where we all use a different kind of web browser -- one that doesn't accept any styling instructions from the websites it's visiting. It would probably need to be built on top of accepted data types for various things, like product listings or social media posts. That way, it wouldn't matter whether I was looking at a product on Amazon, Ebay or Etsy. I could tell my browser that I want all product listings to be rendered in dark mode, with a thumbnail preview image instead of a full-sized one, regardless of what site I'm currently on. Google is already in the process of trying to become this kind of "browser". It has the advantage of being the "front door" of the internet in doing so. It aggregates, and homogenizes, similar documents from various companies and presents them in a uniform way on the results page (eg, hotels, flights, word definitions). I don't want to rely on Google to do this for me. I want the documents of the web to be semantically meaningful to the point where my browser can make opinionated decisions about how to style the information I'm downloading.

Seirdy 5y ago
> I don't want to rely on Google to do this for me. I want the documents of the web to be semantically meaningful to the point where my browser can make opinionated decisions about how to style the information I'm downloading. You've described the Gemini protocol and Gemtext markup. Gemtext is explicitly designed to leave presentation up to the user agent. https://gemini.circumlunar.space https://gemini.circumlunar.space

jonplackett 5y ago

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

gorbypark 5y ago
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" ? <This> : <That>) 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).
- jonplackett 5y ago
  Thanks for the description! I’ll have to check it out… only just got really comfortable making react web apps. If you’re not making an app would you still use react native web over old stool react for the reasons above?

deleted 5y ago

[deleted]

SergeAx 5y ago

Let me write it all down, it's a bit confusing. There is a React framework, created to produce Javascript backed applications running in the browser. Then there is a React Native, a wrapper to run those applications on mobile platforms by compiling Javascript apps to native code. And then here is a React Native for Web, a way to compile a Javascript React Native apps into... Javascript to run inside browsers? Boy, that frontend ecosystem is really cursed.

_fat_santa 5y ago
React Native web is really all about code sharing between web and mobile in my mind. Say Twitter were to build their website in plain ReactJS, if they did that then there would be no easy way to transfer components from web to mobile, yes they are both written in React, but regular React isn't 100% interoperable with React Native. This is where React Native for Web comes into the picture, RN for Web patches that gap of interoperability between web and mobile, what Twitter likely has behind the scenes is a custom UI library that provides all the elements you see on Twitter, if they had chosen ReactJS for the web, they would have to maintain two libraries, however with React Native for web, they only have to maintain one.

deleted 5y ago

[deleted]