πŸ‰ Next-gen database for powerful React and React Native apps that scales to 10,000s of records and remains fast ⚑️
radex Merge pull request #90 from Nozbe/greenkeeper/flow-bin-0.83.0
chore(package): update flow-bin to version 0.83.0
Latest commit d7e7efb Oct 14, 2018
Permalink
Failed to load latest commit information.
.github Create stale.yml Sep 21, 2018
assets [ImgBot] optimizes images Sep 21, 2018
babel Change babel plugins to stubs (as to not break people's apps) Sep 21, 2018
docs Fix missed bool β†’ boolean Oct 10, 2018
examples Merge branch 'migration-testing' into schema-column-boolean Oct 10, 2018
flow-typed rename file Oct 12, 2018
native Merge branch 'android-schema-on-demand' into migration-testing Oct 12, 2018
scripts Update peril file Oct 12, 2018
src Merge branch 'migration-testing' into schema-column-boolean Oct 11, 2018
.eslintignore Add `development` mode Aug 30, 2018
.eslintrc.yml Merge branch 'master' into migrations-execution Oct 12, 2018
.flowconfig Update flowconfig Oct 12, 2018
.gitattributes Add test Pods Sep 8, 2018
.gitignore Add `development` mode Aug 30, 2018
.prettierrc Add initial commit Aug 30, 2018
.travis.yml [Travis] removed every android besides api24 Oct 12, 2018
CHANGELOG.md Merge pull request #90 from Nozbe/greenkeeper/flow-bin-0.83.0 Oct 14, 2018
CONTRIBUTING.md Update CONTRIBUTING.md Sep 18, 2018
LICENSE Add initial commit Aug 30, 2018
README.md Update README.md Sep 19, 2018
babel.config.js Always convert modules to CJS Sep 21, 2018
greenkeeper.json Update greenkeeper.json Sep 14, 2018
jest.config.js Simplify eslint, flow, jest, babel configs Sep 21, 2018
package.json chore(package): update flow-bin to version 0.83.0 Oct 11, 2018
rn-cli.config.js [rn-cli.config] changes for rn 0.57 Sep 17, 2018
rn-transformer.js IT RUNS Sep 8, 2018
yarn.lock Update rambdax types Oct 12, 2018

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 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 todo app will re-render the task component, the list (to reorder), and all relevant task counters.

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 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! See Contributing guide for details about project setup, testing, etc.

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.