微服务Nacos 前端设计
Posted 卡布奇诺-海晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微服务Nacos 前端设计相关的知识，希望对你有一定的参考价值。
目录
一、背景
我们需要提供⼀个简单控制台提升易用性，并且可以得到开发者的共建。前端框架上选择目前比较流行的 react 技术，组件上选择 fusion/antd。
二、选型 React
注意：如果对外宣讲 React/Vue/Angular 选型的时候,⼀定不要把话讲死,核心观点就是 三个都不错, 根据我们自身的情况与偏好选择了其中⼀个。这个问题讲的太死会引发前端娱乐圈的口水战。
1、Vue vs React vs Angular
1.1、npm trends
周下载量 Vue React Angular npm 49 6405 266 3468 180 9886 cnpm 1879 938 397 合计 约50万 > 266W > 180W 注: Angular 下载量数据使用的是 @angular/core
可以看得出 国外 React 最受欢迎，国内 Vue 最受欢迎。
2、GitHub Stats
stars forks issues Vue React Angular
3、根据自身情况选型
2017 年比较 Angular、React、Vue 三剑客详细对比里面讲了很多。以下结论引述自该文章：
- 如果你喜欢 TypeScript：Angular 或 React
- 如果你喜欢面向对象编程（OOP）: Angular
- 如果你需要指导手册，架构和帮助：Angular
- 如果你喜欢灵活性：React
- 如果你喜欢大型的技术生态系统：React
- 如果你喜欢在几十个软件包中进行选择：React
- 如果你喜欢 JS 和“⼀切都是 Javascript 的方法”：React
- 如果你喜欢真正干净的代码：Vue
- 如果你想要最平缓的学习曲线：Vue
- 如果你想要最轻量级的框架：Vue
- 如果你想在⼀个文件中分离关注点：Vue
- 如果你⼀个人工作，或者有⼀个小团队：Vue 或 React
- 如果你的应用程序往往变得非常大：Angular 或 React
- 如果你想用 react-native 构建⼀个应用程序：React
- 如果你想在圈子中有很多的开发者：Angular 或 React
- 如果你与设计师合作，并需要干净的 HTML 文件：Angular or Vue
- 如果你喜欢 Vue 但是害怕有限的技术生态系统：React
- 如果你不能决定，先学习 React，然后 Vue，然后 Angular。
4、现状
- √如果你喜欢 TypeScript：Angular 或 React
- 如果你喜欢面向对象编程（OOP）: Angular
- 如果你需要指导手册，架构和帮助：Angular
- √如果你喜欢灵活性：React
- √如果你喜欢大型的技术生态系统：React
- 如果你喜欢在几十个软件包中进行选择：React
- √如果你喜欢 JS 和“⼀切都是 Javascript 的方法”：React
- √如果你喜欢真正干净的代码：Vue
- √如果你想要最平缓的学习曲线：Vue
- √如果你想要最轻量级的框架：Vue
- √如果你想在⼀个文件中分离关注点：Vue
- 如果你⼀个人工作，或者有⼀个小团队：Vue 或 React
- √如果你的应用程序往往变得非常大：Angular 或 React
- 如果你想用 react-native 构建⼀个应用程序：React
- √如果你想在圈子中有很多的开发者：Angular 或 React
- √如果你与设计师合作，并需要干净的 HTML 文件：Angular or Vue
- √如果你喜欢 Vue 但是害怕有限的技术生态系统：React
- √如果你不能决定，先学习 React，然后 Vue，然后 Angular。
5、小结
1. 根据我们团队的情况:Vue: 6 React: 9 Angular: 5， React > Vue > Angular；
2. React 全球范围用得最多,Vue 国内用的多, React 次之；
3. Github 上受欢迎程度也是 Vue/React 领先；
综上所述: React/Vue 二选⼀。
6、React/Vue ⽣态
Vue: ElementUI, Iview
React: AntD, FusionDesign
很明显看出 React 的 PC 组件库生态更成熟强大。所以综合选择也就是 React 了。
三、方案
前端组件选型上有⼀些争议，差别在 fusion 和 antd 上。
antd fusion 社区影响力 开源早,影响力大 内部使用久,开源工作刚起步 与内部兼容性 无 大（云产品基于这个搞的） 前端人力资源 少 多（简单从商业化上平移过来） 设计定制能力 一般 很强 未来为商业化引流 有差别 平滑
Antd 和 fusion 的主要设计差别。 fusion 的通用性+定制型会更强。
蚂蚁作为业务团队，始终是以做服务于蚂蚁的产品为大前提，所以叫做 Ant Design。
Fusion 项目组作为中台团队，服务的是全集团，所以是要帮助每个 BU 做出自己的 XX Design。
从结果上，⼀方面这两个产品确实类似，另⼀方面 Fusion Design 在各方面都比 Ant Design 要设计得更为通用。
由于我们的项目有设计师深度参与,设计理念和产品形态与蚂蚁集团的应用场景有差别。基于 Antd去改造成设计师想要的视觉效果成本太大。而 FusionDesign 在诞生之初就考虑了这方面的能力。可以让设计师轻松定制出他们期望的 Design System。
综合考虑：采用 Fusion，跟商业化选择⼀个技术体系，方便技术服用。
fusion 开源论坛地址：
https://fusion.design
http://www.fusion.design/index.html
💖微服务实战
✨【微服务】SpringCloud的OpenFeign与Ribbon配置
✨Spring Cloud Alibaba微服务第29章之Rancher
✨Spring Cloud Alibaba微服务第27章之Jenkins
✨Spring Cloud Alibaba微服务第24章之Docker部署
✨Spring Cloud Alibaba微服务第23章之Oauth2授权码模式
✨Spring Cloud Alibaba微服务第22章之Oauth2
✨Spring Cloud Alibaba微服务第21章之分布式事务
✨Spring Cloud Alibaba微服务第18章之消息服务
✨Spring Cloud Alibaba微服务第16章之服务容错
✨Spring Cloud Alibaba微服务第14章之分库分表
✨Spring Cloud Alibaba微服务第11章之MyBatis-plus
✨Spring Cloud Alibaba微服务第8章之OpenFeign
✨Spring Cloud Alibaba微服务第7章之负载均衡Ribbon
✨SpringCloud Alibaba微服务第6章之Gateway
💖 Spring家族及微服务系列文章
✨【微服务】SpringCloud中OpenFeign请求处理及负载均衡流程
✨【微服务】SpringCloud中Ribbon的WeightedResponseTimeRule策略
✨【微服务】SpringCloud中Ribbon的轮询(RoundRobinRule)与重试(RetryRule)策略
✨【微服务】SpringCloud中Ribbon集成Eureka实现负载均衡
✨【微服务】SpringCloud轮询拉取注册表及服务发现源码解析
✨【微服务】Nacos2.x服务发现？RPC调用？重试机制？
✨【微服务】SpringBoot监听器机制以及在Nacos中的应用
✨【微服务】SpringCloud中使用Ribbon实现负载均衡的原理
✨【微服务】SpringBoot启动流程注册FeignClient
以上是关于微服务Nacos 前端设计的主要内容，如果未能解决你的问题，请参考以下文章
“基于Spring Cloud Alibaba的微服务架构实战：Nacos配置管理“
[云原生专题-55]：Kubesphere云治理-操作-分步部署基于微服务的业务应用 - 微服务注册中间件Nacos的部署