New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Portability] Provide mappings for core components to web #182

Closed
ide opened this Issue Mar 23, 2015 · 31 comments

Comments

Projects
None yet
@ide
Collaborator

ide commented Mar 23, 2015

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

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Mar 23, 2015

Contributor

React Native's layout engine is a subset of CSS

It is :)

Contributor

vjeux commented Mar 23, 2015

React Native's layout engine is a subset of CSS

It is :)

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Mar 23, 2015

Contributor

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.

Contributor

vjeux commented Mar 23, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ide

ide Mar 24, 2015

Collaborator

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

Collaborator

ide commented Mar 24, 2015

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

@brentvatne brentvatne changed the title from Provide <View> to web mappings to [Portability] Provide <View> to web mappings May 31, 2015

@brentvatne brentvatne changed the title from [Portability] Provide <View> to web mappings to [Portability] Provide mappings for <View> and other core components to web Jun 1, 2015

@brentvatne brentvatne changed the title from [Portability] Provide mappings for <View> and other core components to web to [Portability] Provide mappings for core components to web Jun 1, 2015

@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Jun 12, 2015

Contributor

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

Contributor

sahrens commented Jun 12, 2015

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

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jun 12, 2015

Collaborator

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

Collaborator

brentvatne commented Jun 12, 2015

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

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Jun 13, 2015

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.

necolas commented Jun 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@hugohua

hugohua Jun 27, 2015

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

hugohua commented Jun 27, 2015

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

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Jun 27, 2015

Collaborator

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

Collaborator

ide commented Jun 27, 2015

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

@hugohua

This comment has been minimized.

Show comment
Hide comment
@hugohua

hugohua Jun 28, 2015

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?

hugohua commented Jun 28, 2015

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

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Jun 28, 2015

Contributor

@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

Contributor

vjeux commented Jun 28, 2015

@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 comment has been minimized.

Show comment
Hide comment
@joewood

joewood Jun 28, 2015

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.

joewood commented Jun 28, 2015

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

This comment has been minimized.

Show comment
Hide comment
@hugohua

hugohua Jun 29, 2015

@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>


hugohua commented Jun 29, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Jun 29, 2015

Contributor

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

Contributor

vjeux commented Jun 29, 2015

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

@jaygarcia

This comment has been minimized.

Show comment
Hide comment
@jaygarcia

jaygarcia Jun 29, 2015

Contributor

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.

Contributor

jaygarcia commented Jun 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@hugohua

hugohua Jun 29, 2015

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

hugohua commented Jun 29, 2015

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

@hugohua

This comment has been minimized.

Show comment
Hide comment
@hugohua

hugohua Jun 29, 2015

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

hugohua commented Jun 29, 2015

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

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Jun 29, 2015

Contributor

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?

Contributor

vjeux commented Jun 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@hugohua

hugohua Jun 29, 2015

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 commented Jun 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@hugohua

hugohua Jun 29, 2015

//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>
        )
    }       
})

hugohua commented Jun 29, 2015

//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

This comment has been minimized.

Show comment
Hide comment
@chandu0101

chandu0101 Aug 1, 2015

Contributor

👍

Contributor

chandu0101 commented Aug 1, 2015

👍

@chandu0101

This comment has been minimized.

Show comment
Hide comment
@chandu0101

chandu0101 Aug 7, 2015

Contributor

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

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

Contributor

chandu0101 commented Aug 7, 2015

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

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

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Aug 7, 2015

Contributor

Unlikely from our end, no one is working on it

Contributor

vjeux commented Aug 7, 2015

Unlikely from our end, no one is working on it

@browniefed

This comment has been minimized.

Show comment
Hide comment
@browniefed

browniefed Sep 13, 2015

Contributor

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.

Contributor

browniefed commented Sep 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Sep 13, 2015

Collaborator

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

Collaborator

brentvatne commented Sep 13, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Sep 14, 2015

Contributor

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

Contributor

vjeux commented Sep 14, 2015

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

@Anahkiasen

This comment has been minimized.

Show comment
Hide comment
@Anahkiasen

Anahkiasen Oct 18, 2015

👍 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

Anahkiasen commented Oct 18, 2015

👍 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

This comment has been minimized.

Show comment
Hide comment
@yuanyan

This comment has been minimized.

Show comment
Hide comment
@yuanyan

yuanyan Jan 14, 2016

Contributor

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

Contributor

yuanyan commented Jan 14, 2016

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

@bestander

This comment has been minimized.

Show comment
Hide comment
@bestander

bestander Mar 20, 2016

Contributor

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. :)

Contributor

bestander commented Mar 20, 2016

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. :)

@bestander bestander closed this Mar 20, 2016

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Mar 20, 2016

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.

necolas commented Mar 20, 2016

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

This comment has been minimized.

Show comment
Hide comment
@gregclermont

gregclermont Mar 20, 2016

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

gregclermont commented Mar 20, 2016

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

rozele pushed a commit to rozele/react-native that referenced this issue Apr 11, 2016

Merge pull request #233 from CatalystCode/Eero-dev
Fixes #182 - Adds Clipboard module.

@facebook facebook locked as resolved and limited conversation to collaborators Jul 23, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.