https://github.com/cawfree/react-native-elsewhere
Ridiculously simple React Native thread unblocking.
https://github.com/cawfree/react-native-elsewhere
background lokijs performance react react-native task thread threading
Last synced: 9 months ago
JSON representation
Ridiculously simple React Native thread unblocking.
- Host: GitHub
- URL: https://github.com/cawfree/react-native-elsewhere
- Owner: cawfree
- License: mit
- Created: 2019-05-21T21:34:18.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T22:20:19.000Z (over 3 years ago)
- Last Synced: 2025-03-22T04:31:51.882Z (over 1 year ago)
- Topics: background, lokijs, performance, react, react-native, task, thread, threading
- Language: JavaScript
- Homepage:
- Size: 2 MB
- Stars: 15
- Watchers: 1
- Forks: 3
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚨 Deprecation Notice
The `` component relies upon the `toString()` method to delegate native functions to a ``, which is [not possible to achieve in conjunction with the Hermes engine](https://github.com/facebook/hermes/issues/114).
Developers are urged to migrate into [nodejs-mobile-react-native-bridge](https://github.com/cawfree/nodejs-mobile-react-native-bridge).
# react-native-elsewhere
Ridiculously simple React Native thread unblocking.
## 🚀 Getting Started
Using [npm](https://www.npmjs.com/package/@cawfree/react-native-elsewhere):
```shell
npm install --save @cawfree/react-native-elsewhere
```
Using [yarn](https://www.npmjs.com/package/@cawfree/react-native-elsewhere):
```shell
yarn add @cawfree/react-native-elsewhere
```
Yeah, no linking. 👍
## ⚙ How does it work?
By delegating stateless JavaScript computation to a [``](https://facebook.github.io/react-native/docs/webview), your app can maintain responsive whilst you crunch through heavy computation in the background.
```javascript
import React, {Component} from 'react';
import {WebView, Button, Platform, StyleSheet, Text, View, Alert} from 'react-native';
import Elsewhere from '@cawfree/react-native-elsewhere';
// https://gist.github.com/sqren/5083d73f184acae0c5b7
function doSomethingIntense(postMessage, { source }) {
const now = new Date();
let result = 0;
for (var i = Math.pow(10, 7); i >= 0; i--) {
result += Math.atan(i) * Math.tan(i);
};
postMessage({
source,
result,
dt: new Date().getTime() - now.getTime(),
});
}
type Props = {};
export default class App extends Component {
state = {
postMessage: () => null,
}
render() {
const {
postMessage,
} = this.state;
return (
Alert.alert(JSON.stringify(data))}
onPostMessage={(postMessage) => {
this.setState({
postMessage,
});
}}
/>
Welcome to React Native!
To get started, open the debug menu and enable the performance monitor so we can watch the JS frame rate.
It should read a steady 60fps. ⏰
{'🤓'}
Tap the Button below to watch your frame rate plummet! 📉
doSomethingIntense(
(data) => Alert.alert(JSON.stringify(data)),
{ source: 'ui' },
)}
/>
Intense, right? Now run the exact same operation inside of an Elsewhere. 📈
postMessage(
{ source: 'web' },
)}
/>
See how the frame rate stays at 60? Magic. 🔮
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
button: {
marginBottom: 15,
}
});
```
## 💾 Persistence
Using the `scripts` prop, it is possible to define an array of urls that you'd like to import as ``s within your JavaScript logic. Some scripts you call to may rely on localStorage for persistence between launches of your application; however for this to work successfully, your `engine` will need to be serialized to a file location so that thr browser can associate stored data with a given file `uri`.
This can be achieved using the following, which uses [`react-native-fs`](https://github.com/itinance/react-native-fs) as the file I/O utility.
```javascript
import React from 'react';
import Elsewhere from '@cawfree/react-native-elsewhere';
import fs from 'react-native-fs';
// XXX: Declare a uri where we'd like to store the evaluated
// engine on the device file system.
const uri = `${fs.CachesDirectoryPath}/elsewhere.html`;
export default class Persisted extends React.Component {
render() {
return (
{
// XXX: You must return a Promise, which when reslved guarantees
// that the engine html has been saved to the requested uri.
return fs.writeFile(
url,
html,
);
}}
/>
);
}
}
```
## ✌️ License
[MIT](https://opensource.org/licenses/MIT)
