【微服务】Nacos 前端设计

目录

一、背景

二、选型 React

1、Vue vs React vs Angular

1.1、npm trends

2、GitHub Stats

3、根据自身情况选型

4、现状

5、小结

6、React/Vue ⽣态

三、方案

微服务实战

 Spring家族及微服务系列文章 


一、背景

    我们需要提供⼀个简单控制台提升易用性,并且可以得到开发者的共建。前端框架上选择目前比较流行的 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配置

✨集Oauth2+Jwt实现单点登录

✨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

✨SpringCloud Alibaba微服务第4章之Nacos

✨SpringCloud Alibaba微服务开篇

 Spring家族及微服务系列文章 

✨【Spring】一文带你吃透IOC容器技术

✨【微服务】SpringCloud中OpenFeign请求处理及负载均衡流程

✨【微服务】SpringCloud中Ribbon的WeightedResponseTimeRule策略

✨【微服务】SpringCloud中Ribbon的轮询(RoundRobinRule)与重试(RetryRule)策略

✨【微服务】SpringCloud中Ribbon集成Eureka实现负载均衡

✨【微服务】SpringCloud轮询拉取注册表及服务发现源码解析

✨【微服务】SpringCloud微服务续约源码解析

✨【微服务】SpringCloud微服务注册源码解析

✨【微服务】Nacos2.x服务发现?RPC调用?重试机制?

✨【微服务】Nacos通知客户端服务变更以及重试机制

✨【微服务】Nacos服务发现源码分析

✨【微服务】SpringBoot监听器机制以及在Nacos中的应用

✨【微服务】Nacos服务端完成微服务注册以及健康检查流程

✨【微服务】Nacos客户端微服务注册原理流程

✨【微服务】SpringCloud中使用Ribbon实现负载均衡的原理

✨【微服务】SpringBoot启动流程注册FeignClient

✨【微服务】SpringBoot启动流程初始化OpenFeign的入口

✨Spring Bean的生命周期

✨Spring事务原理

✨SpringBoot自动装配原理机制及过程

✨SpringBoot获取处理器流程

✨SpringBoot中处理器映射关系注册流程

✨Spring5.x中Bean初始化流程

✨Spring中Bean定义的注册流程

✨Spring的处理器映射器与适配器的架构设计

✨SpringMVC执行流程图解及源码

你可能感兴趣的:(SpringCloud,微服务,架构,云原生)