Keap Mobile & WatermelonDB

Keap Mobile seeks to help users separate their business and personal lives by providing a complete solution for managing contact interactions with a mobile app. It allows users to set up tasks, appointments, manage contacts, and even make calls or send text messages!

The mobile use-case requires the app to maintain an offline (on-device) storage solution so that users can continue to leverage its features even when they are in an area with poor cell coverage.

Think of the general contractor working on a house outside of town, or a realtor driving between houses trying to find the perfect home for their clients. A cell phone might not see sufficient data coverage to pull all of the necessary data from the web when users are on the go. Offline storage enables Keap customers to store data on-device, allowing them to manage their businesses when on the run.

The solution

The Keap mobile app leverages React Native so that it can be deployed on both Android & iOS with minimal native coding. Essentially, Keap engineers can write app components once and deploy them everywhere.

WatermelonDB (developed by Nozbe) is an open source, offline storage solution built for React Native that leverages SQLite & RxJS, making it a sturdy, fully observable and “lazy” solution.

Loading data in JS can be very expensive when you have a high volume of database records. Watermelon handles this by “lazy” loading data, or ONLY when it is requested, rather than all at once into the JS thread. This allows WatermelonDB to maintain fast startup times, and keeps the app performant while it is being used.

Watermelon’s use of RxJS allows all components to subscribe to changes in an efficient and declarative manner. RxJS observables store data in memory when queried for the UI to render, and Watermelon intelligently updates that data when writes are made to SQLite over the bridge. The result is a robust & speedy DB solution that crushes the competition.

Alternatives

Keap’s last solution

Previously, the mobile app’s offline storage was powered by RealmJS. Realm is a powerful database, built from scratch for mobile apps, however its port to the JS ecosystem comes with a performance caveat.

Realm is a synchronous solution. Writing records to the database actually prevents users from interacting with the app until the process completes. Each write must “wait its turn” before being delivered over the native bridge to Realm’s database. A large write count can mean that users are stuck waiting for a data sync to complete for several minutes before the app becomes usable.

WatermelonDB solves this problem by allowing users to write large batches of data over the native bridge asynchronously, so users can continue to use the app while data is written to the DB!

Other solutions

Keap Mobile investigated several other React Native storage solutions including

  • Async Storage
  • CouchDB
  • Firebase
  • SQLite (stock)

These are all powerful tools but they lack the flexibility of WatermelonDB. RxJS is powerful, WatermelonDB uses an adapter architecture (making it extensible), and the folks at Nozbe have built trust with their community by regularly deploying updates and actively working on issues reported to their GitHub.

Conclusion

WatermelonDB is a burgeoning offline storage solution for React Native that provides very intelligent solutions to the problems JS developers see in the mobile space, and remains extensible enough for users to bring their own solutions to the table.

Keap Mobile saw a 5x improvement when writing ten thousand records to mobile’s offline storage, and was able to continue writing records long after RealmJS writes timed out. It provides innovative new solutions to the React Native ecosystem through its use of RxJS, and is constantly being developed and improved by its open source community.

Overall it is an excellent option for React Native offline storage and sweeps away much of the competition. For more information please take a look at this GitHub, and don’t forget to give them a star if you find yourself enjoying WatermelonDB!

--

--

--

I came here to code and chew bubblegum.. and I’m all out of gum. https://www.npmjs.com/package/jared-rounsavall

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Testing with Jest

I am getting cheaper pricing for hosting from other providers. Why is your price high?

Share your React Component Library (Privately)

I am getting cheaper pricing for hosting from other providers. Why is your price high?

Improve Exchange Application Performance using Next.JS

https://youtube.com/channel/UCbLmG_7yjZalLcn5dVV5arA

How Netflix and Paypal did product transformation using Node.js?

apply() Method in JavaScript

image of javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jared Rounsavall

Jared Rounsavall

I came here to code and chew bubblegum.. and I’m all out of gum. https://www.npmjs.com/package/jared-rounsavall

More from Medium

React Native Development: How is it Different for Android and iOS?

Expo React Native: CI/CD Gitlab Integration

What makes React Native a great choice for mobile apps?

A 360-Degree Guide to Cost of Hiring Remote Node.js Developers