33

GitHub - Nozbe/WatermelonDB: ? Next-gen database for powerful React and React Na...

 4 years ago
source link: https://github.com/Nozbe/WatermelonDB
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

WatermelonDB

Next-generation React database

Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast

MIT License CI Status npm

WatermelonDB ⚡️ Launch your app instantly no matter how much data you have ? Highly scalable from hundreds to tens of thousands of records ? Lazy loaded everything. Only load data you need ✨ Reactive API with RxJS ? Supports iOS, Android, and the web ⚛️ Made for React. Easily plug data into components ⏱ Fast. Async. Multi-threaded. Highly cached. ? Relational. Built on rock-solid SQLite foundation ⚠️ Statically typed with Flow ? Offline-first. (Plug in your own sync engine)

Why Watermelon?

WatermelonDB is a new way of dealing with user data in React Native and React web apps.

It's optimized for building complex applications in React / React Native, and the number one goal is real-world performance. In simple words, your app must launch fast.

If you have a simple app, keep using Redux or MobX with a persistence adapter. But if you start scaling to thousands or tens of thousands of database records, you'll notice a big impact on how fast the app launches, especially on slower Android devices. Loading a full database into JavaScript is expensive!

Watermelon fixes it by being lazy. Nothing is loaded unless requested. And because all querying is performed directly on the rock-solid SQLite database on a separate thread, most queries resolve in less than 1ms, even with 10,000 records, even on slower Android devices!

Usage

Quick (over-simplified) example: an app with posts and comments.

First, you define Models:

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

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

Then, you connect components to the data:

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

// This is how you make your app reactive! ✨
const enhance = withObservables(['comment'], ({ comment }) => ({
  comment: comment.observe()
}))
const EnhancedComment = enhance(Comment)

And now you can render the whole Post:

const Post = ({ post, comments }) => (
  <View>
    <Text>{post.name}</Text>
    <Text>Comments:</Text>
    {comments.map(comment =>
      <Comment key={comment.id} comment={comment} />
    )}
  </View>
)

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

The result is fully reactive! Whenever a post or comment is added, changed, or removed, the right components will automatically re-render on screen. Doesn't matter if a change occured in a totally different part of the app, it all just works out of the box!

➡️Learn more: see full documentation

Contributing

If you have comments, complaints, or ideas for improvements, feel free to open an issue or a pull request! If you make an app using WatermelonDB, please contact us!

Author and license

WatermelonDB was created by @Nozbe. Main author and maintainer is Radek Pietruszewski.

Contributors: @mobily, @kokusGr, @rozPierog, @rkrajewski, @domeknn, @Tereszkiewicz.

WatermelonDB is available under the MIT license. See the LICENSE file for more info.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK