Frond End Storage

目前使用過的 Frond End Storage

Realm

討論

使用的是比較早期

會有很多問題

併發造成的問題最多

後來就停止使用

Watermelon

後來寫聊天軟體使用 Watermelon

但是遇到最嚴重的是 sort 和 page 的問題

Native support for sorting

所以犧牲了一些效能

因為聊天會有大量的 message 溝通問題

所以做了很多處理來避免

RXDB

這次會來使用這一套處理前端的 Database

Initial React Native

  $ yarn add rxjs @babel/polyfill pouchdb-adapter-react-native-sqlite pouchdb-adapter-http react-native-sqlite-2 base-64 events

initialRxdb.js

import { decode, encode } from 'base-64'

if (!global.btoa) {
  global.btoa = encode
}

if (!global.atob) {
  global.atob = decode
}

// Avoid using node dependent modules
process.browser = true

database.js

import { addRxPlugin, createRxDatabase } from 'rxdb'
import SQLite from 'react-native-sqlite-2'
import SQLiteAdapterFactory from 'pouchdb-adapter-react-native-sqlite'

const initialDatabase = async () => {
  const SQLiteAdapter = SQLiteAdapterFactory(SQLite)

  addRxPlugin(SQLiteAdapter)
  addRxPlugin(require('pouchdb-adapter-http'))

  const database = await createRxDatabase({
    name: 'mydatabase',
    multiInstance: false,
    adapter: 'react-native-sqlite',
  });
  return database;
}

使用 event-reduce 來做觀察者的優化

Schema

const schema = {
  title: "example schema",
  version: 0,
  description: "hello description",
  type: "object",
  properties: {
    name: {
      type: "string",
      primary: true,
    },
    children: {
      type: "array",
      maxItems: 5,
      uniqueItems: true,
      items: {
        type: "object",
        properties: {
          name: { type: "string" },
          age: { type: "number" }
        }
      }
    },
    indexes: [
      "name"
    ],
    required: ["name"],
  }
};

Create and Get Record

initialDatabase()
  .then((database) => {

    return database.mydatabase.insert({
      name: "tomas2",
      children: [{
        name: "Simon2",
        age: 3
      }, {
        name: "Roy2",
        age: 5
      }]
    }).then(rs => {
      console.log('rs', rs)
      return database.mydatabase.find().exec()
    }).then(result => {
      console.log('result', result)
    });
  }).catch(error => {
    console.log('initialDatabase -> error', error)
  });

參考資源

針對多個 tab 瀏覽器的頁面處理
Leader-Election

rxjs-Observable

event-reduce

event-reduce demo

rxdb schema