# Realm JavaScript v11: A Step Forward for React Native — Hermes Support, Realm React, Flipper, and Much More

After over a year of effort by the Realm JavaScript team, today, we are pleased to announce the release of Realm JavaScript version 11 — a complete re-imagining of the SDK and its APIs to be more idiomatic for React Native and JavaScript developers everywhere. With this release, we have built underlying support for the new Hermes JS engine, now becoming the standard for React Native applications everywhere. We have also introduced a new library for React developers, making integration with components, hooks, and context a breeze. We have built a Flipper plugin that makes inspecting, querying, and modifying a Realm within a React Native app incredibly fast. And finally, we have transitioned to a class-based schema definition to make creating your data model as intuitive as defining classes.

Realm is a simple, fast, object-oriented database for mobile applications that does not require an ORM layer or any glue code to work with your data layer and is built from the ground up to work cross-platform, making React Native a natural fit. With Realm, working with your data is as simple as interacting with objects from your data model. Any updates to the underlying data store will automatically update your objects as soon as the state on disk has changed, enabling you to automatically refresh the view via React components, hooks, and context.

Finally, Realm JavaScript comes with built-in synchronization to MongoDB Atlas — a cloud-managed database-as-a-service for MongoDB. The developer does not need to write any networking or conflict resolution code. All data transfer is done under the hood, abstracting thousands of lines of code away from the developer, and enabling them to build reactive mobile apps that can trigger UI updates automatically from server-side state changes. This delivers a performant and offline-tolerant mobile app because it always renders the state from disk.

> **Build better mobile apps with Atlas Device Sync**: Atlas Device Sync is a fully-managed mobile backend-as-a-service. Leverage out-of-the-box infrastructure, data synchronization capabilities, built-in network handling, and much more to quickly launch enterprise-grade mobile apps. Get started now by build: Deploy Sample for Free!

## Introduction 
React Native has been a windfall for JavaScript developers everywhere by enabling them to write one code-base and deploy to multiple mobile targets — mainly iOS and Android — saving time and cost associated with maintaining multiple code bases. The React Native project has moved aggressively in the past years to solve mobile centric problems such as introducing a new JavaScript engine, Hermes, to solve the cold start problem and increase performance across the board. It has also introduced Fabric and TurboModules, which are projects designed to aid embedded libraries, such as Realm, which at its core is written in C++, to link into the JavaScript context. We believe these new developments from React Native are a great step forward for mobile developers and we have worked closely with the team to align our library to these new developments. 

## What is Realm?
The Realm JavaScript SDK is built on three core concepts:
* An object database that infers the schema from the developers’ class structure, making working with objects as easy as interacting with objects in code. No conversion code or ORM necessary.
* Live objects, where the object reference updates as soon as the state changes and the UI refreshes — all built on top of Realm’s React library — enabling easy-to-use context, hooks, and components.
* A columnar store where query results return immediately and integrate with an idiomatic query language that developers are familiar with.

Realm is a fast, easy-to-use alternative to SQLite, that comes with a real-time edge to cloud sync solution out of the box. Written from the ground up in C++, it's not a wrapper around SQLite or any other relational data store and is designed with the mobile environment in mind. It's lightweight and optimizes for constraints like compute, memory, bandwidth, and battery that do not exist on the server side. Realm uses lazy loading and memory mapping. with each object reference pointing directly to the location on disk where the state is stored. This exponentially increases lookup and query speed as it eliminates the loading of state pages from disk into memory to perform calculations. It also reduces the amount of memory pressure on the device while working with the data layer. Realm makes it easy to store, query, and sync your mobile data across a plethora of devices and the back end.

## Realm for Javascript developers
When Realm JavaScript was first implemented back in 2016, the only JavaScript engine available in React Native was JavaScript Core, which did not expose a way for embedded libraries such as Realm to integrate with. Since then, React Native has expanded their API to give developers the tools they need to work with third-party libraries directly in their mobile application code — most notably, the new Hermes JavaScript engine for React Native apps. After almost a year of effort, Realm JavaScript now runs through the JavaScript Interface (JSI), allowing us to support JavaScriptCore and, most importantly, Hermes — facilitating an exponentially faster app boot time and an intuitive debugging experience with Flipper.

The Realm React library eliminates an incredible amount of boilerplate code that a developer would normally write in order to funnel data from the state store to the UI. With this library, Realm is directly integrated with React and comes with built-in hooks for accessing the query, write, and sync APIs. Previously, React Native developers would need to write this boilerplate themselves. By leveraging the new APIs from our React library, developers can save time and reduce bugs by leaving the Realm centric code to us. We have also added the ability for Realm’s objects to be React component aware, ensuring that re-renders are as efficient as possible in the component tree and freeing the developer from needing to write their own notification code. Lastly, we have harmonized Realm query results and lists with React Native ListView components, ensuring that individual items in lists re-render when they change — enabling a slick user experience.

At its core, Realm has always endeavored to make working with the data layer as easy as working with language native objects, which is why your local database schema is inferred from your object definitions. In Realm JavaScript v11, we have now extended our existing functionality to fully support class based objects in JavaScript, aligning with users’ expectations of being able to call a constructor of a class-based model when wanting to create or add a new object. On top of this, we have done this not only in JavaScript but also with Typescript models, allowing developers to declare their types directly in the class definition, cutting out a massive amount of boilerplate code that a developer would need to write and removing a source of bugs while delivering type safety. 

```
///////////////////////////////////////////////////
// File: task.ts
///////////////////////////////////////////////////
// Properties:
// - _id: primary key, create a new value (objectId) when constructing a `Task` object
// - description: a non-optional string
// - isComplete: boolean, default value is false; the properties is indexed in the database to speed-up queries
export class Task extends Realm.Object {
  _id = new Realm.BSON.ObjectId();
  description!: string;
  @index
  isComplete = false;
  createdAt!: Date = () => new Date();
  userId!: string;
  
  static primaryKey = "_id";
  
  constructor(realm, description: string, userId: string) {
    super(realm, { description, userId });
  }
}

export const TaskRealmContext = createRealmContext({
  schema: [Task],
});

///////////////////////////////////////////////////
// File: index.ts
///////////////////////////////////////////////////
const App = () => " />;

AppRegistry.registerComponent(appName, () => App);

///////////////////////////////////////////////////
// File: appwrapper.tsx
///////////////////////////////////////////////////
export const AppWrapper: React.FC<{
  appId: string;
}> = ({appId}) => {
  const {RealmProvider} = TaskRealmContext;

  return (
    
      
        
          
            
          
        
      
    
  );
};

///////////////////////////////////////////////////
// File: app.tsx
///////////////////////////////////////////////////
function TaskApp() {
  const app = useApp();
  const realm = useRealm();
  const [newDescription, setNewDescription] = useState("")

  const results = useQuery(Task);
  const tasks = useMemo(() => result.sorted('createdAt'), [result]);

  useEffect(() => {
    realm.subscriptions.update(mutableSubs => {
      mutableSubs.add(realm.objects(Task));
    });
  }, [realm, result]);

  return (
    
      
        
         {
            realm.write(() => {
              new Task(realm, newDescription, app.currentUser.id);
            });
            setNewDescription("")
          }}>➕
      
       item._id.toHexString()} renderItem={({ item }) => {
        return (
          
            
                realm.write(() => {
                  item.isComplete = !item.isComplete
                })
              }>{item.isComplete ? "✅" : "☑️"}
            {item.description}
             {
                realm.write(() => {
                  realm.delete(item)
                })
              }} >{"🗑️"}
          
        );
      }} >
    
  );
}
```

## Looking ahead

The Realm JavaScript SDK is free, open source, and available for you to try out today. It can be used as an open-source local-only database for mobile apps or can be used to synchronize data to MongoDB Atlas with a generous free tier. The Realm JavaScript team is not done. As we look to the coming year, we will continue to refine our APIs to eliminate more boilerplate and do the heavy lifting for our users especially as it pertains to React 18, hook easily into developer tools like Expo, and explore expanding into other platforms such as web or Electron.  

Give it a try today and let us know what you think! Try out our tutorial, read our docs, and follow our repo.