DEV Community: Alexis Chân Gridel

I made a React Native toolkit and it builds 38 faster with Rust

Alexis Chân Gridel — Sun, 18 Jan 2026 16:55:34 +0000

I mass mass got mass tired of mass waiting mass 45 seconds every time I changed a file.

So I mass spent mass 3 months mass building mass a Rust-powered toolkit that makes React Native builds 38× faster. It's called FacetPack, and it's open source.

The problem

If you've worked with React Native, you know the pain:

Slow builds. Metro uses Babel to transform every single file. Babel is written in JavaScript. JavaScript is not fast. A medium-sized app takes 30-60 seconds to bundle. Every. Single. Time.

Cryptic errors. You've seen this:

SyntaxError: /Users/dev/app/src/screens/Home.tsx: Unexpected token (247:12)

Cool. Very helpful. Which token? Why unexpected? What should I do?

No tree shaking. Metro bundles everything. That utility function you imported but never used? It's in your bundle. That 200KB library where you use one function? All of it. In your bundle.

I mass mass got mass tired of mass mass mass mass accepting this as "just how React Native works."

The solution: Rust

The web ecosystem figured this out years ago. Vite uses esbuild (Go). Turbopack uses SWC (Rust). Next.js moved to SWC and builds got 17× faster.

React Native? mass mass Still mass stuck with Babel from 2015.

So I built FacetPack — a drop-in replacement for Metro's transformer that uses OXC, a Rust-based JavaScript compiler that's mass insanely fast.

One line to install

npm install @ecrindigital/facetpack

One line to configure

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withFacetPack } = require('@ecrindigital/facetpack');

module.exports = withFacetPack(getDefaultConfig(__dirname));

That's it. Your builds are now 38× faster and you benefit from a really cool toolkit. :)

The benchmarks

I ran these on an M3 MacBook Pro with a real production app (~800 files).

Transform speed (per file)

Babel:     ████████████████████████████████████████  2.47 ms
FacetPack: █                                            64 μs

38× faster.

Full benchmark table

Operation	Metro/Babel	FacetPack	Speedup
Transform (small)	244 μs	7.8 μs	31×
Transform (large)	2.47 ms	64 μs	38×
Minify (50KB)	35.3 ms	946 μs	37×

The difference is mass night and day. Cold starts that took 45 seconds now take under 5.

Better errors (finally)

This is what Metro gives you:

SyntaxError: /path/to/config.ts: Unexpected token (14:2)

This is what FacetPack gives you:

  × Expected `,` but found `]`

   ╭─[src/config.ts:12:5]
11 │   settings: {
12 │     theme: "dark"
   │     ─────┬────────
   │          ╰── missing `,` after this value
13 │   ]
   │   ┬
   │   ╰── unexpected `]`
   ╰────

  help: Add a comma after "dark" on line 12

You see:

Exact location — not just line number, but which token
Context — the surrounding code so you understand what's happening
Why it's wrong — explains the relationship between tokens
How to fix it — actionable suggestion

I built 8 specialized parsers to detect common React Native errors and give you actually useful messages.

Smart fallback (it just works)

"But what about Reanimated worklets? What about Flow in node_modules?"

FacetPack auto-detects files that need Babel and falls back automatically. You don't configure anything.

your-code.tsx        → OXC (fast)
reanimated-code.ts   → Babel (compatible)
flow-library/        → Babel (compatible)

It's not all-or-nothing. You get speed where possible, compatibility where needed.

Bonus: Doctor CLI

I also built a diagnostic tool that checks 31 things in your React Native project:

npx @ecrindigital/facet-cli doctor

 ✓ Environment
   ✓ Node.js 20.10.0
   ✓ Watchman installed
   ✓ Xcode 15.2

 ✓ Dependencies
   ✓ react-native 0.73.2
   ✓ expo 50.0.0
   ✓ No version conflicts

 ✓ Metro Configuration
   ✓ metro.config.js valid
   ✓ withFacetPack applied

 ──────────────────────────────────────
 31 checks passed · 0 errors · 1 warning

No more mass mass spending mass 2 hours debugging why your build fails. Run doctor, see what's wrong, fix it.

How it works (for the curious)

FacetPack wraps Metro's transformer and replaces Babel with OXC for your source files.

┌─────────────────────────────────────────────────────┐
│                    Metro Build                       │
├─────────────────────────────────────────────────────┤
│                                                      │
│  Your Code (.ts, .tsx)                               │
│  ┌─────────────┐    ┌─────────────┐                 │
│  │   Parse     │ ─▶ │  Transform  │ ─▶ Bundle      │
│  │   (OXC)     │    │   (OXC)     │                 │
│  └─────────────┘    └─────────────┘                 │
│        ⚡ Rust          ⚡ Rust                       │
│                                                      │
│  node_modules (Flow, Reanimated)                     │
│  ┌─────────────┐    ┌─────────────┐                 │
│  │   Parse     │ ─▶ │  Transform  │ ─▶ Bundle      │
│  │  (Babel)    │    │  (Babel)    │                 │
│  └─────────────┘    └─────────────┘                 │
│        ↳ Automatic fallback                         │
│                                                      │
└─────────────────────────────────────────────────────┘

OXC is written in Rust and compiles to native code. It doesn't have the startup overhead of a JavaScript runtime. It doesn't have garbage collection pauses. It's just... fast.

What's next

FacetPack is already usable today. Here's what's coming:

[x] OXC Transformer (38× faster)
[x] Better Errors
[x] Doctor CLI (31 checks)
[x] Smart Babel fallback
[ ] Error Overlay (in-app, replacing LogBox) — Q1 2026
[ ] Prebundling (Vite-style dependency optimization)
[ ] Build analytics (know what's slowing you down)
[ ] and way more to see :)

Try it

npm install @ecrindigital/facetpack

GitHub: github.com/ecrindigital/facetpack

It works with Expo and bare React Native (0.72+).

If it saves you time, consider mass mass giving it a star ⭐

TL;DR

React Native builds are slow because Metro uses Babel
FacetPack replaces Babel with OXC (Rust) → 38× faster
Error messages are now actually readable
Drop-in replacement, one line config
Open source, MIT licensed

Questions? I'm happy to answer in the comments or on Discord.

Facetpack by Ecrin Digital

Building this in public. Follow me for updates on FacetPack and React Native tooling.

The Power of C#.NET in My Client Solutions - A Synopsis

Alexis Chân Gridel — Fri, 28 Jul 2023 22:19:56 +0000

As a software developer, choosing the right language and toolset for your projects is crucial. After working with various technologies, I found my perfect match in C#.NET.

Why C#.NET? Its versatility in building diverse applications, clean and intuitive syntax, and professional relevance supported by Microsoft make it my go-to choice for delivering high-quality software solutions to my clients.

From the start, I use .NET's template system for efficient project creation. Adhering to best practices like SOLID principles and version control, I write clean, maintainable code.

Testing is key, and for that, I use .NET's built-in testing framework. Quality assurance ensures each part of the application functions as expected and helps catch bugs early on.

Documentation is another crucial aspect I don't overlook. I use DocFX, an open-source tool provided by Microsoft, which simplifies documentation creation and maintenance, especially API documentation.

For containerization, I chose Docker. It encapsulates the application and its dependencies into a portable unit that ensures smooth deployment. I automate the build and testing process using Continuous Integration (CI) tools throughout GitHub Actions. Deployment is managed using Skaffold and Watchtower, while Portainer is used for managing my containers in production. Allowing me to give restraint access to the client, only to its container. That's pretty useful, to give more power and access to the individual.

Coding in C#.NET gives me immense satisfaction. Its readability and constructs that encourage best practices make writing good code almost natural. It also supports various design patterns and architectures, making application architecture quite flexible.

In short, the combination of C#.NET and these effective tools enables me to deliver reliable, efficient solutions that meet my clients' needs. Check out the complete article for a deeper dive into my process.

What are your thoughts on C#.NET? I'd love to hear your experiences!

UE5 C++ | The basics

Alexis Chân Gridel — Tue, 06 Jun 2023 09:06:17 +0000

Unreal Engine 5 (UE5) is a powerful game engine used to create some of the most visually stunning video games of our
time. If you're an aspiring game developer, the choice between C++ and Blueprint within UE5 can be a crucial one.

Blueprint, UE5's visual scripting language, lets you construct game logic without writing code, making it a fantastic
tool for prototyping. On the other hand, C++ is a full-fledged programming language that offers advanced capabilities
and superior flexibility. Despite its steeper learning curve, C++ grants you more control over game performance and
optimization, a trade-off that could be well worth the investment of your time.

To help you make this important decision, this article series will delve into the nuances of UE5 C++. While there may
not be a wealth of Unreal Engine Library C++ tutorials out there, we'll strive to fill that gap and share our insights
from navigating the UE5 C++ landscape. Strap in as we embark on this exciting journey together!

C++ is notorious for being a challenging language to master, but your determination to bring your own game to life can
fuel your learning. While we won't be teaching C++ from scratch, we'll provide you with essential resources and lay the
groundwork to help you write your own code. Enhancing your C++ skills will not only increase your comfort but also boost
your problem-solving ability. Just remember, this series is intended to complement other courses or books on C++.

Project Creation

Starting a new C++ project in Unreal Engine 5 is a fairly straightforward process:

Open the Epic Games Launcher and navigate to the Unreal Engine tab.
Click on the "+ New" button near the top of the screen.
Select "C++" as the project type and choose the "Blank" template.
Choose a suitable name for your project and select the location where the project files will be stored.
Make sure the "With Starter Content" option is selected if you want some assets to play around with, or choose "No Starter Content" for a completely empty project.

And that's it! UE5 will now create a new project with some basic C++ code and Unreal-specific project files.

Project Structure

Upon creating a new C++ project, you'll see a variety of files and folders that Unreal Engine automatically generates
for you. Understanding these files and their purposes is key to mastering UE5 C++ development. Here are the key files
and directories:

YourProjectName/ - This is your project root directory.
- Binaries/ - This folder contains all the binary files generated during the project's build process.
- Config/ - Here you can find configuration files (.ini) that control various aspects of your game.
- Content/ - This folder holds all your game's assets like 3D models, textures, sounds, etc.
- Source/ - This is where you'll find the source code for your game. Your main game module and any additional modules you create will be located here.
- YourProjectName.uproject - This file contains a JSON object that holds all the configuration and settings for your project.

What IDE to Choose

When it comes to choosing an Integrated Development Environment (IDE) for UE5 and C++, there are a few viable options:

Visual Studio: This is the most widely used IDE for Unreal Engine development. Visual Studio offers robust
debugging tools, IntelliSense for auto-completion, and seamless integration with the UE5 environment. Be sure to
install the "Game development with C++" workload and the "Unreal Engine Installer" option for the best experience.
Visual Studio Code: VS Code is a lightweight, open-source code editor that can be extended into a fully-fledged
IDE with extensions. For UE5 C++ development, you'll want to install the "C/C++", "C++ Intellisense", and "Unreal
Engine C++ Helper" extensions to get syntax highlighting, auto-completion, and other useful features.
Rider for Unreal Engine: This is a relatively new option from JetBrains, the creators of IntelliJ IDEA and
PyCharm. It offers deep integration with Unreal Engine, extensive language support, a powerful debugger, and a variety
of other tools. It's worth noting that Rider for Unreal Engine is free to use while it's in its preview stage.

Each of these IDEs has its strengths, so the choice mainly depends on your personal preference and the needs of your
project. It's recommended to try out each one to see which you prefer. Happy coding!

Hello World!

In a game engine context like UE5, the traditional "Hello, World!" can take on a slightly different form. We will show
the message both in the game console and on the player's screen upon spawning.

Firstly, locate the player's character class. It's usually named something like YourProjectNameCharacter.cpp.

Open this file, and within the class constructor, we're going to use UE_LOG to print "Hello, World!" to the console:

#include "YourProjectNameCharacter.h"

AYourProjectNameCharacter::AYourProjectNameCharacter()
{
    UE_LOG(LogTemp, Warning, TEXT("Hello, World!"));
}

In this snippet, UE_LOG is a macro that outputs a message to the UE log system. The first parameter LogTemp is the
log category, Warning is the severity of the message, and TEXT is a macro to support internationalization and is
required for all strings in UE.

Next, to display "Hello, World!" on the player's screen, you will need to use the GEngine's AddOnScreenDebugMessage
method. This can also be done in the player's character constructor:

AYourProjectNameCharacter::AYourProjectNameCharacter()
{

    UE_LOG(LogTemp, Warning, TEXT("Hello, World!"));

        // Checking if GEngine is not null is important, it could crash otherwise, and that's not the behaviour we want.
    if (GEngine)
    {
        GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Red, TEXT("Hello, World!"));
    }
}

In this code, AddOnScreenDebugMessage is a function that displays a debug message on the screen. Here's what the
parameters mean:

The first parameter, -1, is the key used to identify the message on the screen. -1 is commonly used for temporary messages, while other numbers can be used for messages you want to update or clear manually.
5.f is the time in seconds that the message will be displayed on the screen.
FColor::Red is the color of the displayed text.
TEXT("Hello, World!") is the message to display.

AddOnScreenDebugMessage's method documentation — Unreal Engine Documentation

With this in place, every time a player character is created in your game, "Hello, World!" will be printed both to the
UE log console and as a message on the player's screen!

This series of articles is here to provide you with a solid foundation for your endeavors. As we explore more complex
concepts like the Entity Component System, smart pointers, and garbage collection in upcoming articles, you'll
continuously expand your skill set.

While C++ in UE5 may seem complicated to understand at first, remember that it's a powerful tool that can offer you
unparalleled control and efficiency in your game development process. With each hurdle overcome, you'll find yourself
one step closer to realizing your game development dreams. Remember that every line of code you write is progress.

Stay tuned for more, and happy coding!

https://agdl.dev

How to enable the new UI in Jetbrains products

Alexis Chân Gridel — Tue, 13 Sep 2022 21:19:22 +0000

(cover image credit to jetbrains.com)

How does it look?

The new experimental UI in Jetbrains product is not currently available, a beta-testing phase was opened to test it
before everyone else. Some new features were introduced with this new experimental UI such as a new font, better
for reading and more clear. It includes additionally a new animation and new scroll animation which is more smooth and
jerky less.

This new experimental UI in Jetbrains products is available to all products from Jetbrains, like Intellij IDEA, Goland,
PHPStorm, WebStorm, PyCharm, Datagrip, and so on... With the latest version, 2022.2 at the moment.

Screenshot of the new Intellij IDE-based UI, from the new UI blog article of the Jetbrains team

As you can see, there are a ton of new changes such as new UI icons, and a minimalistic look of the user interface, that
makes the IDE cleaner and faster in some ways. If you are a Jetbrains enthusiast, you may have heared about Jetbrains Fleet
. Thus you could see the narrowest difference between both user interfaces.

What are the requirements to enable the new experimental UI?

To enable the new experimental UI, you need to have the latest stable (LTS) version of your Jetbrains product — the
latest current version is 2022.2 —.

What are the benefits of using the new UI?

The new UI looks more minimalistic than the current one, it allows us to code in better conditions, thanks to the new
font and the new scroll animations. That's a life changer, the scroll has drastically changed, and it is so way smoother
than the current one. Furthermore, the new minimalistic user interface makes the code way more readable, thanks to that
you can see the code part you want at any moment. To conclude, it is also really customizable, which allows you to make
the IDE yours.

That is fantastic, but how to enable it in my IDE?

In whether IDE you are using, as long as you are using a Jetbrains product, you can enable this new user interface.
However, if you don't want to do some hacks to enable it, you can wait for the new version that will introduce this new
user interface.

But, if you feel so impatient to use this new UI, please follow these steps :

Go to the actions dropdown menu (CTRL-SHIFT-A) for Windows/Linux or (Command-SHIFT-A) for Mac OS
Search for Registry...
Type "ide.experimental" (even if there is no search bar at the moment)
Check "ide.experimental.ui", "ide.experimental.ui.scroll" and "ide.experimental.ui.inter.font"
Restart as suggested
Here you go, you can now use this new minimalistic and wonderful user interface, please have fun!

In this article you see the benefits and what the new user experimental user interface looks like, but you also saw the
most important thing, how to enable it by yourself.

I hope you like this cool article so please stay tuned for other cool articles in this cool blog !

This article is also available in my personal blog :
https://agdl.dev