Реактивный фреймворк для работы с базами данных

Создайте мощные приложения на React и React Native, которые масштабируются от сотен до десятков тысяч записей и остаются быстрыми ⚡️

WatermelonDB — это новый способ работы с данными пользователей в приложениях на React Native и веб-приложениях на React.

Он оптимизирован для создания сложных приложений на React Native, а основная цель — реальная производительность. Проще говоря, ваше приложение должно запускаться быстро.

Для простых приложений использование Redux или MobX с адаптером для хранения данных является самым простым решением. Но когда вы начинаете масштабировать до тысяч или десятков тысяч записей в базе данных, ваше приложение будет медленно запускаться (особенно на более медленных устройствах Android). Загрузка полной базы данных в JavaScript дорогостоящая операция! Арбуз решает эту проблему путем ленивости. Ничего не загружается до тех пор, пока это не будет запрошено. И поскольку все запросы выполняются непосредственно в надежной базе данных SQLite на отдельном нативном потоке, большинство запросов разрешаются мгновенно.

Но в отличие от использования SQLite напрямую, Арбуз является полностью наблюдаемым. Поэтому каждый раз, когда вы изменяете запись, все пользовательский интерфейс, зависящий от него, автоматически перерисовывается. Например, завершение задачи в приложении "Сделай это" приведет к перерисовке компонента задачи, списка (для переупорядочивания) и всех связанных счетчиков задач. Узнать больше.| | | ---- | |

📺 Следующее поколение React баз данных
(лектура о WatermelonDB)

Использование

Быстрый (надуманный) пример: приложение с постами и комментариями.

Сначала вы определяете модели:

class Post extends Model {
  @field('name') name
  @field('body') body
  @children('comments') comments
}

class Comment extends Model {
  @field('body') body
  @field('author') author
}

Затем вы подключаете компоненты к данным:

const Comment = ({ comment }) => (
  <View style={styles.commentBox}>
    <Text>{comment.body} — by {comment.author}</Text>
  </View>
)

// Вот как вы делаете свое приложение реактивным! ✨
const enhance = withObservables(['comment'], ({ comment }) => ({
  comment,
}))
const EnhancedComment = enhance(Comment)

И теперь вы можете рендерить весь пост:

const Post = ({ post, comments }) => (
  <View>
    <Text>{post.name}</Text>
    <Text>Комментарии:</Text>
    {comments.map(comment =>
      <EnhancedComment key={comment.id} comment={comment} />
    )}
  </View>
)

const enhance = withObservables(['post'], ({ post }) => ({
  post,
  comments: post.comments
}))

Результат полностью реактивен! Каждый раз, когда добавляется, изменяется или удаляется пост или комментарий, соответствующие компоненты автоматически перерисовываются на экране. Не важно, если изменения произошли в совершенно другой части приложения, все работает из коробки!

➡️ Узнать больше: полная документация## Кто использует WatermelonDB

Используете ли вы 🍉 в вашей компании или приложении? Откройте pull request и добавьте свой логотип/иконку с ссылкой здесь!

Вклад

WatermelonDB — это проект с открытым исходным кодом, и он нуждается в вашей помощи, чтобы развиваться!

Если вам не хватает какой-либо функции, вы нашли ошибку или хотите улучшений, мы настоятельно рекомендуем вам внести свой вклад! Вы можете открыть issue, чтобы получить некоторое руководство, и посмотреть руководство по вкладу для получения подробной информации о настройке проекта, тестировании и т.д.

Если вы только начинаете, посмотрите простые задачи для новичков, которые легко выполнить. Если вы сделали значительный вклад, напишите мне, и я отправлю вам приятный 🍉 стикер!

Если вы создали или планируете создать приложение с использованием WatermelonDB, пожалуйста, сообщите нам об этом!

Автор и лицензия

WatermelonDB был создан @Nozbe.

WatermelonDB's основным автором и поддерживателем является Radek Pietruszewski (сайт ⋅ 𝕏 (Twitter)).Просмотреть всех участников.

WatermelonDB распространяется под лицензией MIT. Подробную информацию см. файл LICENSE.