JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Watermelon Db

    🍉 High-performance reactive database for powerful React and React Native apps ⚡️
    Filed under 

    • 🔾70%Overall
    • 4,923
    • 5 hours
    • 🕩151
    • 👥6

    WatermelonDB

    High-performance reactive database framework

    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. Only load data when you need it
    Reactive API with RxJS
    📱 Multiplatform. 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
    ⚠️ Static typing 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 Native, and the number one goal is real-world performance. In simple words, your app must launch fast.

    For simple apps, using Redux or MobX with a persistence adapter is the easiest way to go. But when you start scaling to thousands or tens of thousands of database records, your app will now be slow to launch (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 since all querying is performed directly on the rock-solid SQLite database on a separate native thread, most queries resolve in an instant.

    But unlike using SQLite directly, Watermelon is fully observable. So whenever you change a record, all UI that depends on it will automatically re-render. For example, completing a task in a to-do app will re-render the task component, the list (to reorder), and all relevant task counters. Learn more.

    React Native EU: Next-generation React Databases WatermelonDB Demo

    📺 Next-generation React databases
    (a talk about WatermelonDB)

    Check out the Demo

    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 occurred 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 want to contribute, see Contributing guide for details about project setup, testing, etc. See good first issues. If you make a non-trivial contribution, email me, and I'll send you a nice 🍉 sticker!

    If you make or are considering making an app using WatermelonDB, please let us know!

    Author and license

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

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

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

    Show All