微前端简介
一、什么是微前端微前端(Micro-Frontends)是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具,而是一套架构体系。
任何新技术的产生都是为了解决现有场景和需求下的技术痛点,微前端也不例外:
拆分和细化:当下前端领域,单页面应用(SPA)是非常流行的项目形态之一,而随着时间的推移以及应用功能的丰富,单页应用变得不再单一而是越来越庞大也越来越难以维护,往往是改一处而动全身,由此带来的发版成本也越来越高。微前端的意义就是将这些庞大应用进行拆分,并随之解耦,每个部分可以单独进行维护和部署,提升效率。
整合历史系统:在不少的业务中,或多或少会存在一些历史项目,这些项目大多以采用老框架(Backbone.js,Angular.js )的B端管理系统为主,介于日常运营,这些系统需要结合到新框架中来使用还不能抛弃,对此我们也没有理由浪费时间和精力重写旧的逻辑。而微前端可以将这些系统进行整合,在基本不修改来逻辑的同时来同时兼容新 ...
hive和数据库对比总结
hive和数据库对比总结基本概念Hadoop:
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统( Distributed File System),其中一个组件是HDFS(Hadoop Distributed File System)。HDFS有高容错性的特点,并且设计用来部署在低廉的(low-cost)硬件上;而且它提供高吞吐量(high throughput)来访问应用程序的数据,适合那些有着超大数据集(large data set)的应用程序。HDFS放宽了POSIX(可移植操作系统接口)的要求,可以以流的形式访问(streaming access)文件系统中的数据。
Hadoop的框架最核心的设计就是:HDFS和MapReduce。HDFS为海量的数据提供了存储,而MapReduce则为海量的数据提供了计算。
简单了解一下hadoop的前世今生:https://zhuanlan.zhihu.com/p/54994736?ut ...
代码注释规范
1、文件注释/** @Author:xxx@xx* @Date: 2021-09-25 17:02:51* @LastEditTime: 2021-09-30 00:26:09* @LastEditors:xxx@xx* @Description: 应用的入口文件* @FilePath: /xx/src/index.jsx*/
2、函数注释/*** @description: 给没有数据的日期填充undefined值* @param {Array} 填充前的数据* @param {String} 按哪个属性进行分组* @return {Array} 填充后的数据*/
3、块注释/* 块注释 */
4、行注释// 行注释
5、scss注释/* 块注释 */
// 行注释
6、vscode插件koroFileHeader
typeorm-model-generator 生成TypeOrm实体类
TypeOrm 支持 synchronize 这样直接同步entity到db的功能,不过这个用在线上有太大的风险。
并且目前我们的开发模式主要是先进行库表设计,再构建entity实体类进行开发;再就是对于已经有的库表,想使用的时候也需要自己构建entity;这样一来,维护本地entity于db中table的一致性,或者按照远程db中的table组装entity类比较繁琐。
typeorm-model-generator 这个工具可以直接连接对应db直接生成entity,方便使用,提升开发效率.
工具地址
https://github.com/Kononnable/typeorm-model-generator
目前这个项目处于只维护状态
直接使用npx 运行会少包导致运行失败
考虑到作者已经不怎么维护这个项目了,直接clone一份本地跑一下吧
1git clone https:``//github.com/Kononnable/typeorm-model-generator.git && cd typeorm-model-generator && ...
代码检查工具
在vscode中安装ESLint和Stylelint,可以在保存代码时自动检查代码和格式化代码。
eslint和stylelint的配置中所需的插件已经集成在脚手架中, 无需单独配置
eslint和stylelint的vscode配置,已经保存在.vscode/settings.json中,无需单独配置
一、ESLint:JavaScript编码规范(含React)1、使用eslint约束JavaScript的编写,集成以下插件规则:
react/recommended:React规则
react-hooks/recommended:React hooks规则
standard:代码质量检查
prettier/recommended:代码格式检查
2、以下规则和最佳实践,供参考:
Google JavaScript Style Guide:https://google.github.io/styleguide/jsguide.html
Airbnb JavaScript Style Guide:https://github.com/ai ...
React&JSX 规范
React&JSX 规范
本规范基本基于标准的 JavaScript 语法规范
基本规则
每个文件只包含一个 React 类组件
但是多个函数式组件可以放到一个文件中,eslint: react/no-multi-comp
一般使用 JSX 语法
除非是在非 JSX 文件中初始化应用,否则不要使用 React.createElement
命名规范
组件文件扩展名
如果使用 JavaScript,则文件扩展名为 .js;如果使用 TypeScript,则文件扩展名为 .tsx
组件文件名
如果是组件文件,则使用 PascalCase,如 MyComponent.js
如果组件是一个目录,则组件主入口命名为 index,如 index.js
引用命名
React 组件使用 PascalCase,组件实例使用 CamelCase,eslint: react/jsx-pascal-case
1234567891011// badimport reservationCard from './ReservationCard'// g ...
Nodejs监控方案
Nodejs监控方案BFF 上线后,未提供监控能力,无法主动发现报错、接口性能等,需要有相应的指标监控 BFF 程序运行状况。
本方案以监控 BFF (Nest.js 应用),描述从指标制定到查看数据面板的过程。
目标BFF 的监控主要包含系统监控、服务监控、业务监控、报警响应四大类
监控指标
类型
指标类
指标名
描述
系统监控
容器指标
容器 CPU
Pod CPU 使用率
进程指标
进程 CPU
进程 CPU 使用率
服务监控
HTTP 指标
接口 QPS
所有接口请求量
接口 P99 延时
接口响应时间,取前 99%
接口 P95 延时
接口响应时间,取前 99%
接口成功率
http 状态码 200
RPC指标
同HTTP指标
/
Spex指标
同HTTP指标
/
业务监控
业务指标
根据业务具体场景而定
/
报警响应
支持报警规则配置
支持邮件通知业务 owner
架构设计
主要架构模块按功能类别主要划分为三个类模块。
监控 SDK
以项目(Project)维度, 每个项目 ...
MySQL开发规范
介绍:MySQL 开发规范
MySQL开发规范MySQL 开发规范背景对目前Node项目内的MYSQL开发方式拟定一个大致的规范。
命名规范
统一按照lower_case_with_underscores的命名方式
禁止使用mysql的关键字和保留字
命名的length长度小于32
DB
以_db为后缀,如account_db, shopee_account_db
以业务代码为前缀,如shopee_account_db, gop_txn_db
如果db是单独为某个region,如shopee_admin_vn_db
如果要分库,把sharding id放到_db后面,sharding id从0开始,占8位,如shopee_seller_dms_sg_db和shopee_seller_dms_id_db_00001000
db名称长度需要小于42(DBA)
Table
以_tab为后缀,表名不适用复数名词,如果要分表,把sharding id放到_tab后面,sharding id从0开始,占8位 ,如order_tab_00000000和login_log_tab_002018 ...
项目结构规范
介绍:项目结构规范
React项目结构规范|– src 只能修改src目录下的文件
|– assets 图片、字体等资源文件
|– favicon.ico 站点头像
|– logo.png 站点logo
|– common 各个页面间共用的文件
|– components 公共组件
|– constants 常量
|– contexts 全局contexts
|– hooks hooks
|– layout 页面布局相关的文件
|– utils 工具函数
|– config 配置相关
|– appConfig.js app的配置
|– config.js mock的配置
|– routes.jsx app的路由
|– mock mock数据
|– data mock数据模块
|– config.js mock的配置
|– serv ...
腾讯实习总结
介绍:这是关于暑期去腾讯实习项目的总结复盘
项目:实习内容、心得、启发的总结与反思
技术栈:PHP,CodeIgniter(MVC 框架),MySQL,vue,iview UI,axios。
腾讯实习总结岗位:TEG技术工程事业群/网络平台部/网络运营中心/运营开发组/运营开发岗
背景:网络平台部是负责整个腾讯公司网络相关的东西。网络的生命周期很长,到硬件,到软件,到架构,到机房运营,到网络运营。我在的中心是负责网络运营的,例如做些机房管理、网络架构设计,专线扩容/切换,变更管理(例如设备升级等)等等。我们组是负责做一些关于网络运营管理工具平台的开发(devOps模式,开发的平台跟用户的业务逻辑完全区分开),当出现网络设备系统升级等变更需求时,此时平台可提供通用的流程模板,用于用户自定义处理方案,从而执行网络变更。(里面涉及错误流程的紧急回退等等)
工作需求:为了进一步提升NC变更平台的问题复盘效率以及实现追溯模板历史能力,我们需实现NC平台的模板日志功能,能够记录变更模板的创建、信息修改以及生成对应模板版本,并且能对比出不同模板版 ...