【微服务】Nacos 前端设计

博主介绍:✌全网粉丝5W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌

博主作品:《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+MySQL+Vue等前后端分离项目,可以在左边的分类专栏找到更多项目。《Uniapp项目案例》有几个有uniapp教程,企业实战开发。《微服务实战》专栏是本人的实战经验总结,《Spring家族及微服务系列》专注Spring、SpringMVC、SpringBoot、SpringCloud系列、Nacos等源码解读、热门面试题、架构设计等。除此之外还有不少文章等你来细细品味,更多惊喜等着你哦

🍅uniapp微信小程序🍅面试题软考题免费使用,还可以使用ChatGPT,微信支付,扫码加群

点击这里预览

🍅开源项目免费哦(有vue2与vue3版本): 点击这里克隆或者下载  🍅

🍅文末获取联系🍅精彩专栏推荐订阅👇🏻👇🏻 不然下次找不到哟

Java项目案例《100套》

https://blog.csdn.net/qq_57756904/category_12173599.html

uniapp小程序《100套》
https://blog.csdn.net/qq_57756904/category_12199600.html

目录

一、背景

二、选型 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

周下载量VueReactAngular
npm49 6405266 3468180 9886
cnpm1879938397
合计约50万> 266W> 180W

注: Angular 下载量数据使用的是 @angular/core
可以看得出 国外 React 最受欢迎,国内 Vue 最受欢迎。

2、GitHub Stats

starsforksissues
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 上。

antdfusion
社区影响力开源早,影响力大内部使用久,开源工作刚起步
与内部兼容性大(云产品基于这个搞的)
前端人力资源多(简单从商业化上平移过来)
设计定制能力一般很强
未来为商业化引流有差别平滑

    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执行流程图解及源码

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡布奇诺-海晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值