【微服务】Nacos 前端设计

news2024/10/5 13:54:20

目录

一、背景

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/169074.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Xilinx关于Aurora IP核仿真和使用

平台:vivado2017.4芯片:xc7k325tfbg676-2 (active)关于Aurora的开发学习。使用xilinx官方提供的IP核。官方资料,pg046-aurora-8b10b.pdf和pg074-aurora-64b66b-en-us-12.0.pdf。IP核的生成步骤首先在IP Catalog中搜索Aurora IP核关于此IP有两…

SpringBoot指标监控

目录 一、SpringBoot Actuator 1、简介 2、1.x与2.x的不同 3、如何使用 二、Actuator Endpoint 1、最常使用的端点 2、Health Endpoint 3、Metrics Endpoint 4、管理Endpoints 1、开启与禁用Endpoints 2、暴露Endpoints 三、定制 Endpoint 1、定制 Health 信息 2…

RepPoints原理与代码解析

paper:RepPoints: Point Set Representation for Object Detectioncode:https://github.com/microsoft/RepPoints背景在目标检测中,包含图像矩形区域的边界框bounding box作为处理的基本元素,贯穿整个检测流程,从ancho…

DevOps利器之一Docker

一、背景本篇文章主要阐述Docker在DevOps中的应用与价值,Docker部署与安装;因为搭建DevOps流程中所应用的工具及框架都部署到Docker,所以首先介绍Docker为后续做准备。Docker的主要目标是Build,Ship and Run Any App,Anywhere&…

Jitpack使用指南:maven-publish如虎,jitpack如翼 【安卓Java组件化模块化】【更多gradle技巧】

上文总结了三种多模块开发的方法。 第一种:在setting.gradle中定义子模块然后 api Project(:...),直接引用 。第二种,使用 maven-publish 部署至本地仓库第三种,使用 jitpack.io 等部署至远程服务器 我的第一个开源项目就依次用…

Mysql之增强查询

增强查询主要是对之前一些指令的补充 查询增强 主要针对单表查询的增强操作,也是上面一些细节的补充 -- 使用where语句 -- 查找1991.1.1后入职的员工 -- 主要是介绍在mysql中日期类型可以直接比较,需要注意格式 SELECT * FROM empWHERE hiredate &g…

【异常】记一次因修复漏洞扫描导致SpringSecurity出现的循环依赖问题

一、循环依赖问题 APPLICATION FAILED TO START Description: The dependencies of some of the beans in the application context form a cycle: ┌─────┐ | springSecurityConfig (field private XXXX.config.MyauthenticationProvider XXXX.config.SpringSecurityC…

十五天学会Autodesk Inventor,看完这一系列就够了(十),凸雕、贴图

众所周知,Autocad是一款用于二维绘图、详细绘制、设计文档和基本三维设计,现已经成为国际上广为流行的绘图工具。Autodesk Inventor软件也是美国AutoDesk公司推出的三维可视化实体模拟软件。因为很多人都熟悉Autocad,所以再学习Inventor&…

springcloud alibaba -- seata原理和使用

文章目录一、认识Seata1.1 Seata 是什么?1.2 了解AT、TCC、SAGA事务模式?AT 模式前提整体机制如何实现写隔离如何实现读隔离TCC 模式Saga 模式Saga 模式适用场景Saga 模式优势Saga 模式缺点二、Seata安装2.1 下载2.2 创建所需数据表2.2.1 创建 分支表、全局表、锁表2.2.2 创建…

内存一致性模型概念

phrase-20230117184107 内存一致性模型(Memory Consistency Models)提供内存一致性保证,一致性结果体现在程序内存操作是可预测的。例如在多核或多处理器硬件上,在编写并行的程序时,如果理解当前系统所使用的一致性模型,有助于使…

OpenStack GPU直通服务器

layout: post title: OpenStack GPU直通服务器 catalog: true tag: [OpenStack, GPU] 1. 概述2. 直通GPU特性3. 功能说明 3.1. 操作系统支持3.2. 设备支持 4. 实现方案5. 部署方案 5.1. 示例环境说明5.2. 上线步骤 5.2.1. 硬件安装5.2.2. GPU计算节点主机配置 5.2.2.1. IOMMU设…

【数据结构与算法学习8】二叉查找树的基本介绍与添加数据的过程

程序员语录: 把时髦的技术挂在嘴边,还不如把过时的技术记在心里。 1 二叉查找树是什么? 二叉查找树是一种数据结构,又叫作二叉搜索树或二叉排序树,采用了图的树形结构,数据存储于二叉查找树的各个结点中,每…

GEE 9:Earth Engine Reducers 的基本操作

目录1.Image 、ImageCollection and Regions Reducers(图层和区域的相关操作)1.1 Image Reductions(处理单个图层)1.2 ImageCollection Reductions(处理图层集)1.3 Greenest pixel (maximum NDVI) composit…

01背包——二维动态规划【c++】代码实现

今天学了01背包,就想来讲一讲,正好回顾一下(BZOJ上的题目)。 01背包 所谓01背包,也就是背包的一种,01背包和完全背包的区别就在于,01背包一件物品只能选择一次,而完全背包可以重复…

架构运维篇(七):Centos7/Linux中安装Zookeeper

版本说明 JDK :1.8(已安装)ZK : 3.8.0 安装部署Zookeeper 第一步:下载最新版本 官网地址:Apache DownloadsHome page of The Apache Software Foundationhttps://www.apache.org/dyn/closer.lua/zookeeper/zookeep…

libvirt零知识学习1 —— libvirt简介

本文内容部分取自《KVM实战 —— 原理、进阶与性能调优》,非常好的一本书。 1. 概述 提到KVM的管理工具,首先必须要介绍的无疑是大名鼎鼎的libvirt。libvirt是目前使用最为广泛的对KVM虚拟机进行管理的工具和应用程序接口。并且,一些常用的虚…

Oracle VM VirtualBox 安装 CentOS Linux

Virtual Box VirtualBox是一个强大的、面向个人用户或者企业用户的虚拟机产品,其支持x86以及AMD64/Intel64的计算架构,功能特性丰富、性能强劲,支持GPL开源协议,其官方网址是www.virtualbox.org,由Oracle开源&#xf…

Spring自动装配

自动装配的三种方式一、xml方式自动装配二、 按类型自动装配三、使用注解一、xml方式自动装配 byName: 会自动在容器上下文查找,和自己对象set方法后面的值对应的bean id(通过id匹配) //实体类 Data public class Pepole {private String n…

GameFrameWork框架(Unity3D)使用笔记(八) 实现场景加载进度条

前言: 游戏在转换场景的时候,需要花费时间来加载相关的资源。而这个过程往往因为游戏场景的规模和复杂度以及玩家电脑配置的原因花费一小段时间(虽然这个项目里用不到)。 所以,如果这一小段时间,画面就卡在…

计算机网络 —— TCP篇 三次握手与四次挥手

计算机网络系列文章目录 TCP篇 三次握手四次挥手 socket 文章目录计算机网络系列文章目录前言4.1 tcp三次握手与四次挥手面试题4.1.1 TCP的基本认识TCP头部为什么需要tcp,tcp工作在哪一层什么是tcp什么是tcp连接如何唯一确定一个tcp连接(tcp&udp比较) UDP 和 T…