疯了吧！这帮人居然用 Go 写“前端”？（二）

最新推荐文章于 2025-09-25 11:07:47 发布

原创

最新推荐文章于 2025-09-25 11:07:47 发布 · 608 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#云原生 #前端 #go #paas #go语言

本文深入探讨使用Go语言进行前端开发，通过组件渲染和协议渲染实现前后端彻底分离。组件渲染通过通用组件和props实现不同场景，协议渲染处理组件间的联动，从而在动态层面解耦前后端。通过这种方式，前端仅关注呈现，后端关注数据，达到关注点分离，简化开发流程。

在这里插入图片描述

作者｜郑嘉涛（羣青）
来源｜尔达 Erda 公众号

前言

上篇我们讲了故事发生的背景，也简单阐述了组件及协议的设想：

一、丰富的通用组件库。
二、组件渲染能力，将业务组件渲染成通用组件。
三、协议渲染能力，以处理复杂交互。

以及这种开发模式带来的好处：

这样的设计初衷旨在大量减少前端工作，尤其是前后端对接方面，甚至可以认为对接是“反转”的，体现在两个层面：接口定义的反转和开发时序的变化。

如果你对我们的设计思路还不够了解，可以先阅读上篇：《疯了吧！这帮人居然用 Go 写“前端”？（一）》。

本篇我将更细致地介绍组件渲染和协议渲染，以及如何通过这两种渲染做到前端彻底不关注业务。

当然最后你会发现是否 REST 并非重要，重要的是合理的切分关注点，而框架只是运用切分的帮助手段。

组件渲染

具体而言，针对一个通用组件，如何完成业务逻辑？

比如说下面同样的一个卡片组件（Card），它由通用的元素构成和呈现：
在这里插入图片描述

cardComp:
  props:
    titleIcon: bug-icon
    title: Title
    subContent: Sub Content
    description: Description

但是，通过不同的 props，可以渲染出不同的场景。

场景 1：需求卡片

在这里插入图片描述

kanbanCardComp:
  props:
    titleIcon: requirement-icon
    title: 一个简单的需求
    subContent: 完成容器扩容不抖动
    description: 需要存储记录用户的扩容改动，通过调用内部封装的 k8s 接口以实现。

场景 2：打包任务卡片

在这里插入图片描述

taskCardComp:
  props:
    titleIcon: flow-task-icon
    title: buildpack (java)
    subContent: ✅ success
    description: time 02:09, begin at 10:21 am ...