Skip to content

Introduction

@nhtio/web-re-active-record is an ORM built with the active record pattern, but specifically designed for web browsers and web workers! This makes performing CRUD operations and managing relationships between models intuitive and effortless. The re in re-active-record also emphasizes reactivity, a programming paradigm allowing your application to respond to changes declaratively and automatically.

Understanding ORM and the Active Record Pattern

ORM stands for Object Relational Mapping, a technique that translates the structure of your database tables into objects within your code. Each database table maps to a class, and each row in the table becomes an instance of that class.

Active Record, popularized by Ruby on Rails, encapsulates database interactions into objects or classes, providing a clear, straightforward approach to data management.

General Note

When mentioning active record, we refer to the pattern itself, not the specific Ruby on Rails implementation.

What is Reactivity?

In @nhtio/web-re-active-record, reactivity ensures you always have access to the latest state of a model instance and lets you subscribe to updates effortlessly without additional database queries.

Cross-Context Reactivity

Part of a good user experience is maintaining synchronized application states across multiple browser contexts, such as multiple tabs or web workers. @nhtio/web-re-active-record's ReActive Models automatically handle this synchronization behind the scenes, ensuring model instances consistently reflect the latest state regardless of their context.

Relationships and IndexedDB

A crucial feature of ORMs is their ability to manage relationships between different models seamlessly. While IndexedDB itself does not inherently support relational data management, @nhtio/web-re-active-record fills this gap. It offers robust support for defining and maintaining model relationships directly within IndexedDB, ensuring related model instances remain reactive and synchronized with their hosts.

But why?

Modern web applications demand efficient, real-time state management and persistent data storage. Relying exclusively on server-side databases introduces several challenges:

  • Increased Costs: Hosting and operating remote databases raises expenses.
  • Latency and Reliability: Network requests can introduce delays and downtime, impacting application responsiveness.
  • Bandwidth Consumption: Frequent data exchange consumes significant bandwidth, affecting performance for users with limited connectivity.

Leveraging client-side storage solutions like IndexedDB addresses these challenges by providing robust local storage capabilities. However, IndexedDB’s lack of built-in relational management requires manual handling of relationships, creating complexity for developers.

@nhtio/web-re-active-record streamlines client-side data management by offering:

  • Enhanced Performance: Reduces latency by storing and managing data locally.
  • Real-Time Reactivity: Automatically synchronizes state changes across multiple contexts without manual intervention.
  • Robust Relationship Management: Seamlessly manages relational integrity and data synchronization.
  • Cost Efficiency: Reduces server load and minimizes bandwidth usage.
  • Simplified Development: Familiar, intuitive API inspired by traditional backend patterns.

Simply put, @nhtio/web-re-active-record enables developers to efficiently build robust, high-performance web applications by leveraging powerful browser-native features, with an easy to understand API.

Compatibility and Coverage

This library uses standard Web APIs, providing polyfills for known compatibility issues. Check the table below for compatibility details:

FeatureNotes
IndexedDBFully supported in modern browsers
BroadcastChannelPolyfilled for compatibility with browsers supporting IndexedDB but lacking BroadcastChannel support

Inspiration

The creation of this library was heavily inspired by: