React's Server Actions fundamentally streamline the implementation of email functionalities in web applications, making it a highly efficient and reliable solution

Using React's Server Actions and Resend for Emails

React's new source code directives provide instructions to bundlers compatible with React Server Components. The `'use server'` directive marks server-side functions that can be called from client-side code. React calls these functions **Server Actions**.

Today we will explore how to leverage Server Actions to send emails using [Next](https://nextjs.org/) (The React Framework for the Web) and [Resend](https://resend.com/) (The email API for developers).

## Why is this a good use case?

To send emails, your UI would typically have to trigger a POST request to an API endpoint. This would require setting up logic from both sides to send, manage states, process your request and provide an approriate response.

React's new `'use server'` directive makes this entire process easier if you need to setup email delivery fast. No API endpoints needed, you just _call a Server Action and you are done_.

## Getting started

In the context of a Next application, chances are that, you are or should be working with the following dependencies:

- [shadcn/ui](https://ui.shadcn.com/) Form Component which in turn includes dependencies such as [Zod](https://zod.dev/) for schema validation and static type inference and [React Hook Form](https://react-hook-form.com/) for the forms themselves
- [TanStack Query](https://tanstack.com/query/latest) for asynchronous state management
- [Resend](https://resend.com/) for sending the emails with [React Email](https://react.email/) or a component library such as [MailingUI](https://mailingui.com) for email templates.

## Is it safe to use Server Actions for this?

Behind the scenes, Server Actions use the POST method, and only this HTTP method is allowed to invoke them. This prevents most CSRF vulnerabilities in modern browsers. Server Actions in Next also compare request headers. If these don't match, the request will be aborted. In other words, Server Actions can only be invoked on the same host as the page that hosts it.

![Server Actions Network Request](https://images.prismic.io/webscopeio/ZgBRYMcYqOFdyDTe_01-server-actions-network-request.png "Server Actions Network Request")

A deeper read can be referenced in Sebastian Markbåge's [How to Think About Security in Next.js](https://nextjs.org/blog/security-nextjs-server-components-actions)

## Putting everything together

Let's build a simple UI that will allow users to claim a username.

### Schema Validation

Personally I like starting with my type definitions. Keeping everything incredibly simple, let's set up a schema:

```ts
import { z } from "zod";

export const usernameRequestForm = z.object({
  username: z.string().min(3),
});

export type UsernameRequestForm = z.infer<typeof usernameRequestForm>;
```

### Building our UI

Let's set up your Form component using your resolver and type definition from your schema. To show an example of optimistic updates we will also display a list of requests below the form.

```tsx
export const RequestForm: React.FC = () => {
  const form = useForm<UsernameRequestForm>({
    resolver: zodResolver(usernameRequestForm),
    defaultValues: {
      username: "",
    },
  });
  // ...
```

At form submission React Hook Form uses the schema defined to validate the form values. Using its `handleSubmit` method you are able to provide an `onValid` and/or `onInvalid` callbacks using the parsed values.

Typically you would define an `onSubmit` function and provide in the form's `onSubmit` attribute. However, you can invoke the `handleSubmit` method outside of the `onSubmit` attribute. Here are some examples:

#### Using `onSubmit` attribute

This is how [ui.shadcn.com/docs/components/form](https://ui.shadcn.com/docs/components/form) is used.

```tsx
<form onSubmit={form.handleSubmit(onSubmit)} />
```

#### Using `action` attribute

If you are using `react-hook-form`, this doesn't mean that you cannot make use of the `action` attribute.

```tsx
<form action={async () => await form.handleSubmit(onSubmit)()} />
```

#### Using a button's `onClick` handler

Or if you have different triggers in your form (i.e., a draft and save action), you can also use a button.

```tsx
<Button type="button" onClick={() => form.handleSubmit(onSubmit)()} />
```

We will be using a combination of these to showcase differents ways of using this structure with Server Actions.

### Server Actions

To call a Server Action in a Client Component, create a new file and add the `"use server"` directive at the top of it. All functions within the file will be marked as Server Actions that can be reused in both Client and Server Components.

To follow our example, we will send the user a confirmation via email after the request has been processed:

```ts
"use server";

import EmailTemplate from "@/emails/email-template";
import { Resend } from "resend";
import type { UsernameRequestForm } from "./types";

const resend = new Resend(process.env.RESEND_API_KEY);

function getCurrentUser() {
  return "sosa@webscope.io";
}

export async function claimUsername(form: UsernameRequestForm) {
  const userEmail = getCurrentUser();
  const { error } = await resend.emails.send({
    from: "From webscope.io <info@webscope.io>",
    to: [userEmail],
    subject: "Thank you for your message!",
    text: "We will reach out to you shortly",
    react: EmailTemplate(form),
  });

  if (error) {
    throw error;
  }

  return form;
}
```

Resend's SDK returns a `data` and `error` response in `CreateEmailResponse`. However, in this example we only make use of the error since the data only contains the email ID.

**Important note on error handling**: Just like in Server Components when using Server Actions, if an error is thrown during production, Next will strip any sensitive information and provide a generic error message and digest for log reference. This is a security precaution to avoid leaking any sensitive information included in the error to the client. You can read more about it in: [Handling Server Errors](https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-server-errors)

For the purposes of this article, we will continue working in development with unobscured error messages from Server Actions. If you do need to get specific error information from your errors, create and return an error object to the client.

### Handling States

Since Server Actions are just functions, it is up to us to handle states in our UI to provide an appropriate feedback to our user. These are roughly the states the UI needs:

- A `isPending` state while the Server Action is being processed.
- A `isError` state if the Server Action responds with an error.

![Displaying a Loading State](https://images.prismic.io/webscopeio/ZgBRYccYqOFdyDTf_02-loading-state.png "Displaying a Loading State")

Good to have are the following side-effects:

- A `onSuccess` callback once the Server Action is successful.
- A `onError` callback if the Server actions response with an error for next steps.


![Displaying a Error State](https://images.prismic.io/webscopeio/ZgBRYscYqOFdyDTg_03-error-state.png "Displaying a Error State")

Doesn't this sound like a perfect case for [TanStack Query](https://tanstack.com/query/latest)? Read their docs in [Mutations Guide](https://tanstack.com/query/latest/docs/framework/react/guides/mutations) for more information.

Following our example, this is how that would look like:

```tsx
const { isPending, isError, mutate } = useMutation({
  mutationFn: sendEmail,
  onSuccess: (_, variables) => {
    toast.success("Email sent!", {
      description: `Thanks for reaching out, ${variables.name}!`,
    });
  },
  onError: (error) => {
    toast.error("Something went wrong!", {
      description: error.message,
    });
  },
});
```

This gives us everything we need to process our request and handle our UI states.

We can also make use of an async mutation to provide immediate feedback using a promise `toast`:

```tsx
const { isPending, isError, mutateAsync } = useMutation({
  mutationFn: claimUsername,
});

function handleSubmit(values: UsernameRequestForm) {
  toast.promise(mutateAsync(values), {
    loading: `Submitting a claim for @${values.username}`,
    success: (data) => {
      form.reset();
      return `You have successfully submitted a claim for: @${data.username}`;
    },
    error: (error) => {
      return error instanceof Error ? error.message : "Unknown error";
    },
  });
}
```

### What if you are not using TanStack Query

This would be a mistake. However, you are able to make use of `useTransition` and `useOptimistic` hooks to trigger a Server Action and handle the different UI states. Here is what you need to keep an eye for:

* `useOptimistic` returns a tuple with a state and action. These actions can only be called within form's actions attributes or wrapped inside of a transition function.
* `useTransition` returns a tuple with a boolean and a **non-blocking** UI transition function. Even if being used inside a form's submit attribute, a transition provides a state for all the actions and not the handler (as `useFormStatus` would) which is not the same.

Let's make use of both of these hooks and call the Server Action directly without using TanStack Query Mutations.

```tsx
function handleSubmit(values: UsernameRequestForm) {
  startTransition(() => {
    addOptimisticRequest(values);
    toast.promise(claimUsername(values), {
      loading: `Submitting a claim for @${values.username}`,
      success: (data) => {
        form.reset();
        setRequests([
          ...requests,
          {
            ...data,
            status: "Requested",
          },
        ]);
        return `You have successfully submitted a claim for: @${data.username}`;
      },
      error: (error) => {
        setRequests([
          ...requests,
          {
            username: values.username,
            status: "Error",
          },
        ]);
        return error instanceof Error ? error.message : "Unknown error";
      },
    });
  });
}
```

Check out all the complete code snippets and the demo in [github.com/webscopeio/examples/tree/main/server-actions-resend](https://github.com/webscopeio/examples/tree/main/server-actions-resend)

## Will you give Server Actions a try?

React's Server Actions fundamentally streamline the implementation of email functionalities in web applications, making it a highly efficient and reliable solution. This guided example not only demonstrates the process from schema validation to state management but also emphasizes the ease of integration with essential web development tools, illustrating a holistic approach to modern web application development.

- **Simplified Process**: The introduction of Server Actions eradicates the necessity for back-and-forth logic between client and server to manage email sending, state processing, and response handling. By directly calling a Server Action, developers can swiftly set up email delivery mechanisms.

- **Reliable Security**: The security measures built into Server Actions, such as the exclusive use of the POST method and header verification to prevent CSRF vulnerabilities, offer a reliable security framework. This ensures that Server Actions are securely invoked only from the same host, minimizing potential security threats.

- **State Handling and Flexibility**: Handling UI states is crucial in providing user feedback. The use of TanStack Query, as recommended, facilitates this by offering a structured approach to mutations and state management.

So will you give Server Actions a try? Let us know why or why not and have fun! Thanks for reading!


Integrating a local Supabase setup with an email workflow is a game-changer for development efficiency and effectiveness

Creating an email workflow for local Supabase development

Local Supabase development is highly recommended for creating robust and efficient project workflows. With a local-first approach you can: (a) develop faster without any network latency or disruptions and even completely offline; (b) spin up unlimited Supabase instances free-of-cost; and (c) rely on code-based configurations and migrations making it easier to collaborate with team members on the same project. If you haven't tried it yet, you can read more in [Local development - How to use Supabase on your local development machine](https://supabase.com/docs/guides/cli/local-development).

Before getting started make sure that you:

- Install globally or locally (as a dev dependency) [Supabase CLI](https://supabase.com/docs/guides/cli/getting-started) to run the development stack locally on your machine.
- Install [Docker Desktop](https://docs.docker.com/desktop) to run the Docker containers required for the development stack.

This guide assumes you are working with Supabase CLI as a dev dependency. If you already have it installed globally, you can run all of the CLI commands directly, i.e. (use `supabase init` instead of `pnpm supabase init`).

This guide will help you build the following workflow:

1. Run a local Supabase instance
2. Run a local email development server using [React Email](https://react.email/docs/cli)
3. Set your [CLI configuration](https://supabase.com/docs/guides/cli/config) `supabase/config.toml` to include your email templates
4. Use [Inbucket](https://github.com/inbucket/inbucket) to capture emails sent from your local machine

## 1. Run a local Supabase instance

Go ahead and run the following commands:

```bash
# Create a cwd and initialize a project
mkdir supatest
cd supatest
pnpm init

# Install Supabase CLI as a dev dependency
pnpm add -D supabase

# Initialize and start
pnpm supabase init
pnpm supabase start
```

Once all of the Supabase services are running, you'll see the following output containing your local Supabase credentials:

```bash
        API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eyJh......
service_role key: eyJh......
```

From all of these we will be using:

- **Studio**: This container runs a web-based interface for managing your Supabase instance.
- **Inbucket**: This container runs an email testing service; it will accept messages for any email address and make them available via web interface.

### Additional information about Supabase CLI

What is good to know about the `supabase start` output:

- The environment variables are hard-coded and safe to include in your `.env.example` file
- You can use `supabase stop` at any time to stop all services (without resetting your local database). Use `supabase stop --no-backup` to stop all services and reset your local database

You can also add some of the Supabase CLI commands in your `package.json` for ease-of-use such as:

```json
"scripts": {
  "db:start": "supabase start",
  "db:stop": "supabase stop",
  "db:reset": "supabase db reset",
  "db:gen-types": "supabase gen types typescript --local > types/supabase.ts"
}
```

### Sending your first email

Go to Studio (using the Studio URL) and visit the Authentication page and click on "Add user" to send an invitation to any email. Once you have sent an invitation a new user will appear in a `Waiting for verification...` state.

![Supabase Studio Invite User](https://images.prismic.io/webscopeio/ZgBQ78cYqOFdyDTY_01-supabase-studio-invite-user.png "Supabase Studio Invite User")

Go to Inbucket (using the Inbucket URL) and your recently sent email should appear in "Monitor" or you will be able to find it under "Recent Mailboxes".

This is a fully functional email, but it isn't styled and it may not be the exact same email you want to send in production. Supabase Auth makes use of [Go Templates](https://pkg.go.dev/text/template) and you may be wanting to add more variables or add conditions based on the authentication method or user. You can read more about this in [Email Templates - Learn how to manage the email templates in Supabase](https://supabase.com/docs/guides/auth/auth-email-templates)

![Supabase Default Invite Email Template](https://images.prismic.io/webscopeio/ZgBQ8McYqOFdyDTZ_02-supabase-default-invite-email-template.png "Supabase Default Invite Email Template")

## 2. Run a local email development server using React Email

Enter React Email, a collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. React Email also has a CLI that is able to start a local development server for email development. Here's how to integrate it into your existing project.

```bash
# Add dependencies
pnpm add react @react-email/components

# Add dev dependencies
pnpm add -D react-email
```

With these dependencies we will be able to create, develop and test our emails using React Email's development server and use their CLI to generate HTML files for our Supabase project.

Again, here are some commands you can add in your `package.json` for ease-of-use:

```json
"scripts": {
  "email:dev": "email dev -p 4000",
  "email:export": "email export --outDir supabase/templates --pretty",
}
```

Before you run any of these commands make sure to create an `./emails` directory and create a `invite.tsx` file using this example [/examples/supabase-email-workflow/emails/invite.tsx](https://github.com/webscopeio/examples/blob/main/supabase-email-workflow/emails/invite.tsx)

All of the available variables for Suapbase Auth emails can be found in [Email Tempaltes Terminology](https://supabase.com/docs/guides/auth/auth-email-templates). Once you have set everything you need for email development you can continue with the following commands:

```bash
# Test your email development server running
pnpm email:dev

# Generate HTML for your templates running
pnpm email:export
```

![React Email Development Server](https://images.prismic.io/webscopeio/ZgBQ8ccYqOFdyDTa_03-react-email-development-server.png "React Email Development Server")

Once you are happy with your template and are ready to test your emails with Inbucket. You should make sure they are available in `supabase/templates` after running `pnpm email:export`.

## 3. Set your CLI configuration to include your email templates

You can customize all of the authentication emails in your CLI configuration using the `config.toml` file. This guide is only showcasing the invite email but you can read more about the other available email templates in [Customizing Email Templates](https://supabase.com/docs/guides/cli/customizing-email-templates).

```toml
[auth.email]
# Allow/disallow new user signups via email to your project.
enable_signup = true
# If enabled, a user will be required to confirm any email change on both the old, and new email
# addresses. If disabled, only the new email is required to confirm.
double_confirm_changes = true
# If enabled, users need to confirm their email address before signing in.
enable_confirmations = true

[auth.email.template.invite]
subject = "You have been invited"
content_path = "./supabase/templates/invite.html"

```

Remember, you will need to reset or restart your containers whenever the CLI configuration changes.

## 4. Use Inbucket to capture emails sent from your local machine

Now you can use Inbucket to test the email templates, use different email addresses, see how the variables are being loaded into the emails and test the different authentication flows. You should be able to see both the generated HTML and Plain Text from your email templates.

![Supabase New Invite Email Template](https://images.prismic.io/webscopeio/ZgBQ8scYqOFdyDTb_04-supabase-new-invite-email-template.png "Supabase New Invite Email Template")

These settings are only for local development. To update your hosted project, please copy the templates from `supabase/templates` into the [Email Templates](https://arc.net/l/quote/kjchbwqk) section of the Dashboard.

Keep in mind that for your production application you should update your SMTP configuration to use a service such as [Resend](https://resend.com). You can read more about this process in their guide [Supabase with SMTP](https://resend.com/docs/send-with-supabase-smtp)

## Main takeaways

To wrap up, integrating a local Supabase setup with an email workflow is a game-changer for development efficiency and effectiveness. Here's why this approach is a win-win:

- **Rapid Developmen**: Eliminating network delays with local Supabase speeds up development, while direct email testing slashes time to perfect email communications.
- **Cost-Effective**: Free unlimited Supabase instances keep your budget in check.
- **Team Synergy**: Code configurations ease collaboration and version control, and streamlined email development aligns your team on user communication strategies.
- **Quality Assurance**: With tools like React Email and Inbucket, you ensure your emails look great and work perfectly, enhancing the user experience.

Check out all the complete code snippets and the demo in [github.com/webscopeio/examples/tree/main/supabase-email-workflow](https://github.com/webscopeio/examples/tree/main/supabase-email-workflow)

Embrace this setup to boost your project's development workflow and deliver outstanding email communication. Give it a go, your project (and inbox) will thank you.


We tried to be clever and decided to ignore the first normal form (1NF) to "simplify" our database. And it went horribly. Read the story how.

Database Normalization: A Simple Tale of Ignoring 1NF

Let's dive into a quick chat about database normalization. If you've heard of it, awesome. If not, do not worry. This little story may shed light on why it's important.

### Database Normalization in a Nutshell

Picture this: you're trying to organize a big box of mixed-up Lego bricks. You'd probably sort them by color, size, or type, right? Database normalization is like that but for data! It's a way to sort and store your data neatly to avoid mix-ups and make sure everything is easy to find. For those who fancy a textbook definition, Wikipedia tells us:

> Database normalization is organizing a relational database to reduce data redundancy and improve data integrity.

In simpler terms: it's a set of rules (or "normal forms") that helps keep your data organized and your database running smoothly. However, the smoother your data, the trickier it might be to pull specific pieces when you need them.

### Bypassing 1NF: A Shortcut Gone Wrong
What this article will be a real story I have encountered in the past with one of the projects, where we tried to be clever and decided to ignore the first normal form (1NF) to "simplify" our database. 

Just to clarify, 1NF says:

> Every field should contain a single value, no sets of values or nested records allowed.

In other words: "Don't put tables inside of tables." But, of course, we did just that—tucked a table into another and found ourselves in a mess of complications and headaches.

## The story

Our journey commenced with the seemingly straightforward task of crafting a mechanism to store varied types of content – encompassing charts, custom HTML content, and checklists. The initial thought process nudged us toward the creation of a single table, structured as follows:

```sql
create table [dbo].[ContentSelection]
(
	[ContentPartSelectionID] int identity (1, 1) not null,
	[ConfigurationJSON] nvarchar(max) null,
	[ProfileTabID] int not null,
	[ContentType] int not null,
);
```

A singular majestic table, `ContentSelection`, was meant to graciously host various content types - charts, HTML blobs, or checklists, all neatly serialized and tucked into the `ConfigurationJSON` column. Oh, and a polite `ContentType` column to nudge us about what was packed inside each JSON, making deserialization ez thanks to .NET wizards like `System.Text.Json` and `Newtonsoft`.

### Problem 1: Navigating the Puzzle of Configuration Updates

Oh, the joys of updating configurations! Especially when dealing with JSON, it turned out to be a notable quest in our database management journey. Even seemingly simple tasks, like tweaking a chart's `Title` attribute, uncovered some pretty significant hurdles embedded in this method.

#### Simple Title Update in code: A Walk in the Park

In the world of coding, this task seemed like a walk in the park. The steps of deserialization, executing the update, and saving the JSON again could be done in a few simple steps:

```csharp
var data = JsonConvert.DeserializeObject<ChartConfiguration>(chart.ConfigurationJSON);
data.Title = "New Title";
chart.ConfigurationJSON = JsonConvert.SerializeObject(data);
// And the chart is saved!
```
This snippet of C# code allows developers to change the `Title` without diving deep into the entire JSON string. However, as the application goes, the code was all over the place, and this deserialization and serialization were done in many places. This is a code smell; we should have done it in one place. Sometimes, we just took the whole string and saved it as it is. I just trusted(hoped) that the client is sending the configuration in the correct state. Yeah, but that's a different story.

#### Simple but Not So Simple: The Database Update

Trying to update the configuration JSON directly within the database manually gave us a few options, each with its own set of complex puzzles:

1. **Whole JSON String Update:**
```sql
UPDATE [dbo].[ContentSelection] 
SET [ConfigurationJSON] = '{"Title": "New Title", "Type": "Chart", ...}'
WHERE [ContentPartSelectionID] = 1
```
Surprisingly, updating the entire JSON string, while seemingly straightforward, demands a meticulous understanding of the existing data structure to prevent any accidental data adventures (or misadventures).

2. **Making Friends with SQL Server’s JSON_MODIFY Function:**
```sql
UPDATE [dbo].[ContentSelection]
SET [ConfigurationJSON] = JSON_MODIFY([ConfigurationJSON], '$.Title', 'New Title')
WHERE [ContentPartSelectionID] = 1
```
The `JSON_MODIFY` function seemed like a neat and tidy update approach. Yet, it introduced a new set of complexities, particularly for those developers who might not be best buddies with SQL JSON manipulation functions.

#### HTML Property Challenges: An Additional Twist 

And then, things got particularly interesting when dealing with properties that encapsulate entire HTML strings. Direct updates weren't quite in the cards due to the necessity of escaping quotes to keep our JSON string in good shape. Thus, what seems like a straightforward update morphs into a careful dance of ensuring every character is correctly escaped and validated, amplifying the possibilities for error and inefficiency in database management.

---

### Problem 2: Leaping Over Initial Data Insertion Hurdles

Inaugurating a new production instance entailed inserting a wide variety of content—charts, checklists, and the like—into the `ContentSelection` table. What seemed like a straightforward task was, in reality, a hidden obstacle course.

#### The balance between Quantity vs. Quality 

Inserting many rows into the `ContentSelection` table meant wrestling with large strings of JSON configurations. Each piece of content, whether a chart or checklist, demanded a unique, error-free JSON string to guarantee smooth sailing in functionality and display.

Example JSON:
```json
{
  "Title": "Sample Chart",
  "Type": "Chart",
  "Configuration": {
    "Type": "Bar",
    "Data": {
      "Labels": ["January", "February", "March"],
      "Datasets": [{"Label": "Monthly Sales", "Data": [30, 25, 45]}]
    }
  }
}
```
Even the tiniest misstep, like a missing comma or mislabeled key, could introduce:

- **Data Integrity:** A chance of mischievous JSON disrupting data retrieval or manipulation.
- **User Experience:** The risk of misconfigurations causing a little chaos in content display or UI interactions.
- **Developer Efficiency:** The potential time-drain of debugging and correcting JSON strings.

#### The Sneaky "What-If" of Mistakes 

While seemingly trivial, an error in the JSON string can secretly trigger a chain reaction of operational disruptions, impacting developers and end-users alike. Though subtle, this issue beautifully underscores the crucial nature of precise data management and hints at the complex challenges that emerge when diverting from tried-and-true database normalization practices.

---

### Problem 3: Data Retrieval

While seemingly simple, extracting data from the `ContentSelection` table unveiled its complexity in deserializing JSON strings. This complexity, particularly when handling larger objects like comprehensive dashboards requiring multiple content elements, swells even more in cloud environments like Azure, where every computational second counts—both in performance and pennies.

### Problem 3.5 Search Operations: Not So Light on Serialized Columns 

Embarking on search operations within serialized columns is not just a stroll in the tech park. Here we are, navigating through JSON strings, demanding not just a splash, but a veritable ocean of additional computational prowess—especially when side-eyed with the columnar searches in our ever-so-organized normalized database setup. And as those JSON objects swell in size and complexity, our search operations mutate, becoming an increasingly obstinate beast, voraciously consuming resources and casually nudging our end-users’ response times into the slow lane.

And nvarchar(max), oh what a whimsical challenge for standard SQL server full search – a perfect storm of complexity all bundled up with a neat little bow. Thus, the serialized columns sashay through, daring us to keep pace without tripping over the nuances of adept database management. May the odds be ever in our favor!


### Problem 4: The Need for a Schema Update
We had multiple model classes within the source code with this comment.
> // Careful with renaming any of the properties here!!! - will break existing content parts

That's it. That explains it all. 

## The Solution: A Nod to 1NF

To alleviate the problems mentioned above, we pivoted towards adhering to the First Normal Form (1NF). It entailed restructuring our database, primarily by creating distinct tables for each content type, thus eliminating the need for JSON serialization within the database.

```sql
-- Original table, omitting the JSON column
create table [dbo].[ContentSelection]
(
    [ContentPartSelectionID] int identity (1, 1) not null,
    [ProfileTabID] int not null,
    [ContentType] int not null,
);

-- Additional tables
create table [dbo].[ChartConfiguration]
(
    [ContentPartSelectionID] int not null,
    [Title] nvarchar(max) null,
    [ChartType] int not null, -- e.g., 1 = Bar, 2 = Line, 3 = Pie
    [Values] nvarchar(max) not null,
    [XName]  nvarchar(100) not null,
    [YName]  nvarchar(100) not null
);

create table [dbo].[CustomContentConfiguration]
(
    [ChecklistConfigurationID] int identity (1, 1) not null,
    [ContentPartSelectionID] int not null,
    [Title] nvarchar(max) null,
    [Html] nvarchar(max) null,
);
... -- you get the idea
```

While effectively eliminating the need for extensive JSON operations within SQL, this solution required a meticulous migration process, ensuring existing customer data was transferred accurately and securely to the new structure.

### Navigating Through Data Migration

The transition demanded the crafting of migration scripts for each existing customer instance. 

```sql
insert into ChartConfiguration(ContentPartSelectionID, Title, Values, Type, XName, YName)
select
    ContentPartSelectionID,
    Json_Value(ConfigurationJSON, '$.title'),	   
    Json_Value(ConfigurationJSON, '$.values'),
    Json_Value(ConfigurationJSON, '$.ChartType'),
    Json_Value(ConfigurationJSON, '$.xName'),
    Json_Value(ConfigurationJSON, '$.yName')
from ContentSelection 
where ContentType = 1
```

Interestingly, this migration was multi-faceted and far from straightforward. For each content type, specific scripts were required. Moreover, each migration script must include checks to ensure data integrity, particularly validating JSON strings and managing instances where the `Json_Value` function misbehaved without apparent reason.

To safeguard against potential mishaps during the migration, the process was executed in two strategic phases: 
1. **Data Migration:** Transfer data without altering the original structure.
2. **Schema Update:** Only after verifying the migrated data did we modify the schema, like deleting the JSON column.

This dual-phase approach provided a safety net, ensuring that if complications arose at any point, a revert to the previous database state was always within reach. While resource-intensive, this strategy underscored the importance of meticulous planning and safeguarding data during migration, especially when restructuring to adhere to normalization principles like 1NF.

## Conclusion
This story concludes with a happy ending. We successfully migrated all our customers to the new structure and can now update the configuration of each content type without any problems. However, this story is not about the happy ending. It's about the issues we faced and how we solved them.

Take this story as a way to remind you to follow the best practices as much as possible. Even if you think you can do it better.

### One last note
Yes, I called them problems, not "challenges" or "opportunities". Because they were problems.


How do we flit between models within these layers, especially when models diverge or beckon another repo or service?

From Converters to Dependency Injection: Navigating Model Migrations

Do you know the three-layer software design? Think of it as tech's equivalent of a sandwich with neatly stacked presentation, logic, and data layers. Now, why choose multiple models over one mammoth model? It's akin to organizing playlists by mood. Nifty, isn't it? In the coding realm, it's about being spick and span. Tiny model tweaks feel more like a brisk walk than a marathon.

But the real query is: how do we flit between models within these layers, especially when models diverge or beckon another repo or service?

## Well, Examples Speak Louder
### Keep It Simple
Suppose a Dog is set to evolve into a DogDto.

``` csharp
public class Dog
{
    public string Name { get; set; }
}

public class DogDto
{
    public string Name { get; set; }
}
```
Seems direct, right? Either use AutoMapper:
``` csharp
Dog dog = new Dog{ Name = "doge"};
DogDto dogDto = _mapper.Map<DogDto>(dog);
```

Or, take the traditional route:
``` csharp
Dog dog = new Dog{ Name = "doge"};
DogDto dogDto = new DogDto { Name = dog.Name };
```

### Navigating Naming Nuisances
What if DogDto opts for a different nomenclature?

``` csharp
public class Dog
{
    public string Name { get; set; }
}

public class DogDto
{
    public string Naming { get; set; }
}
```
You've got two aces up your sleeve: use a FromXX/toXX method or integrate a mapper profile. Here's option one:
``` csharp
public class DogDto
{
    public string Naming { get; set; }

    public static DogDto FromDog(Dog dog)
    {
        return new DogDto
        {
            Naming = dog.Name
        };
    }
}
```
And here you have how would mapper profile look like:
``` csharp
using AutoMapper;

public class UserProfile : Profile
{
    public UserProfile()
    {
        CreateMap<Dog, DogDto>()
            .ForMember(dest => dest.Naming, opt => opt.MapFrom(src => src.Name));
    }
}
```
```csharp
var configuration = new MapperConfiguration(cfg =>
{
     cfg.AddProfile<UserProfile>();
});
```

### When Models are Like Apples and Oranges
``` csharp
public class Dog
{
    public string Name { get; set; }
}

public class DogDto
{
    public int NumberOfLegs { get; set; }
    
    public Superpower SuperPower  { get; set; }
}
```
Time to roll up the sleeves! Converters are the knights in shining armor here:

``` csharp
public interface IConverter<In, Out>
{
    Out Convert(In input);
}

public class DogConverter : IConverter<Dog, DogDto>
{
    // Your conversion magic here!
}
```

## Elevate Your Game: Services Within Converters
Ever bumped into a situation where your models are as different as, well, apples and oranges? And, to spice things up, you need to juggle an `AnimalRepository` or a `FoodService` within your converter. Tough spot, right?

Remember this code?
``` csharp
var converter = new DogConverter(_animalRepository, _foodService, _anotherService, _pleaseStopThisIsTooMuch, userId);
``` 
It might remind you of the infamous spaghetti mess. But fear not, there's a cleaner approach. Let me share a neat trick I've brewed up!

### Step into the World of ConverterFactory
A `ConverterFactory` is like a genie granting your converter wishes.
``` csharp
public class ConverterFactory
{
    private readonly IServiceProvider _serviceProvider;

    public ConverterFactory(IServiceProvider serviceProvider)
    {
        _serviceProvider = serviceProvider;
    }

    public IConverter<InType, OutType> GetConverter<InType, OutType>()
    {
        var converter = _serviceProvider.GetService(typeof(IConverter<InType, OutType>));
        if (converter == null)
        {
            throw new Exception("Missing converter alert!");
        }

        return (IConverter<InType, OutType>)converter;
    }
}
``` 
### Boot Things Up in Startup.cs
Here's where we align our forces. Add your services to the service collection:
```csharp 
services.AddTransient<ConverterFactory>();
services.AddTransient<IConverter<Dog, DogDto>, DogConverter>();
services.AddTransient<IAnimalRepository, AnimalRepository>();
services.AddTransient<IFoodService, FoodService>();
``` 

### Smooth Operations with DogHelper
With everything set, it's showtime:
```csharp 
public class DogHelper
{
    private readonly ConverterFactory _converterFactory;
    public DogHelper(ConverterFactory converterFactory)
    {
        _converterFactory = converterFactory;
    }

///...
    public DogDto TransformDog(Dog input)
    {
        var converter = _converterFactory.GetConverter<Dog, DogDto>();
        return converter.Convert(input);
    }
}
```

What's the magic? No more manually creating converter instances and wrestling with services. Dependency injection sweeps in, handling all the heavy lifting ensuring cleaner and more efficient code. 

## Wrapping Up: A Fresh Look at Tools and Tactics
### Is Automapper Outdated? Let's Debate
Let me drop a bombshell: Could Automapper be sliding into obsolescence? I recently found myself locked in a spirited dialogue with a colleague about its continuing relevance. The crux of the debate? Automapper's Achilles' heel is its runtime error reporting. Get a property name or type conversion wrong, and you're signing up for bug city.

Sure, Automapper shone when replicating models that were virtually identical, especially those property-heavy behemoths we often see in enterprise settings. But let’s be real: Visual Studio's ultra-efficient auto-code completion has redefined the game, making that argument a little wobbly.

### ConverterFactory: A Quick Fix, But Not a Cure-All
Time to tackle the not-so-hidden issue: If you find yourself leaning heavily on something like a ConverterFactory, coupled with dependency injection, it might be time to sniff out potential architectural odors. Could it be a red flag suggesting you revisit your system’s blueprints?

## The Final Takeaway
So, there we are! Whether you're nodding along or vigorously shaking your head, my hope is that this exploration has sparked some intellectual kindling. Got a different approach? Differing opinions? Lay it on me. Let's remember that achieving perfection is less a destination and more an ever-evolving journey. There's always room for development and refinement in the ever-changing tech landscape. So go ahead, share your insights—I'm more than ready for a good round to disscuss!

Shiki is arguably the most popular syntax highlighter out there. How can we improve its performance?

Caching Shiki for Faster Build Times

Shiki is arguably the most popular syntax highlighter out there. It uses the [TextMate grammar system](https://macromates.com/manual/en/language_grammars) with the [VS Code Oniguruma library](https://github.com/microsoft/vscode-oniguruma) to tokenize strings which then can be stylized using VS Code themes or CSS variables. Shiki is the way to go if you want your code to look exactly like that in VS Code.

> Using Shiki is practical because as your favorite languages and themes evolve, your syntax highlighting will evolve as well.

If you're here for the faster build times, go to [faster build times](#faster-build-times). If you've never heard of or used Shiki before, here's a great introduction:

## How does it work?

Although Shiki has a lot of customization options (themes, languages, and custom renderers), at its core, Shiki's [highlighter](https://github.com/shikijs/shiki/blob/main/packages/shiki/src/highlighter.ts) is incredibly easy to work with:

1. Call `getHighlighter` with the theme and languages you need to create a `highlighter` instance, and then
2. Use the `highlighter` methods, such as `codeToHtml`, to take a string of code and transform it to syntax-highlighted HTML.

Of course, there are more details, so make sure to check out [Shiki's configuration and options](https://github.com/shikijs/shiki/tree/main#configuration-and-options). However, if you want to keep things simple, here's how you'd get started:

```js
import { getHighlighter } from "shiki";

// Create a highlighter instance
const highlighter = await getHighlighter({
  theme: "nord",
  langs: ["ts"],
});

const code = `console.log("Here is your code.");`;

// Call a highlighter method to get syntax-highlighted HTML
const output = highlighter.codeToHtml(code, { lang: "ts" });
```

## What are the easiest customizations you can use?

### Using CSS variables for theming

One of the biggest things missing in Shiki is the lack of support for light/dark or dual-theming. While there are several solutions and alternatives out there, none are directly addressed by the library. If you're not restricted to using VS Code themes, you can use **CSS variables for theming**.

```js
import { getHighlighter } from "shiki";

// Create a highlighter instance
const highlighter = await getHighlighter({
  // ✅ Use CSS variables for theming
  theme: "css-variables",
  langs: ["ts"],
});
```

Then use CSS to style your code and create the theming implementation of your choice. Here's a safe starting point for this:

```css
:root {
  --shiki-color-text: #24292f;
  --shiki-color-background: #ffffff;
  --shiki-token-constant: #0550ae;
  --shiki-token-string: #24292f;
  --shiki-token-comment: #6e7781;
  --shiki-token-keyword: #cf222e;
  --shiki-token-parameter: #24292f;
  --shiki-token-function: #8250df;
  --shiki-token-string-expression: #0a3069;
  --shiki-token-punctuation: #24292f;
  --shiki-token-link: #000012;
}

:root .dark-theme {
  --shiki-color-text: #c9d1d9;
  --shiki-color-background: #0d1117;
  --shiki-token-constant: #79c0ff;
  --shiki-token-string: #a5d6ff;
  --shiki-token-comment: #8b949e;
  --shiki-token-keyword: #ff7b72;
  --shiki-token-parameter: #c9d1d9;
  --shiki-token-function: #d2a8ff;
  --shiki-token-string-expression: #a5d6ff;
  --shiki-token-punctuation: #c9d1d9;
  --shiki-token-link: #000012;
}
```

Note: If you prefer to stick with VS Code Themes you might want to check out Anthony Fu's [Shikiji](https://github.com/antfu/shikiji#lightdark-dual-themes), which is an ESM-focused rewrite of Shiki.

### Using custom renderers and CSS counters for line numbers

Custom renderers allow you to define your own custom rendering rules per each element type. The easiest way to understand how custom renderers work is by creating a renderer for line numbers. Instead of using `codeToHtml`, you can use `codeToThemedTokens` from your highlighter instance to obtain an array of tokens and then call `renderToHTML`, passing your tokens and your custom renderer.

```js
import { getHighlighter, renderToHTML } from "shiki";

// Create a highlighter instance
const highlighter = await getHighlighter({
  // ✅ Use CSS variables for theming
  theme: "css-variables",
  langs: ["ts"],
});

const code = `console.log("Here is your code.");`;

// ✅ Tokenize your code to apply your custom renderer
const tokens = highlighter.codeToThemedTokens(code, "ts");

// ✅ Use your custom renderer to get syntax-highlighted HTML
const output = renderToHTML(tokens, {
  elements: {
    line({ children, className, index }) {
      return `<span data-line=${index}
        class=${className}>${children}</span>`;
    },
  },
});
```

You can combine renderers with CSS to create any implementation you might need. Here is an example using [CSS Counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) (with a touch of TailwindCSS) for this purpose:

```css
.shiki code {
  @apply grid p-5 font-mono text-sm leading-normal;
}

code {
  counter-reset: line;
}

code > [data-line]::before {
  counter-increment: line;
  content: counter(line);
  @apply mr-6 inline-block w-4 text-right text-gray-500/50;
}

code[data-line-numbers-max-digits="2"] > [data-line]::before {
  @apply w-8;
}

code[data-line-numbers-max-digits="3"] > [data-line]::before {
  @apply w-12;
}
```

A font pairing that I've enjoyed recently is [Schibsted Grotesk](https://fonts.google.com/specimen/Schibsted+Grotesk) with [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono?query=IBM+PLex+Mono). Alright, now let's get to what we're here for _How to get faster build times using Shiki?_

## Faster build times

Regardless of how you use Shiki, the more code you highlight, the more likely it is that you will run into performance issues. After testing, our team concluded that **(a) creating Highlighter instances, (b) loading languages, and (c) generating token explanations are Shiki's most resource-intensive operations**.

> You should make sure that the Highlighter instance is only created once, and that it is bootstrapped asynchronously before calling any of the exposed functions

Shiki provides you with the flexibility to create the implementations you need to meet your syntax highlighting requirements, but you should exercise caution when using this flexibility. There's no built-in caching system or checks to make sure that the Highlighter instance is only created once, so you'll need to create your own.

Creating a caching system doesn't have to be overly complicated. By leveraging [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and abstracting the `getHighlighter` method, you can achieve this.

```ts
import shiki, { type Highlighter, type Theme, type Lang } from "shiki";

// ✅ Use Map to store Highlighter instance promises
const highlighterCache = new Map<string, Promise<Highlighter>>();

export async function getHighlighter({
  theme,
  langs,
}: {
  theme: Theme;
  langs: Lang[];
}) {
  // ✅ Generate identifiers for your instances, check and return if found
  const key = [theme, ...langs].join("-");
  const highlighter = highlighterCache.get(key);
  if (highlighter) return await highlighter;

  // ✅ If an instance hasn't been created, store it and return it
  const highlighterPromise = shiki.getHighlighter({ theme, langs });

  highlighterCache.set(key, highlighterPromise);
  return await highlighterPromise;
}
```

### A word on Shiki's explanations

Shiki's explanations are the biggest hidden bottleneck, though. Understanding Shiki's explanations is key to optimizing performance. Explanations are set to `false` if you're using `codeToHtml`, but with `codeToThemedTokens` you'll find the option: `includeExplanation`, which annotates this option and describes explanations as:

> Whether to include an explanation of each token's matching scopes and why it's given its color. It defaults to false to reduce output verbosity.

Interestingly enough, explanations are considered and included in the source code for both methods. They are exposed to the developer only with `codeToThemedTokens` and documented with a default value of `false`. However, **it turns out that the default value for this option is set to true**, so if performance is your concern and you do not need to make use of explanations, set this option to `false`.

```js
import { getHighlighter } from "@lib/shiki"; // Shiki Cache Abstraction
import { renderToHTML, type Theme, type Lang } from "shiki";

/** ✅ Config */
const theme: Theme = "css-variables";
const lang: Lang = "ts";

const highlighter = await getHighlighter({
  theme,
  langs: [lang],
});

const code = `console.log("Here is your code.");`;

// ✅ Avoid getting explanations if you do not need them
const tokens = highlighter.codeToThemedTokens(code, lang, theme, {
  includeExplanation: false,
});

const output = renderToHTML(tokens, {
  elements: {
    line({ children, className, index }) {
      return `<span data-line=${index}
        class=${className}>${children}</span>`;
    },
  },
});
```

## Final thoughts

If you're using any flavor of markdown and do not need control over Shiki, plugins like [Rehype Pretty Code](https://github.com/atomiks/rehype-pretty-code), which integrate custom renders and caching systems, are excellent choices that align with the concepts explored in this article.

This simple caching and setup solution made our build times a remarkable **80% faster**. We tried various other suggestions, but none worked as effectively as creating a caching system for Shiki Highlighter instances. By implementing these strategies, you can ensure a smoother and faster syntax highlighting experience for your projects.

Here are a couple of things to keep in mind:

- The keys used to identify instances are prone to duplicates if Highlighter instances are created using different aliases, i.e. `typescript` and `ts`. Check Shiki's [language aliases](https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages) and make sure your team has a convention for their use.
- You might not need to build your own caching system. If you aren't using Shiki directly, chances are that this has already been addressed by the libraries you're using.
- Using Shiki in the browser might require a different approach, make sure to check [Shiki's architecture to learn more](https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages).

Huge thanks to: [@ChcJohnie](https://github.com/ChcJohnie) and [@ericvalcik](https://github.com/ericvalcik) for these findings.

The Hidden Costs of Misusing Scheduled Jobs and Messaging Systems

It's a common scenario we've all faced: you've got a table and a scheduled job designed to process this table.

Below is a simplified example of what such a script might look like:
```sql
-- Declare a variable to store the ID of the row to be processed
DECLARE @rowID INT

-- Get the first row from the table to process
SELECT TOP 1 @rowID = ID
FROM TableToProcess
ORDER BY ID ASC

-- Check if a row was found
IF @rowID IS NOT NULL
BEGIN
    -- Perform processing on the selected row (You can put your processing logic here)
    -- For now, we'll add a comment to indicate where the processing happens

    -- Delete the processed row from the table
    DELETE FROM TableToProcess WHERE ID = @rowID
END
```

But what happens when there's no new data to process? Without any contingency, the script will repeatedly hammer your database with fruitless calls, generating redundant traffic and potentially impacting the performance of your entire system.

Now, don't get me wrong. Scheduled jobs are not the enemy. They have a critical role in certain situations, such as scheduling regular email alerts. However, as developers, we sometimes fall into the trap of over-reliance on this tool, leading to unnecessary overhead within our systems.

So, is there a better, more efficient alternative to deal with these situations? Welcome to the realm of messaging systems.

## So, What's a Messaging System?

In essence, a messaging system provides a reliable way to exchange information (in the form of messages) between applications, systems, or services. The main idea here is to enable communication between different components without them necessarily knowing about each other. 

In a messaging system, producers create messages and put them onto the system. Consumers get those messages and do something with them. These systems are crucial for enabling asynchronous processing, meaning that your components don't have to wait around for other tasks to finish. This can significantly enhance performance, scalability, and reliability.

## Message Flow vs Scheduled Task

### Advantages

1. **Real-time Processing**: Messages are processed as they arrive, leading to faster responses.
2. **Decoupling of Processes**: Allows systems to be developed, upgraded, and scaled independently.
3. **Improved Scalability**: Messaging systems can more easily scale to handle larger loads.
4. **Reduced Database Load**: By processing data as it comes in, constant database querying can be reduced.
5. **Resilience**: Messaging systems can handle failures without losing data.

### Disadvantages

1. **Complexity**: Messaging systems come with their own complexities that require more advanced understanding and maintenance.
2. **Handling Failures**: Although resilient, handling failures, "poison messages," and ensuring message ordering can be challenging.
3. **Infrastructure Requirements**: Establishing and maintaining a robust messaging system might require significant resources and expertise.


## Popular Messaging System Implementations

Now that you've got a taste of a messaging system let's dive into some popular implementations: Azure Service Bus, Kafka, Azure Queue System, and RabbitMQ. 

### Azure Service Bus

Azure Service Bus is a fully managed service from Microsoft Azure that supports queue and topic, messaging models. It's robust, provides guaranteed message delivery, and maintains the order of messages. Here's an example of sending a message with Azure Service Bus in C#:

```csharp
ServiceBusClient client = new ServiceBusClient("<connection_string>");
ServiceBusSender sender = client.CreateSender("<queue_name>");

ServiceBusMessage message = new ServiceBusMessage("Hello, World!");

await sender.SendMessageAsync(message);

Console.WriteLine($"Sent a single message to the queue: {sender.EntityPath}");
```

And here is how would consumer look like 
```csharp
string connectionString = "<connection_string>";
string queueName = "<queue_name>";

await using (ServiceBusClient client = new ServiceBusClient(connectionString))
{
    ServiceBusProcessor processor = client.CreateProcessor(queueName, new ServiceBusProcessorOptions());

    processor.ProcessMessageAsync += async args =>
    {
        string body = args.Message.Body.ToString();
        Console.WriteLine($"Received message: {body}");
        await args.CompleteMessageAsync(args.Message);
    };

    processor.ProcessErrorAsync += args =>
    {
        Console.WriteLine($"Error occurred: {args.Exception}");
        return Task.CompletedTask;
    };

    await processor.StartProcessingAsync();

    Console.WriteLine("Press any key to stop receiving messages...");
    Console.ReadKey();

    await processor.StopProcessingAsync();
```

And if you start using Azure function the implementation if even shorter and simple!

```csharp
[FunctionName("ServiceBusConsumer")]
public static async Task Run(
    [ServiceBusTrigger("<queue_name>", Connection = "<connection_string>")] string messageBody,
    ILogger log)
{
    log.LogInformation($"Received message: {messageBody}");

    // Process the message (you can replace this with your custom logic)

    // Note: Unlike the previous examples, the message is automatically marked as completed (removed from the queue) by the Function after successful processing.
}
```

### Azure Queue System

Azure Queue System is another Microsoft offering specifically for storing large numbers of messages that may be accessed from anywhere via authenticated calls. It's simpler than Azure Service Bus and perfect for light workloads. An example of sending a message with Azure Queue in C# looks like this:

```csharp
QueueClient queueClient = new QueueClient("<connection_string>", "<queue_name>");
string message = "Hello, World!";
await queueClient.SendMessageAsync(message);
```

### Kafka

Apache Kafka, an open-source system, is built to handle real-time data feeds with high throughput and low-latency. Kafka operates in a distributed manner and can handle massive amounts of data. Here's a simple example of producing a message with Kafka using Java:

```java
Properties props = new Properties();
props.put("bootstrap.servers", "localhost:9092");
props.put("key.serializer", "org.apache.kafka.common.serialization.StringSerializer");
props.put("value.serializer", "org.apache.kafka.common.serialization.StringSerializer");

Producer<String, String> producer = new KafkaProducer<>(props);
ProducerRecord<String, String> record = new ProducerRecord<>("test", "Hello, World!");

producer.send(record);
producer.close();
```



### RabbitMQ

RabbitMQ is another open-source messaging system known for its robustness. It supports multiple messaging protocols, message queuing, delivery acknowledgment, flexible queue routing, and more. Here's a Python example of sending a message with RabbitMQ:

```python
import pika

connection = pika.BlockingConnection(pika.ConnectionParameters('localhost'))
channel = connection.channel()

channel.queue_declare(queue='hello')

channel.basic_publish(exchange='', routing_key='hello', body='Hello, World!')

print(" [x] Sent 'Hello, World!'")
connection.close()
```

There you have it. Keep your system from getting bogged down by an overload of scheduled tasks. Give messaging systems a try and watch your application's performance and scalability reach new heights. Whether you go for a fully managed service like Azure Service Bus or Azure Queue System or an open-source option like Kafka or RabbitMQ, you'll reap the benefits of reliable, scalable, and high-performance messaging.