目录
一、背景
二、选型 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执行流程图解及源码