DEV Community: Gloria Lim

Prisma - A Modern ORM

Gloria Lim — Tue, 19 Mar 2024 04:50:00 +0000

What is Prisma❓

Prisma is a modern ORM (Object-Relational Mapping) library which integrates seamlessly with TypeScript and JavaScript.

By ‘modern’, Prisma documentation emphasizes that Prisma ORM is fundamentally a new type of ORM, which does not suffer from the problems commonly associated with traditional ORMs such as bloated model instances and lack of type-safety.

Prisma was created to abstract away the low-level database interactions and increase developer control and productivity. I will touch on my experience using Prisma in this article.

What is an ORM? 🧐

If you are not familiar with ORMs, this is a programming technique used to convert data between incompatible type systems, typically between object-oriented programming languages and relational databases.

This abstraction simplifies database operations and makes it easier to work with databases in object-oriented applications.

Using Prisma 🪄

Last weekend, I created a simple API project which uses Prisma for database operations, built on top of ExpressJS.

Here is a conceptual mental model:

Now imagine if you’re building a really cool treehouse with your friends, Prisma is your architecture plan for this project. It is where you decide how many floors your treehouse will have, where the rooms are located and what color the walls will be.

In my simple API project, Express (web framework for Node.js) is the magical framework that helps build and decorate the treehouse. It provides the tools and materials to add features such as fun slides, swings and ladders.

What I learned 💡

In my experience using Prisma, I noticed that a lot can be done in a few steps.

Need to create a new table?

Define your model in Prisma schema.

Generate migration.

Apply migration.

Populate the new table with seed data.

Prisma Studio was an exciting discovery for me. Prisma Studio is a visual editor for the data in your database which runs on your browser.

You can edit data directly in the model cells, as well as add and delete records. This may appeal to visual thinkers/ learners. You may also sort and filter data in the model (table) in Prisma Studio, which is more efficient than manually running SQL queries to check the status of your database.

Benefits 🔱

After my first taste of working with Prisma, I can see the immense benefits it offers.

Here are some of the greatest benefits (not limited to) of using Prisma:

💼 Database Agnostic: Prisma supports various databases such as PostgreSQL, MySQL, SQLite and SQL Server. This allows you to switch databases easily without worrying about making major changes in your application code.

🧰 Migrations: Prisma supports database migrations, this allows you to evolve your database schema over time and keep track of these changes.

🗂 Schema-based Relationships: Just as an architecture plans serves as a blueprint for building a treehouse, Prisma schema serves as a blueprint for developing and interacting with your database. You can define your data models, and the relationships between your data models in the Prisma Schema. This declarative Prisma schema provides a clear overview of the database current state.

🤝 Collaboration: If you are working in a team, a great benefit of using Prisma is it is easy for everyone to understand. Compare this to traditional workflows where if a developer is trying to understand the current table structure, they will likely have to spend some time digging into migration files.

🖋 Type Safety: Prisma Client abstract away the low-level database interactions and provides an easily understandable API for querying and mutating data.

In short, Prisma can have a positive impact on productivity as well as developer experience.

When should you use Prisma? ✅

Prisma would be a good fit for your project if you are building a server-side application, which interacts with a database. Prisma’s ability to work with both TypeScript and JavaScript does make for a versatile choice for database interactions in Node.js applications.

When to NOT use Prisma? ❎

Like any other tool, Prisma does come with its own tradeoffs. If you need full control over your database queries, you would have to find an alternative. This is because Prisma ORM is an abstraction which takes away some of the control you might have over your database operations if you were to use plain SQL.

Summary

I hope this inspires you to embark on a journey to explore Prisma one day (just as I have), and benefit from Prisma’s role in providing a solid and organized foundation for your database structure (analogous to a scalable and maintainable architectural guide for the construction of a treehouse).

Reference:

Prisma Documentation: https://www.prisma.io/docs

How To Make A Responsive Component in React

Gloria Lim — Fri, 16 Feb 2024 22:00:56 +0000

This is how useState and useEffect can be used to make a component responsive based on the window.innerWidth or the viewport width in React.

Final Result ✨

In this example, the TextField component is imported from @mui/material.

Code ⌨

Here is my React component file which defines a React component named NewMemo, that renders a text area using the Material-UI TextField component.

What Is Going On❓

The useState hook initializes the windowWidth state with the initial window width minus 150 pixels (so that it does not take up 100% width of the screen).
The useEffect hook is used to add an event listener for the resize event on the window.
When the window is resized, the handleResize function is called, updating the windowWidth state.
A cleanup function is returned from the useEffect hook. This is to remove the event listener when the component is unmounted.
The empty dependency array ([ ]) means that the effect runs only once after the initial render.
The component returns a div with the class name "memo-textarea."
Inside the div, there is a TextField component from Material-UI.
The sx prop is used to apply custom styles to the TextField. Width is set dynamically based on the windowWidth state, and there's some margin.

Refresher - What Are Hooks💡

React Hooks are functions that allow functional components in React to manage state, lifecycle events and side effects.
They were introduces in React 16.8 as a way to enable stateful logic in functional components, which was only possible previously with class components.

TLDR - Rule of Hooks 🔱

There are a few rules to using Hooks to ensure consistent and correct usage of React Hooks. Just remember:

Only Call Hooks at the Top Level of your React functional component.
Only Call Hooks from React Functions.
Do Not Call Hooks Conditionally.
Always Call Hooks in the Same Order.
Only Call Hooks from React Components or Custom Hooks.

Summary

The useState and useEffect hooks are two of the most commonly used React hooks. This was just one example of its application.

Media queries can also be used to build a responsive design. Let me know your thoughts!

Visit code repository

Custom Code Snippets in VS Code

Gloria Lim — Thu, 15 Feb 2024 02:38:25 +0000

When coding in Visual Studio Code, how often did you feel unsure about the syntax or format of a function, and had to look it up in Google? Were you so focused coding in Python for the past 3 months and have now forgotten how React hooks look like?

This is a great reason to set up custom snippets in VS Code.

Recently, I added custom snippets for React hooks. The snippet lives in a JSON file and looks like this:

"useReducer Hook": {
            "prefix": "use",
            "body": ["const ${1:INITIAL_STATE} = {", "", "}", "", "function reducer(state, action) {", "  switch (action.type) {", "    case \"${4:NameMe}\":", "      // Do something here", "      return", "  }", "}", "", "const [${2:state}, ${3:dispatch}] = useReducer(reducer, $1)"],
            "description": "Creates a useReducer expression"
    }

The key for the snippet object, "useReducer Hook" is the snippet name.
prefix defines one or more trigger words that display the snippet in IntelliSense.
body is one or more lines of content, which will be joined as multiple lines upon insertion. Newlines and embedded tabs will be formatted according to the context in which the snippet is inserted.
description is an optional description of the snippet displayed by IntelliSense.

Source: VS Code Docs

In my React JavaScript file, I can simply type in 'use' as I had predefined it as a shortcut to the custom snippet.

💡What It Looks Like

As you can see, I have 3 predefined custom snippets there. It shows a preview of the code snippet, and when I hit enter, it prints the snippet to my file.

If you look closely at the configuration, you will notice the parameters that starts with $. These are the user insertion points, and it will automatically place your text cursor there right after the snippet is added to your file.

🔧To Create A Custom Snippet

(for just about anything!)

In VS Code, open File > Preferences > Configure User Snippets.
You have the option to create a New Global Snippets file option to create a global configuration file. Or New Snippets file for ... to create a local configuration file.
Select the language for the code snippet.
Give the file an easily identifiable name.
Notice the comments in the newly created file. It gives you a guide on what is required for the custom snippet to work.

Note: You can copy and paste the example in the commented out code there as a baseline.

I have also created XML and SQL code snippets for my daily work and it has been a great experience!

You can visit this Gist to see an example of my JavaScript configuration code.

💫Shortcut

You can also use this wonderful snippet generator by Pawel Grzybek to create your snippets.

If you gave this a try, let me know your thoughts!