Deep Dive into Our Near Future Architecture

### Deep Dive into Our Near Future Architecture

Some of you have been asking for a deep dive into our architecture, and we've been listening to your feedback. These valuable inputs have driven us to make some significant changes to our framework. This blog post aims to clarify these topics and delve into our new architecture. Rest assured, this won't be a breaking change but an evolution. All sites should seamlessly transition to this new architecture since many of the changes are already in use.

### The Evolution of deco.cx

deco.cx is a full-stack web IDE that combines CMS and hosting into a single powerful engine. This engine is adept at editing website content, rendering pages, routing, A/B testing, segmenting users, and proxying requests. Initially, we started with a monolithic framework approach using a library called `deco`, which was responsible for all features deco.cx offers. This included code for updating content, routing requests, segmenting users, and more.

As we progressed, it became evident that we needed to split the CMS from the hosting components.

### Control Plane vs. Data Plane in Software Engineering

In software engineering, the distinction between the control plane and the data plane is crucial. The control plane is responsible for managing configurations and policies, essentially deciding how data should be handled. In contrast, the data plane is responsible for the actual processing and forwarding of data based on the control plane's decisions. This separation allows for more efficient and scalable system management.

### Deco 2.0: The Split

We implemented this split in our previous release of deco 2.0, and we've been refining it ever since. Currently, deco.cx is divided into two main components:

1. **CLI**: This command-line interface manages a collaborative, AI-native, git-based CMS for editing and managing websites. The CLI operates on any git repository and connects it to your admin panel inside deco.cx, enabling all the features deco.cx offers.
2. **Runtime**: This component runs and executes what the CLI generates. The runtime integrates with any framework of your choice (such as Fresh, Next.js, or Hono) and interprets the configurations set by the CMS.

### Example: Starting a New Hono Project on deco.cx

To illustrate how these components come together, we'll create a new deco.cx-powered Hono app.

1. **Create a Project**: Start by creating a project from the scratch template on deco.cx. The video below shows the creation process: [Insert Video]

2. **Clone the Repo**: Once deco.cx has created a repo for us, clone this repo and remove all files.

3. **Connect to Admin Panel**: Connect your local repository to deco's admin panel by creating a `.env` file with these two required environment variables (DECO_SITE_NAME and DECO_ENV_NAME). Then, run deco's CLI with:
```sh
deno run -A https://deco.cx/run
```

4. **Open Admin Panel**: Now, open deco.cx's admin. We have a fully working admin! Here we can browse files, create pages/sections files, and more. However, the repository is currently empty.

5. **Create Hono App**: To create content, let's use the create-hono-app. (Keep in mind that you could use create-next-app or any other TypeScript-based framework you'd like).
[Insert Video of running the command]

6. **Add Runtime**: Next, we need to add our runtime. Though some documentation is still to come, we'll do it for our current example. Start by adding deco as a dependency, then add the required files and tightly integrate with Hono (or any other framework like Next.js).

7. **Run the CLI Alongside the Hono App**: For this, we need to tell our CLI how to run your app. This is done by passing the start command to the CLI like so:
```sh
deno run -A --env https://deco.cx/run -- deno task start
```

We are now able to create sections and loaders on the deco CMS, and we have a server for previewing these changes.

### Creating a New Section for Our Favorite Stack: deco + Hono + htmx

Although we've been seeing great evolution in frameworks like Next.js, Fresh, Astro, etc., we were born out of the edge computing. Also, we see that most of our customers (ecommerces) have very specific use cases that are not really well served by these shelf frameworks. For this, we've been working on a proprietary stack (deco + Hono + htmx) that leverages a revolutionary rendering technique called async rendering, which we see as more fitting for these ecommerce cases.

This specific stack is suited for using our hosting service and empowers the power of the edge for unmatched performance.

### Conclusion

deco.cx as a CMS can be used with any framework, and you can deploy these frameworks anywhere. Additionally, we provide a custom stack based on Hono and htmx, along with a hosting service tailored for it.

We hope this deep dive has provided clarity on our new architecture and how it benefits your projects. We are committed to making this article a reality, and new documentation will soon be available. As always, we welcome your feedback and look forward to seeing what you build with deco.cx!