[Portability] Provide mappings for core components to web

[ide]

The basic idea is that <View> can render to a <div> or canvas, etc. DOM is just another flavor of UIKit. Figuring out the layout system is probably the most challenging part unless React Native's layout engine is a subset of CSS.

[vjeux]

React Native's layout engine is a subset of CSS

It is :)

[vjeux]

But yeah, we've designed all the APIs such that they could be implemented on the web. I want to get the web backend working at some point.

[ide]

Cool. That will be exciting to see React come full circle.

[sahrens]

I know vjeux is excited about this, so passing to him for when he has time (or so he can find another owner).

[brentvatne]

Here's an attempt made by @necolas to figure this out: https://github.com/necolas/react-web-sdk

[necolas]

The core components in general are really great building blocks, which is why I started implementing bits of them for our web stack.

How much of the API's do you imagine being necessary (or different) for web? For example:

• control over what DOM element is rendered
• removal of iOS/Android-specific props
• removal of non-standard style props (e.g., shadow props)
• addition of web features / styles not currently available in react-native (e.g. full flexbox spec? is flex in RN equivalent to flex-grow in CSS?)
• is Stylesheet necessary?

I wanted to avoid the need for Stylesheet and use plain objects. But I'm fumbling my way into this interesting work and don't have enough knowledge of the problems to understand if it would be necessary for web.

[hugohua]

react native to web. We have tried. but performance is slow for android. my blog http://www.ghugo.com/react-native-to-web/

[ide]

That's really cool @baofen14787. Thanks for sharing your experience!

[hugohua]

Our implementation approach：

• component
  • <View> => <div>
  • <Text> => <div className="text">
    • Text style is display:block
    • Text in Text style is .text > .text {display:inline-block}
  • <touchabl*> => base on react-tappable
  • <ScrollView>、<ListView /> => base on xScroll
  • <Image> => <img /> and <div style="background-url:();background-size:...">
  • ....
• api
  • fetch => base on fetch and support jsonp
  • LayoutAnimation : use css3 transition
  • ...
• style
  • reset all style : *{display:flex;box-sizing: border-box;position: relative; margin : 0; padding : 0; border-style: solid; border-width : 0;}
  • support array style ,[object,object] use flattenStyle to object
  • transform flex:1 to flex: 1;-webkit-box-flex: 1-webkit-flex: 1;-ms-flex: 1;
    • div style={transformStyle(flattenStyle(style))} />
  • ....
• packager
  • base on react-native packager

@ide @vjeux We don't know how is the progress on Facebook side and whether their direction and thinking are consistent with ours?

[vjeux]

@baofen14787 this is awesome. I want to do the same next month and run our apps on web. I really want to know if the browsers are slow or if it was because we used to write slow code

[joewood]

This is interesting. Would using RN calculated layout make more sense? I think this would make layout to layout animations directly supportable, rather than CSS transitions.

[hugohua]

@vjeux like #4075
The main problem is that it takes long time in mountComponent, as component is the top tag .
I have a page that contains more than 2000 View/Text componets. If each component need 1 ms to be rendered, the page will take up 2s render

<App>
    <View>
        <View>
        ....2000+ <View/> or </Text>

[vjeux]

Can you reduce the number of components that need to be loaded during the first mount? By implementing some kind of pagination?

[jaygarcia]

I am with @vjeux, you really can't expect it to be responsive with such a huge payload.

The listview works in the desired, pagination style that @vjeux describes.

[hugohua]

I am trying to do this, but wonder whether there is a good solution to backward react-native code

[hugohua]

@vjeux Wiil react native for web be release in next month ?

[vjeux]

There's no concrete plan to work on a web backend right now, so definitely not within the next month.

It should also be pretty slow if you create 2000 view and text on react native. Did you find that it was not an issue on react native but an issue on react web?

[hugohua]

View and Text is native component in React-Native ?
for example:

var CellImageLogoText = React.createClass({
    render(){
        return (
            <TouchableHighlight>
                <View>
                    <Image source={{uri: _url}} /></Image>
                    <View>
                        <Image source={{uri: _url}}></Image>
                    </View>
                    <Text>{_desc}</Text>
                </View>
            </TouchableHighlight>
        )
    }       
}）

react native will create only one component. but react web create 7 component. ? I'm not sure

of course, react-web itself has some problems

[hugohua]

//react.js  div/span is native dom not View/Text
var CellImageLogoText = React.createClass({
    render(){
        return (
            <a>
                <div>
                    <img src={{uri: _url}} />
                    <div>
                        <img source={{uri: _url}} />
                    </div>
                    <span>{_desc}</span>
                </div>
            </a>
        )
    }       
}）

[chandu0101]

👍

[chandu0101]

@hugohua any plans to open source ur work ... ?

@vjeux can we expect official web backend in near future .. ( before 2016!)

[vjeux]

Unlikely from our end, no one is working on it

[browniefed]

Another implementation in the works here https://github.com/KodersLab/react-native-for-web
@ide @brentvatne no plans from Facebook to do this, and lots of open source working happening, any reason to keep this open? + custom renders in .14 might make this better.

[brentvatne]

@browniefed - let's keep it open for now so people searching active issues will find it, as it seems to be a common concern

[vjeux]

Would be awesome to bring this to react native core project at some point!

[Anahkiasen]

👍 for this, would love to be able to quickly work on my application without having to boot up XCode and the Simulator etc. I don't expect it to be 1:1 but just good enough to see the app and work on it would be a huge benefit

[chandu0101]

https://github.com/taobaofed/react-web

[yuanyan]

We create a react-web project alone, and expect that we can pull request a submit to the core.

[bestander]

Hey @ide! Thanks for opening the issue, but we are closing it because it looks like a feature request, feel free to send us a pool request or vote on it on Product Pains. :)

[necolas]

For any future visitors, react-native-web is aiming for rough "parity" with React Native 0.22. It can even run multiple apps (inc. the RN example games, unmodified) at the same time: http://codepen.io/necolas/pen/oxBXma.

[gregclermont]

Direct link to the Product Pains post, to vote on this issue:
https://productpains.com/post/react-native/react-native-for-web