DEV Community: JYC

The Power of Less: Streamlining Dependencies with Remult

JYC — Thu, 13 Jun 2024 11:59:04 +0000

In my last post, I shared my epic journey switching to Remult, which shrank my codebase by 75% and turbocharged my development power. 💪 If you haven't checked it out, give it a read here!

Today, let’s dive deeper into one of the most transformative aspects of my switch: Reducing Dependencies. Streamlining my tech stack not only simplified my workflow but also enhanced my project's maintainability. Let’s break it down:

Deps Reduction

Prisma

I've had a soft spot for Prisma; its DSL is user-friendly and learning it is a breeze. But, here's the catch - while it streamlines some processes, it introduces its own things (DSL, Migrations, File management, Syntax, etc.). Plus, I found myself using Aurora to manage multiple Prisma models, which, again, adds up in the stack. This + this + that... It starts to be a lot!

Disclaimer
On the day I write this article, Prisma released this "Schema into Multiple Files". Will I switch back to Prisma? No! I gained so much with Remult that Prisma is not even coming close ;) even with this new preview feature!

Switching to Remult, I said goodbye to these additional layers. Remult lets me handle everything from entity definitions to database interactions directly within my usual coding environment, eliminating the need for separate DSLs or configuration files. It’s like getting rid of excess baggage - feels great! It's just TypeScript, no more, no less!

Some things I gained that were not possible with Prisma:

Views: Easily create and manage views in your database.
Calculated Fields: Simplify your data manipulations by defining fields that are calculated on the fly. You have two flavors of that: serverExpression or sqlExpression, both are so convenient!
Stored Procedures: Incorporate complex business logic and operations directly into your database, with migration management included!
Admin dashboard: A built-in admin dashboard to manage your data and entities. (Working with your authorization system!!! So it's not something that you use only in development, but also in production if you want) // Detect dark theme var iframe = document.getElementById('tweet-1757736965762351227-798'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1757736965762351227&theme=dark" }

Note also that AI is REALLLLLLLLY good at raw SQL. And here, we can mix and match raw SQL (in sqlExpression) and Remult.

👉 It's a perfect match 🥳

GraphQL

As a longtime GraphQL enthusiast (shoutout to The Guild 👋), it was hard for me to put this part of my stack into question.

I even built KitQL, a library to help with client and server for GraphQL! Being so much in it you don't realize all the ceremonies you go through anymore to add a functionality.

Disclaimer: KitQL shape changed a lot during the past months. Now, KitQL itself is not a library, it’s “nothing” but a collection of standalone libraries.

For GraphQL server, simply use graphql yoga
For GraphQL client, simply use houdini

But now, I realize that GraphQL, eventually, is an implementation detail, mainly focusing on the network layer. The second key part of GraphQL is fragments, but also focusing only on network data. And it's here that Remult shines so much: taking advantage of metadata.

I give you 2 examples:

metadata. When I was designing a Grid, I had to define columns with headers, then populate the Grid with data coming from the network (GraphQL). So you have to define headers on one side and network data on the other side. With Remult, you define on fields of your entities a property called caption. And that's it! Now, I just define columns, and it will bring data & headers, all in one. Also, when the field is used in another place, you can get its caption. So you have a single source of truth for your entire application.
enums. With GraphQL, you have to define your enums in your schema, and then, you have to define them in your client code. I mean that you will have to have a caption displayed for your users instead of the enum value. So it's some code to add somewhere... to organize, to centralize, ... With Remult, you define your enums in your entities field by field, and you can use them everywhere in your application. And you can get the caption of the enum value. So you have a single source of truth for your entire application. Bonus: You can have a lot more than just caption!

👉 So for now, I just removed GraphQL from my stack! (it's a big statement for me!)

Note 1: Remult can enable GraphQL in a few lines of code (check it out here). So if you really need it, you can have it 😉 (it was my first contribution btw).

Note 2: I'm sure that one day I'll develop a Houdini Plugin, to take advantage of all metadata that Remult can provide + optimize the network layer with this internal detail: GraphQL! (In my "work work", it's premature optimization)

Felte, Vest, Zod

Before Remult, integrating validations into my projects required additional libraries like Felte and/or Vest and/or Zod. Now, validations are an integral part of my entities. This integration reduces the number of dependencies and aligns validation logic tightly with the rest of my application logic.

What else to say? Nothing much! It's again a single source of truth for your entire application, validation frontend and backend in a single place 😍.

Meta Frameworks and Remult

In the JavaScript world, you have frameworks and meta frameworks...! you might wonder if Remult still has its place? My answer? An absolute YES!

Meta Frameworks like SvelteKit, Next.js, and others tend to fragment your code. It's easy to fetch a list of users in one spot, but what about maintaining a single source of truth? With this approach, your business logic starts to be spread across routes and components. Remult, in contrast, keeps this business logic consistent and centralized, significantly tidying up your codebase.

For instance, imagine you are with Prisma and NextJs. Every time you fetch users, you must remember to exclude the disabled ones. Prisma focuses ONLY on data retrieval, and the meta framework ONLY on serving data, and no one is responsible for the business logic, so you add this logic in a route, in a component, ... somewhere... and everywhere! With Remult, business logic remains consistent and centralized: in the entity definition. So you can be sure that every time you fetch users, the disabled ones are excluded for example!

Meta Frameworks give you tools to build an app, but you still need to do a lot around to have clean and maintainable code. Take validation for example, with Meta Frameworks you have "nothing"... So you can validate data in Actions, but it's your own concern, you have to do it yourself... You will probably add a dependency to help you, you will fragment your code to have frontend and backend validation, ... With Remult, you have it all in one place, and it's so easy to use!

Stay tuned for more deep dives into Remult's features and how you can leverage them to supercharge your development process. Next time, we’ll explore advanced features like lifecycle hooks and backend methods which can further refine your coding experience.

Feel free to drop by ⭐️ Remult and join our growing community.
👉 Let's code smarter, not harder!

If you have a question or suggestion, do not hesitate to write here or DM me.

Less Code (-75%) & More Power (💪) with Remult

JYC — Wed, 08 May 2024 13:37:17 +0000

I've been using Remult for a while now and I'm really happy with it.
Let me walk you through why I made the switch and how it went.
Spoiler PR Stats 🧐

Introduction

First off, what is "Remult"? It's a library that lets you build applications entirely in TypeScript. The main concept here is SSoT—Single Source of Truth. This means you can define everything just once and use it everywhere (client, server, db, validation, etc.). As someone who appreciates efficiency (OK, I'm lazy), I love not having to write and maintain the same code twice.

The Discovery

Back in February 2023, I attended ViennaJS where Noam Honig, the creator of Remult, was speaking. His presentation was eye-opening. In just 30 minutes, he transformed a client-only application into a full-stack application complete with:

Database integration
Access control
Validation
Even deployment !

I thought to myself:

"Why am I spending more time then him doing similar things? I need to try this asap!!!"

At confrontjs this year:
// Detect dark theme var iframe = document.getElementById('tweet-1778777683452694637-897'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1778777683452694637&theme=dark" }

The Decision

We all have our preferred tech stacks, and it's tough to see a demo like that and believe that one tool can solve all your problems. So you need a step back, breath, and assess your current stack and be open to letting go some parts.

=> Be open to good changes. Change your habits for the better! ;)

You know what is the best part? It's not an all-or-nothing decision, you can add remult step-by-step 🎉

The Migration Process

Initial Glimpse

The cool thing is that you can simply add Remult to your project and start enjoying its benefits. So, where do you start? Where to set up your source of truth? How to create your first entity? it can be overwhelming to start, but no worries.

Since I have a PostgreSQL database, I used remult-cli to generate all my entities in one go, so I didn't have to start from scratch. Just like that, with one line of code, I had 48 entities in my project, ready to be used. From this point, I could already query my database. It became my ORM without needing to learn a new DSL or syntax.

In my backend, I can now do things like:

import { repo } from "remult";
import { User } from "$shared/entities/user";

const sales = await repo(User).find({
  where: { isSale: true },
});

I can also work with relations, like

const sales = await repo(User).find({
  where: { isSale: true },
  include: { orders: true },
});

All this, just from this one shot generator reading from my db schema!

Note:

I think that it's important to mention that it's a one shot generator, as after my SSoT are my entities, and everything will be derived from it (including migrations!)

My project was using Prisma, and no I didn't remove Prisma in one afternoon! In real life projects, things take time... You have complex queries, you want to make sure everything still works, etc., etc. So I had Prisma & Remult running in parallel for a few weeks, and it's fine, it's the backend. Like this I'm confident to move step by step.

Let's take more advantage

Now, let's also use Remult in the frontend! On my side, I'm using Svelte, (the thing is that Remult works with all frontends, so pick yours! 🧡)

Let's say, I want to have a list of sales on my page, I will do:

import { repo } from "remult";
import { User } from "$shared/entities/user";

const sales = await repo(User).find({
  where: { isSale: true },
});

Wait what? It's the same code as before?! Yes!
But here, it will do: page -> API call -> backend -> db. And all this... typed!

🤯 🤯 🤯

So all new features for my app, I start to use this technique... enhance my entities to give more and more knowledge to the SSoT.

Field caption for example! How many times have you had to display the label of a field and you write over and over again "Name of the user"? With Remult, you can define it once and use it everywhere!

Same things for validation, you probably want the name to be required, so in the field name, you can add required: true and that's it! You can use it in the backend and in the frontend! (Validation will run in both places). As required is very common, it's a property, but you can also define your own validation function! Like:

@Fields.string({
  caption: 'Nom',
  validate: (e) => {
    if (e.name.startWith("jyc")) 
      throw "can't start with j !!! (it's only for me 😉)"
  }
})
name!: string

You can do this; in my app, in reality, I use only already powerful built-in validation. My favorite is probably:

@Fields.string({ validate: [Validators.unique()] })
email!: string

This one will run only in the backend, to check if the email is unique in the db. Soooo handy!

Deep Dive into Features

Admin UI

This feature was not present when I started, but now it's a game-changer! It's a full admin UI that you can use to manage your entities. It's like a CMS for your entities. You can create, update, delete, search, filter, ... It's a real time saver!

// Detect dark theme var iframe = document.getElementById('tweet-1757736965762351227-772'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1757736965762351227&theme=dark" }

It's also a perfect way to browse your data and its relations with the context thx to nested tables.

As it's using the normal remult api, all security is fully functional.

Example:

@Entity('salaries', {
  // All users authenticated can see salaries
  allowApiRead: Allow.authenticated,
  // SUPER_ADMIN can edit salaries (so better be friend with SUPER_ADMIN!)
  allowApiCrud: Role.SUPER_ADMIN,
})
export class Salary {
  // ...
}

Lifecycle hooks

It's so handy to have hooks in your entities & fields! You can do things before or after a save, a delete, a find...
for example, making sure the email is in lowercase and trimmed:

@Fields.string<User>({
  saving: (u) => u.email.trim().toLowerCase(),
})
email!: string

In a few lines of code, I also implemented ChangeLogs in my app. So I can see who did what and when! Ask me if you want to know more about it ;)

Backend methods

Sometimes, you need to have a very specific data "out of nowhere"; here, you can use backend methods. You just call this function from the frontend, and it will do the front -> back API call for you. It's so flexible!

Benefits Realized

The main benefit is really this SSoT, as it improves my efficiency, maintenance, and scalability for all my projects.

Yesterday, I finished my migration; everything is now running on Remult 🥳. And I did a small exercise, a PR to compare now vs before Remult:

Yes, there is 4 times less code 🥳 🥳 🥳 !!!

(With all the features of before, and some new developed along the way!)

Conclusion

If you couldn't tell, I'm more than just a bit excited about my switch to Remult. I'm absolutely thrilled! The way it improved my projects by cutting down unnecessary complexity and reducing code bloat is just phenomenal. And guess what? My adventure didn't stop at just using Remult; I've dived deeper and am now actively contributing.

I’m really pumped to see where we can take Remult next, and I’d love for you to join us on this journey. Whether you're tweaking your current projects or kickstarting new ones, Remult has something to offer. Come and see how it can transform your development experience—let’s code better, faster, and smarter, together!

Come and say hi ⭐️ Remult