导读 ：自从 angular/react/vue 的呈现颠覆了前端开发者开发模式以来，尽管新的前端框架仍然不断涌现，然而迟迟没有一个新的前端框架进入宽广前端开发者的视线。本文会从近两年越来越火的 lowcode/ 微前端登程，探讨在传统前端畛域，下一代前端工程 / 框架的可能方向。

全文 3166 字，预计浏览工夫 6 分钟。

一、lowcode

lowcode 其实一点也不新，通过 GUI、配置化的形式代替传统的手写代码编程，从 sql 语句到 dreamweaver, 基于模型驱动的可视化的编程工具层出不穷。

而近两年 lowcode 的衰亡，笔者认为次要有以下起因：

1. 前端技术体系及工程化体系成熟，许多有谋求的工程师渴望用新的轮子谋求改革式的生产效率冲破；
2. 前端开发者仍旧稀缺；
3.B 端业务衰亡，大厂提前布局，心愿在将来可能商业化从中获利；

而和历史上诸多尝试相比，这次前端 lowcode 平台的衰亡最大的不同: 大多数平台的目标是为了解决普通人的编程问题，而不再是开发者的编程效率问题。

1.1 国内 lowcode 平台

目前利用比拟宽泛的：
易企秀、淘宝天马 这样的基于页面模板搭建，开发人员开发模板（或者开发人员开发模块和模板），经营人员配置页面；阿里云凤蝶、百度爱速搭这样的组件配置平台（能够通过配置组件实现模板性能）。这些平台都肯定水平满足了用户疾速建站的需要，特地是工夫紧、没有开发人力时。

1.2 lowcode 能够解决所有问题吗？

lowcode 平台是为了晋升一部分交互简略的前端开发场景开发效率的，这也就是说对于使用者来说最大的问题在于应用场景及机会的判断上：

• 谁来判断应用哪个 lowcode 的平台，研发还是产品经理？
• 找到平台后，谁来判断哪些业务能够应用平台搭建？
• 谁来搭建？
• 当平台只能满足 99% 需要时怎么办？

所以很多时候，咱们找到了平台，配置了页面，最初发现某个需要实现不了而不了了之。当然，许多平台反对开发人员开发定制模板或者自定义组件，然而， 当你有了自定义组件需要时，基于平台开发还会比自行开发效率高吗？

1.3 场景举例

咱们孵化了一款新的 APP，心愿配置一个简略宣传页，页面内容就是一张背景图，一个下载按钮。
咱们应用平台配置好了页面，也配置好了按钮的下载链接，此时 PM 提出了新需要，当用户曾经装置了 APP 时不再下载而是间接关上 APP，我应该基于平台开发一个自定义的 action 还是本人线下开发下呢？？？

1.4 serverless

当然，lowcode 平台也提供了一些 serverless 的性能，但还是那个问题，谁来评估要不要用 serverless？谁来应用？遇到不反对的问题该怎么办？

二、微前端要解决什么问题

微前端是一种从后端微服务借鉴过去的架构形式。市面上微前端的计划层出不穷，我就不列了，咱们只须要明确下，微前端、前端微服务到底要解决什么问题： 利用服务化、微服务的概念，无效的拆分利用，实现麻利开发和部署，解决大型项目的治理问题。

2.1 场景举例

两个不同团队的业务，须要合成一个：电商平台、视频 PC 公布平台，须要对立到同一个站点，让用户实现公布视频、挂接商品一条门路走通。

当业务简略时，能够让两个团队帮助工作，然而当各自业务越来越简单，会有越来多的问题呈现：

• 技术栈必须对立
• 开发、部署耦合
• 运行时一个业务的 BUG 可能带崩整个零碎

2.2 为什么提到微前端

微前端的衰亡，阐明前端工程复杂度的晋升，越来越多的人遇到相似的架构问题，阐明咱们须要一个更下层的利用框架来帮忙咱们解决相似利用拆分隔离这样的架构问题。

三、前端框架及前端工程化

3.1 前端框架

咱们思考 jQuery/React/Vue 这几个划时代框架 / 类库的共性，会发现他们都是为了解决视图层的问题而诞生的。

这不难理解，传统前端的外围就是视图，如何更快的帮忙前端开发者更好的实现视图开发工作，是大部分前端框架要解决的外围问题。

jQuery 简化了视图层开发的 DOM API，React/Vue 更是绕开了 API，颠覆了页面的开发模式。这个过程中，随着前端技术的倒退，工程化在框架利用中所占比重越来越大，大多数 vue 使用者创立我的项目都是通过 vue cli 创立。

3.2 什么是前端工程化？

工程化是一种思维，次要目标是为了提效，即进步开发效率，缩小不必要的反复工作。工程化常见的方向有模块化、组件化、规范化、自动化 4 个方面。

回顾前端框架的倒退，会发现前端框架的倒退其实和工程化倒退相辅相成，绕开 DOM API、通过工程化实现更低的上手老本 是 vue/react 胜利的基本，而 vue/react 在代码运行侧曾经解决了足够多的问题，前端框架后续的倒退焦点须要更多的偏差工程化。

===

四、下一代前端利用框架

应用高度工程化的利用框架进一步推动组件化发展，再度重塑开发模式，这是我认为下一代前端利用框架须要做的事！

换句话说，它须要更容易的让开发者解决组件化、自动化、规范化等工程化的问题，能够疾速让开发者实现一个 lowcode、procode、微前端等平台或是架构。

五、咱们在做的事

lowcode、微前端都是高度工程化的架构实际，咱们将其中的架构思路抽离进去，开发了一个服务于开发者的前端框架，并基于框架开发了外部的 lowcode 平台：

它的实现分两局部

• 数据驱动的前端利用框架，让开发者基于 json 配置组织页面
• lowcode 平台（可视化配置平台）, 将配置 json 映射成普通人可用的配置项

组件数据：

底层基于成熟 ui 层框架实现，下层通过工程化实际，将写页面变成写配置，让开发人员在写页面时，只须要写一份 json 配置。

前端工作变成了两局部：

• 通用组件开发
• 页面配置开发

简而言之，这个框架的作用是让开发者基于 json 配置组织页面。

5.1 一些框架细节

5.1.1 标准

咱们给出了组件属性名的命名标准，对于大多数组件（业务 / 通用）来说，他们有雷同或类似的属性名, 例：data/children/label。

• 相似 useState 能够对特定属性名做校验、做测试, 并且轻松实现预编译优化；
• 升高上手难度，对于大多数组件，只须要晓得组件名就能轻松上手，利于组件推广。

5.1.2 如何解决自定义开发问题

咱们把自定义开发分为两类 ：

• 自定义组件：次要是构建层，能够让自定义组件独自部署上线；
• 自定义 action：相似公布订阅，指定触发类型（点击）、触发事件名（dispatch(type)）, 所有 action 收归顶层治理。

5.1.3 如何更快的和后端分割

框架举荐的数据交互方式：
1. 编写 action（能够应用通用 action: getData 疾速获取数据）
2. 组件触发 action（init/click/scroll）
3. 数据获取并挂载
4. 组件订阅数据并更新

5.2 他的劣势是什么

• 依照微服务的理念，款式、自定义组件、自定义的办法能够第三方 npm、线上链接注入 => 更好的实现模块化和模块隔离；
• 开发页面变成开发组件和写页面配置 => 更不便实现自动化和规范化；
• 组件的开发有着通用、可扩大的标准 => 更好的实现组件化和规范化；
• 针对 json 配置的自动化测试，针对 json 配置的上线部署、热更新等等都会更有利于实现工程化；

六、愿景

咱们心愿找到 lowcode 平台和一般前端开发的平衡点，既能晋升传统前端开发的效率，又能够为 lowcode 的倒退赋能。

咱们更心愿能孵化出下一代的利用框架，解决更多开发中、工程化实际遇到的架构问题。

招聘信息 ：

百度直播研发部招聘研发岗位，包含客户端 -Android/iOS 方向，服务端 -Go/PHP 方向。咱们负责百度直播业务，对直播业务感兴趣欢送退出咱们。

简历投递邮箱：geektalk@baidu.com（投递备注【直播研发部】）

举荐浏览 ：

| 短视频 go 研发框架实际

| 千亿级模型在离线一致性保障计划详解

| 如何疾速定位程序 Core？

———- END ———-

百度 Geek 说

百度官网技术公众号上线啦！

技术干货 · 行业资讯 · 线上沙龙 · 行业大会

招聘信息 · 内推信息 · 技术书籍 · 百度周边

欢送各位同学关注