Lab-07: Browser Data Layer With Mock Document DB

Hey guys! In this article, we're diving deep into Lab-07, where we're tackling the exciting challenge of building a browser data layer that mimics a Mongo-style document database. This involves creating a storage-agnostic system with swappable persistence adapters for LocalStorage and JSONBin. Let's break down what this lab is all about and how you can ace it!

🎯 Task Overview: Building a Mock Document Database

At the heart of Lab-07 lies the task of implementing a client-side data layer that behaves like a miniature version of MongoDB, right in your browser! This means creating a system that can store, retrieve, update, and delete data in a structured way, much like you would with a real database. The key here is to make it storage-agnostic, meaning it shouldn't care where the data is actually stored. This is where the persistence adapters come in.

Understanding Storage Agnosticism

Storage agnosticism is a fancy term that basically means our data layer should be able to work with different types of storage without needing to be rewritten. Think of it like this: you have a universal remote control that can operate your TV, DVD player, and sound system, regardless of the brand. Our data layer will be the universal remote, and LocalStorage and JSONBin will be the different devices it can control.

Persistence Adapters: The Key to Flexibility

To achieve this storage agnosticism, we'll be building persistence adapters. These adapters are like translators, taking the commands from our data layer and converting them into instructions that LocalStorage or JSONBin can understand. This allows us to swap out the storage mechanism without affecting the rest of our code. We’ll implement three adapters:

1. MemoryAdapter: Stores data in memory. This is useful for testing and temporary storage.
2. LocalStorageAdapter: Stores data in the browser's LocalStorage. This allows data to persist even after the browser is closed.
3. JsonBinAdapter: Stores data on JSONBin, a cloud-based JSON storage service. This allows data to be shared and accessed from different devices.

Implementing the DB API

The core of our data layer will be the DB API, which will provide a set of functions for performing CRUD (Create, Read, Update, Delete) operations. This API should be comprehensive, covering both basic and advanced CRUD operations. This API will be defined in db.js.

📅 Due Date: October 15, 2025

Mark your calendars! This lab is due on October 15, 2025, at 23:59:00-05:00. Make sure you allocate enough time to complete all the tasks and test your code thoroughly. Procrastination is the enemy!

✅ Acceptance Criteria: Ensuring Success

To ensure you're on the right track, here's a breakdown of the acceptance criteria for Lab-07. These are the things you need to have in place to get a passing grade.

File Structure

• All files required by the Lab-07 document are added under labs/lab-07/. This means keeping your project organized and ensuring all necessary files are in the correct directory. A clean and well-structured project makes it easier to debug and maintain.

DB API Implementation

• Implement the full DB API in db.js (Basic and Advanced CRUD). Your db.js file should contain all the functions needed to interact with the data layer, including creating, reading, updating, and deleting documents. Make sure to handle both basic and advanced CRUD operations, such as filtering, sorting, and pagination.

Adapter Implementation

• Implement the MemoryAdapter, LocalStorageAdapter, and JsonBinAdapter. Each adapter should be able to perform CRUD operations using its respective storage mechanism. Ensure that each adapter correctly translates the DB API commands into the appropriate storage-specific instructions.

Automated Tests

• All automated tests (test-memory.html, test-local.html, test-jsonbin.html, test-sync.html) pass with green checks. This is crucial! Automated tests are your best friend when it comes to verifying that your code works as expected. Make sure all tests pass before submitting your lab. Green checks mean you're good to go!

README.md Reflection

• Add labs/lab-07/README.md with reflections on the lab, what you built, and any challenges. This is your opportunity to reflect on your learning experience. Discuss what you built, what challenges you faced, and how you overcame them. This shows that you not only understand the code but also the underlying concepts.

Diving Deeper: Building the Data Layer

Okay, let's get into the nitty-gritty of building this data layer. We'll start with the core components and then move on to the adapters and testing.

1. Defining the DB API

The DB API is the interface that your application will use to interact with the data layer. It should provide a consistent set of functions for performing CRUD operations. Here’s a basic example of what the API might look like:

• db.create(collectionName, document): Creates a new document in the specified collection.
• db.read(collectionName, query): Reads documents from the specified collection that match the query.
• db.update(collectionName, query, update): Updates documents in the specified collection that match the query.
• db.delete(collectionName, query): Deletes documents from the specified collection that match the query.

2. Implementing the Adapters

Each adapter will implement the DB API using its specific storage mechanism. Let's take a closer look at each adapter.

MemoryAdapter

The MemoryAdapter is the simplest adapter. It stores data in a JavaScript object in memory. This is great for testing and development but not suitable for production since the data is lost when the browser is refreshed.

LocalStorageAdapter

The LocalStorageAdapter stores data in the browser's LocalStorage. LocalStorage is a key-value store that allows you to persist data even after the browser is closed. However, LocalStorage has a limited storage capacity, so it's not suitable for large amounts of data.

JsonBinAdapter

The JsonBinAdapter stores data on JSONBin, a cloud-based JSON storage service. This allows you to share and access data from different devices. JSONBin provides a REST API for interacting with the data, so you'll need to use fetch or XMLHttpRequest to make HTTP requests.

3. Writing Automated Tests

Automated tests are essential for ensuring that your code works correctly. You should write tests for each adapter to verify that it can perform CRUD operations as expected. The provided test-memory.html, test-local.html, test-jsonbin.html, and test-sync.html files will help you get started.

Challenges and Reflections

As you work on Lab-07, you'll likely encounter some challenges. Here are a few common ones:

• Asynchronous Operations: When working with JsonBinAdapter, you'll need to deal with asynchronous operations since HTTP requests are asynchronous. Make sure to use async/await or Promises to handle these operations correctly.
• Data Serialization: When storing data in LocalStorage or JSONBin, you'll need to serialize it to JSON format. Make sure to use JSON.stringify() to serialize the data and JSON.parse() to deserialize it.
• Error Handling: Implement proper error handling to catch any exceptions that may occur during CRUD operations. This will help you debug your code and prevent unexpected behavior.

In your README.md file, reflect on these challenges and discuss how you overcame them. This will demonstrate your understanding of the concepts and your ability to solve problems.

Key Takeaways

Lab-07 is a fantastic opportunity to learn about data persistence, storage agnosticism, and API design. By building a mock document database with swappable adapters, you'll gain valuable experience that you can apply to real-world projects. Remember to stay organized, write automated tests, and reflect on your learning experience.

Good luck, and have fun building your browser data layer!

For more information on MongoDB-style databases, check out the official MongoDB documentation on MongoDB Official Website.