3 ms·

I am wrong to wonder why this doesn't run in a browser, or does it? I was under the impression React uses the browser DOM (or virtual DOM of course) to render

by cubano 8y ago

I am wrong to wonder why this doesn't run in a browser, or does it? I was under the impression React uses the browser DOM (or virtual DOM of course) to render its components...wouldn't that mean it can run on the desktop in a browser?

blacksoil 8y ago
I'm not exactly sure either, but if I understand correctly, react native is actually not running under web view, hence called "react native"?
- tendencydriven 8y ago
  You are correct, it interacts directly with native components - it doesn't render in a webview.
awinograd 8y ago
This project is using React Native which is slightly different from ReactDOM (commonly referred to as just React/ReactJS). In the past, ReactJS and ReactDOM were completely interchangeable. However, some time ago now React split the DOM specific parts of the library into ReactDOM which allowed the non-DOM specific parts of the library to be shared more easily across different rendering targets. Some examples: * android (via react-native) * ios (via react-native) * canvas https://github.com/Flipboard/react-canvas Since the release of React Native there have been a couple of interesting projects that allow developers to use the same APIs as React Native, but rendering to the DOM instead of android/ios native views. https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web is a great production ready lib but requires a bit of setup to get it working with a react-native project. https://github.com/vincentriemer/react-native-dom https://github.com/vincentriemer/react-native-dom is an extremely cool experimental idea to bring react native projects more seamlessly onto the web. It's still in early stages and has some significant tradeoffs compared to react-native-web. For one, it includes a webassembly implementation of Yoga (https://yogalayout.com/ https://yogalayout.com/) which makes layout much more consistent among ios/android/web but at the cost of delivering more JS upfront to the browser.
- johnmarinelli 8y ago
  another cool custom renderer using React is this: https://github.com/toxicFork/react-three-renderer-fiber https://github.com/toxicFork/react-three-renderer-fiber it wraps the React API over three.js. Unfortunately it's a very wip-ish state, but I think it has a lot of potential.
giantsloth 8y ago
You can just imagine that the function that would normally generate DOM elements with something like document.creatElement(‘div’), has been replaced with boundObjectiveCCreateNativeUIView() ... there is no platform check for the browser, so in the render step it will create native UIViews or whatever Androids native View primitive is.
Cthulhu_ 8y ago
It runs JS in the target platform's JS engine (iirc in a background thread) and renders the UI using the target platform's components. This gives it the flexibility and development speed of a webapp, but the UI performance of a native app. In theory anyway. Compare also with Flutter [0], a new competing application development stack from Google with a similar architecture (= components all the way down) and development experience (= live reloads), but which will in production compile everything to native (instead of interpreting JS). [0] https://flutter.io/ https://flutter.io/

by cubano 8y ago

blacksoil 8y ago

I'm not exactly sure either, but if I understand correctly, react native is actually not running under web view, hence called "react native"?

tendencydriven 8y ago
You are correct, it interacts directly with native components - it doesn't render in a webview.

awinograd 8y ago

This project is using React Native which is slightly different from ReactDOM (commonly referred to as just React/ReactJS). In the past, ReactJS and ReactDOM were completely interchangeable. However, some time ago now React split the DOM specific parts of the library into ReactDOM which allowed the non-DOM specific parts of the library to be shared more easily across different rendering targets. Some examples: * android (via react-native) * ios (via react-native) * canvas https://github.com/Flipboard/react-canvas Since the release of React Native there have been a couple of interesting projects that allow developers to use the same APIs as React Native, but rendering to the DOM instead of android/ios native views. https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web is a great production ready lib but requires a bit of setup to get it working with a react-native project. https://github.com/vincentriemer/react-native-dom https://github.com/vincentriemer/react-native-dom is an extremely cool experimental idea to bring react native projects more seamlessly onto the web. It's still in early stages and has some significant tradeoffs compared to react-native-web. For one, it includes a webassembly implementation of Yoga (https://yogalayout.com/ https://yogalayout.com/) which makes layout much more consistent among ios/android/web but at the cost of delivering more JS upfront to the browser.

johnmarinelli 8y ago
another cool custom renderer using React is this: https://github.com/toxicFork/react-three-renderer-fiber https://github.com/toxicFork/react-three-renderer-fiber it wraps the React API over three.js. Unfortunately it's a very wip-ish state, but I think it has a lot of potential.

giantsloth 8y ago

You can just imagine that the function that would normally generate DOM elements with something like document.creatElement(‘div’), has been replaced with boundObjectiveCCreateNativeUIView() ... there is no platform check for the browser, so in the render step it will create native UIViews or whatever Androids native View primitive is.

Cthulhu_ 8y ago

It runs JS in the target platform's JS engine (iirc in a background thread) and renders the UI using the target platform's components. This gives it the flexibility and development speed of a webapp, but the UI performance of a native app. In theory anyway. Compare also with Flutter [0], a new competing application development stack from Google with a similar architecture (= components all the way down) and development experience (= live reloads), but which will in production compile everything to native (instead of interpreting JS). [0] https://flutter.io/ https://flutter.io/