|
1 | 1 | # React Native Replicache |
2 | 2 |
|
3 | | -Plug-in React Native compatibility bindings for Replicache. |
| 3 | +> Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/). |
4 | 4 |
|
5 | | -https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov |
| 5 | +<https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov> |
6 | 6 |
|
7 | 7 | ## Why is this needed? |
8 | 8 |
|
9 | | -By default, Replicache uses IndexedDB in the web-browser. This technology isn't available in React Native, but luckily Replicache is generic enough to allow us to provide our own local persistance provider. |
| 9 | +Replicache enables us to build applications that are performant, offline-capable and collaborative. By default, it uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) for client-side persistance. Unfortunately, this technology is not available in React Native and is only supported in web-browsers. |
10 | 10 |
|
11 | | -## What's the strategy? |
| 11 | +Thankfully, Replicache allows us to provide our own transactional data-store via [`experimentalCreateKVStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#experimentalcreatekvstore). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native. |
12 | 12 |
|
13 | | -Currently, the strategy is to provide an implementation of Replicache's `ExperimentalCreateKVStore` backed by [`react-native-quick-sqlite`](https://github.com/ospfranco/react-native-quick-sqlite) or [`expo-sqlite`](https://docs.expo.dev/versions/latest/sdk/sqlite/#sqltransaction). |
| 13 | +## What are the strategies? |
14 | 14 |
|
15 | | -Additionally, some configuration is required to received poke events from the server. |
| 15 | +React Native has relatively good support for SQLite - which provides the [strict serializable](https://jepsen.io/consistency/models/strict-serializable) transactions that we require. |
| 16 | + |
| 17 | +In particular, we provide the choice between two SQLite bindings: |
| 18 | + |
| 19 | +1. [`@react-native-replicache/react-native-expo-sqlite`](https://github.com/Braden1996/react-native-replicache/tree/master/packages/react-native-expo-sqlite) |
| 20 | + - Backed by [`expo-sqlite`](https://docs.expo.dev/versions/latest/sdk/sqlite/) |
| 21 | + - Supported in [Expo Go](https://expo.dev/client). |
| 22 | +2. [`@react-native-replicache/react-native-quick-sqlite`](https://github.com/Braden1996/react-native-replicache/tree/master/packages/react-native-quick-sqlite) |
| 23 | + - Backed by [`react-native-quick-sqlite`](https://github.com/ospfranco/react-native-quick-sqlite) |
| 24 | + - Better performance. |
| 25 | + |
| 26 | +### Any additional considerations? |
| 27 | + |
| 28 | +Some configuration is required to receive [poke](https://doc.replicache.dev/byob/poke) events from the server. In our example, [seen here](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts), we use a polyfill for Server Sent Events. These aren't built into React Native, but are really handy for a demo. |
| 29 | + |
| 30 | +You most likely want to use web-sockets for this. This is relatively trivial with Pusher/Ably etc and similar to the web-app so we won't discuss that further here. |
16 | 31 |
|
17 | 32 | ## How can I install this? |
18 | 33 |
|
19 | 34 | 1. Install the following in your React Native project: |
20 | | - - `yarn add @react-native-replicache/react-native-quick-sqlite react-native-quick-sqlite expo-crypto` |
21 | | - - or |
22 | | - - `yarn add @react-native-replicache/react-native-expo-sqlite expo-sqlite expo-crypto` |
| 35 | + - `yarn add expo-crypto` |
| 36 | + - Decide which SQLite binding is for you and install one of the following: |
| 37 | + - `yarn add react-native-quick-sqlite @react-native-replicache/react-native-quick-sqlite` |
| 38 | + - `yarn add expo-sqlite @react-native-replicache/expo-sqlite` |
23 | 39 | 2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace. |
24 | | - - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts). |
25 | | -3. Pass `createReplicacheReactNativeQuickSQLiteExperimentalCreateKVStore` or `createReplicacheReactNativeExpoSQLiteExperimentalCreateKVStore` into Replicache's `experimentalCreateKVStore` option. |
26 | | - - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts). |
27 | | - |
28 | | -## What else will I need to do? |
29 | | - |
30 | | -- Configure a poke mechanism. |
31 | | - - You will likely want to use web-sockets for this, managed via Pusher/Ably/etc |
32 | | - - In our example, [seen here](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts), we use a polyfill for Server Sent Events. |
33 | | - - These aren't built into React Native, but are really handy for a demo. |
| 40 | + - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts). |
| 41 | +3. Pass in your chosen SQLite binding's React Native Replicache binding into Replicache's `experimentalCreateKVStore` option. |
| 42 | + - This will be one of the following, depending on the binding you chose: |
| 43 | + - `createReplicacheQuickSQLiteExperimentalCreateKVStore` |
| 44 | + - `createReplicacheExpoSQLiteExperimentalCreateKVStore` |
| 45 | + - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts). |
34 | 46 |
|
35 | 47 | ## How can I experiment with this locally? |
36 | 48 |
|
37 | | -### Prerequisites: |
| 49 | +### Prerequisites |
38 | 50 |
|
39 | 51 | - Environment capable of developing iOS/Android applications (iOS is likely preferred). |
40 | | - - See https://dev-yakuza.posstree.com/en/react-native/install-on-mac/ |
41 | | - - or: https://reactnative.dev/docs/environment-setup |
42 | | - - Note: Installing [Xcode](https://developer.apple.com/xcode/) from the [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835?mt=12) tends to be unusually slow and buggy. |
43 | | - - Try the `Download -> Website` approach instead, [found here](https://developer.apple.com/xcode/). |
| 52 | + - See [How to install React Native on Mac](https://dev-yakuza.posstree.com/en/react-native/install-on-mac/) |
| 53 | + - or: [Setting up the development environment](https://reactnative.dev/docs/environment-setup) |
| 54 | + - Note: Installing [Xcode](https://developer.apple.com/xcode/) from the [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835?mt=12) tends to be unusually slow and buggy. |
| 55 | + - Try download it from the [Apple website](https://developer.apple.com/xcode/) instead. |
| 56 | + |
| 57 | +### Instructions |
44 | 58 |
|
45 | 59 | 1. Clone the repository: `git clone https://github.com/braden1996/react-native-replicache.git` |
46 | 60 | 2. Install yarn dependencies from repo root: `yarn install` |
|
0 commit comments