Uncovering the Power of Entities in Web Development
At the heart of every application lies a fundamental concept: entities. Whether it’s a tweet, a Facebook post, or an Instagram comment, each piece of data is essentially a row in a database somewhere. As a front-end developer, understanding this concept can revolutionize the way you approach application development.
The Entity Revelation
Learning SQL, the language used for database management, was a turning point for me. It dawned on me that every user’s journey, from login to searching, animating, and finally arriving at the desired information, boils down to a single line of code: SELECT * FROM movies WHERE id='42';. This simple query retrieves a specific movie from a database table, illustrating the fundamental concept of entities.
What is an Entity?
An entity is “a thing with distinct and independent existence,” according to the dictionary. In the context of web development, entities are the building blocks of data management. CRUD (Create, Read, Update, Delete) is the basic set of operations needed to manage any collection of data.
Implementing CRUD Functions
Let’s explore how to implement a simple set of CRUD functions using an array as our data storage. We’ll start with creation, followed by reading, updating, and deleting.
- Creation: Adding an entity to the array is straightforward.
- Reading: Retrieving a single entity by its ID is a simple operation.
- Updating: This is the most complex operation, requiring careful handling of entity changes.
- Deletion: Removing an entity from the array involves filtering out the unwanted data.
The Limitations of Our Implementation
While our CRUD functions work, they’re not optimized for real-world use. We’re missing functions for handling multiple items in a single operation, and our data storage approach is suboptimal for larger scales.
Introducing createEntityAdapter
Luckily, the amazing redux-toolkit provides a solution: createEntityAdapter. This API simplifies entity management, making it a breath of fresh air for frontend developers.
Building a Simple Web App
Let’s create a simple web app that demonstrates the core of most web applications. Our app will display a list of users, allow new user creation, and enable deletion and update operations.
Getting Started
Clone our repository, install the necessary dependencies, and start the server. Our app will be up and running at http://localhost:1234.
The Importance of Setup
Apart from Redux and React, we’ll use Parcel for bundling code and add some styling to make our app visually appealing.
Creating Entities
Using createEntityAdapter, we can create entities with ease. Our store.js file is surprisingly small, thanks to the heavy lifting done by @reduxjs/toolkit.
Reading Data
Reading data involves using the getSelectors method, which returns five selectors. We’ll focus on the selectAll selector, which retrieves all users.
Updating Entities
Updating an entity is similar to creating one. We’ll use the updateOne function, which has been mapped to the userUpdate case reducer.
Deleting Entities
Deleting an entity is the simplest operation of all. We’ll use the deleteOne function to remove a user.
What’s Missing?
Our app is missing one crucial aspect: communication with a database! All our code deals with updates to data stored only in the browser memory. In a real-world application, we’d need to synchronize data with a server database.
Optimistic Updates
To provide instantaneous feedback, many applications implement an optimistic update strategy. We’ll assume we know how the data will look after the update and render the updated data immediately. Then, we’ll deal with any errors and discrepancies after the server response.
By understanding entities and their management, we can build more efficient and scalable web applications. Thanks for joining me on this journey!