Revolutionize Frontend and Backend Harmony with Phero

The Power of Phero: A Type-Safe Solution for Frontend and Backend Harmony

As a developer, have you ever struggled with syncing backend API changes to the client app? The tedious process of manually updating the client app to prevent errors or crashes can be frustrating. That’s where Phero comes in – a revolutionary solution designed to bridge the gap between frontend and backend development.

What is Phero?

Phero is an open-source, type-safe glue between the backend and frontend, developed using TypeScript. It allows you to call backend services/functions from the frontend just as you would call a local function. With Phero, you can enjoy end-to-end type safety, making it easier to write concise code and refactor with confidence.

The Problem Phero Solves

Let’s consider a typical Node.js/Express web API example. When creating an endpoint, we need to define types and interfaces on both the client and server sides. This duplication can lead to maintenance issues and errors when the API changes. Phero eliminates this problem by generating a type-safe client for the frontend, ensuring seamless communication between the backend and frontend.

How Phero Works

Under the hood, Phero utilizes remote procedure call (RPC) protocol, enabling a program on one machine to call a service on another machine without knowing it’s remote. Phero consists of three components:

1. Client App: Consumes the generated Phero client file when interacting with the server.
2. Server App: Exposes functions through the Phero.ts file, which serves as the entry point.
3. Phero-Generated Code: The glue between the backend and frontend, including client-side and server-side stub files.

Benefits of Working with Phero

• Pure TypeScript (no additional dependencies required)
• End-to-end type safety
• Separate backend and frontend that act like they are not separated
• Works with any TypeScript-based framework

Getting Started with Phero

To build a Phero app, follow these steps:

1. Initialize a Node.js app and create an API directory.
2. Run the Phero CLI to generate a Phero.ts file.
3. Set up the client by running the phero init client command.
4. Start the dev environment with the phero start command.
5. Create a React client app to test Phero end-to-end.

Error Handling with Phero

Phero enables you to handle custom server-side errors in your frontend just like you would with a local function. You can throw errors on the backend and catch them on the frontend, ensuring type safety and ease of error handling.

Deploying to Production

When deploying to production, you can configure the port number and API URL. Phero provides features for exporting and deploying to various cloud platforms, including Node.js, GCloud, and Vercel.

Migrating an Existing App to Use Phero

To migrate an existing server app to Phero, restructure your app to define clear “groups” of functions that need to be called from the frontend. Convert these groups into services in Phero, and migrate routes to regular TypeScript functions.

By embracing Phero, you can revolutionize your frontend and backend development workflow, ensuring better type safety and more concise code. Give Phero a try and experience the power of harmonious frontend and backend development!