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

21–30 of 163 posts

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

#21

Post by robertoandred »

DoctorOW wrote: post #3

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?

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 (, ) 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 (, ) 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.

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

#22

Post by [deleted] »

karimf wrote: post #8

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…

[deleted]

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

#23

Post by hunterb123 »

kypro wrote: post #14
karimf wrote: post #8

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…

Cross-platform frameworks work great for basic CRUD apps but when you start to do things more complicated it can be a headache. Sometimes hardware and features you want to leverage are specific to the platform.

With React Native you can just use file.ios.js or file.windows.js etc if you want to do something different entirely for a platform. You can also check the platform with a function for minor adjustments. You can also handle these differences in a RN extension if they involve native code.

You can model your codebase so the function stubs are the same, but the implementation differs based on platform. So you can use it the same way in the rest of your code.

I run this setup in production and I share about 95% of code between platforms for a complex cloud storage app (file manager, uploading, etc.)

Basically isolate what's different, and abstract it to a common interface.

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

#24

Post by slowwriter »

Milolol wrote: post #15

The classic mistake of thinking role=button replaces . 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…

> > The "paragraph" role isn’t mapped to a

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

. This is supported by what follows the quote:

> in React Native for Web both Text and View support block-level children.

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

#25

Post by EvilEy3 »

hunterb123 wrote: post #18
Cloudef wrote: post #10

Earlier quoted context omitted.

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.

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 gene…

> I prefer the flexibility of the React stack, being able to match different libraries vs a framework.

No, just no.

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

#26

Post by lemax »

DoctorOW wrote: post #3

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?

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.

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

#27

Post by gedy »

robertoandred wrote: post #21
DoctorOW wrote: post #3

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?

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?

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

#28

Post by [deleted] »

slowwriter wrote: post #24
Milolol wrote: post #15

The classic mistake of thinking role=button replaces . 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…

> > The "paragraph" role isn’t mapped to a 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 . This is supported by what follows the quote: > in React Native for Web both Text and View support block-level children.

[deleted]

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

#29

Post by zachrip »

robertoandred wrote: post #21
DoctorOW wrote: post #3

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?

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…

Adding to this - jsx (the templating that react and other libraries use) is compiled down to calls for React.createElement (this is configurable). And jsx is a sort of superset of html so it's not exactly html tags, it just looks a lot like it.

https://www.typescriptlang.org/play?#code/DwEwlgbgfAsAUAAgcA...

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

#30

Post by hunterb123 »

endisneigh wrote: post #11

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…

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.

Post reply on HN