Code Sharing between React-Native and Web SDK?

MongoDB Atlas App Services & Realm
, ,
1

Hi there,
i want to build a native mobile app for iOS and Android with React Native and a webapp, using web frameworks like React, Vue or Svelte. On the MongoDB Realm docs i readed this:

The React Native SDK does not support JavaScript or TypeScript applications written for web browsers. For that use case, you should consider the Web SDK.

Even though I seem to need to use both SDKs, is there any way to share the code between the mobile and web app so I don’t have to implement the feature twice? I imagine it like this:

//lib/auth.ts

if (platform.isWeb) {
   import * as Realm from "realm-web";
} else {
   import Realm from "realm"; //for react-native
}

export async function loginAnonymous() {
  // Create an anonymous credential
  const credentials = Realm.Credentials.anonymous();
  try {
    // Authenticate the user
    const user: Realm.User = await app.logIn(credentials);
    // `App.currentUser` updates to match the logged in user
    assert(user.id === app.currentUser.id)
    return user
  } catch(err) {
    console.error("Failed to log in", err);
  }
}

and then i can use only this one function in my web and mobile app like this:

import { loginAnonymous } from './lib/auth.ts'

loginAnonymous().then(user => {
  console.log("Successfully logged in!", user)
})

As it seems, the functions of both SDKs are pretty much identical, right? Would such an approach work?

I would be very happy about feedback or suggestions for improvement

2

I have the same problem, and no, it is not currently possible to share code between both platforms, but they do support electron.

I’m currently working on porting realm-js to web via webassembly as a side project for the weekends. I’ve made good progress so far, but there are many things to consider and it’s not even sure they’ll accept my PR in the future.

I’ll probably just do a desktop version until my port is ready or until they unify the APIs.

1 Like
3

@Maxence_Henneron thanks for your answer, could you explain it a little bit more? Why can’t share the code between both platforms? Do the SDKs work completely differently under the hood? superficially, the same functions are used, so from the name…

why can’t i make the imports platform specific? React Native doesn’t do anything different in principle. You have a function, a component, which is then converted for the target platform. Can’t the same principle be applied here?

glad to hear you want to port realm to the web. Is there anywhere I can see how far along you are, or to what extent it can be used?

4

First I want to mention that I am not a mongoDB/Realm employee.

The web sdk and electron/react-native SDK do not work the same because Realm is a database engine written in C++ that is compiled and executed natively on the machine. When you use react-native, it will call the native C++ code from react native, same goes with electron on a desktop.
MongoDB Realm Sync will then sync the local database with a remote MongoDB atlas instance. Which means each client has its own local database that automatically gets sync to a remote MongoDB database.

On the other hand, the web SDK is just a bridge to the hosted mongodb atlas database, and the query language is completely different so you’ll actually need to use MongoDB queries instead of Realm queries.

What I’m trying to achieve is actually compiling the Realm engine in webassembly so the database can run in the browser and then sync over websocket.

This is a large effort that I started last weekend but will likely create a fork once I have something that at least runs.

The app I’m currently working on will have to use Electron until I can get it to run in the browser.

I hope that makes sense!

1 Like