Pokemmo.1

action 今天冠军做了三只新的宝可梦 虾兵蟹将和鸭宝宝 在游戏里认识了一个小姐姐,名曰大红,没错我是旁边的大绿 end 这个周末就这么愉快的结束了,晚安~

December 4, 2021 · 1 min · cui

关于微前端实现原理与ngx-planet(一)

微前端? 简单来说 从使用角度考虑 D应用是由 ABC三个应用/组件组合而成,通常在Angular/Vue/React单项目中很容易实现,但为了复用解耦,D应用现由3个独立部署并带有通信机制的应用/组件组合而成。 从部署角度考虑 A,B,C,D为并行四个打包后的静态文件,当有E应用使用A,B,C,D应用中的组件或者事件时通过类eureka 服务发现注册的方式去复用组件或应用。 当然,这只是众多思路中的一种 当然,这只是众多思路中的一种 当然,这只是众多思路中的一种 好处: 应用自治: 只需要遵循统一的接口规范或者框架,以便于系统集成到一起,相互之间是不存在依赖关系的。 单一职责: 每个前端应用可以只关注于自己所需要完成的功能。 技术栈无关: 你可以使用 Angular 的同时,又可以使用 React 和 Vue。 这就好像使用k8s集群和grpc调用一样 架构模式 基座模式: 通常有一个main/portal应用来充当基座,提供基础服务,剩下的应用可插拔在基座上。好像dashboard和widget的关系 自组织模式: 各个应用平级不存在相互管理 实现思路 基于基座模式的微服务无非是 服务发现,服务注册,服务调用等功能 基座应用: 主要应有注册表,通过各个应用标识存储key:component|application 以应对路由不通渲染哪个应用 工程逻辑/应用管理/加载: 先看成一个黑盒 路由分发: 通过对url规则和分析出渲染哪个应用/组件,经过黑盒渲染到需要渲染的dom上 难点 Load,决定加载哪个应用,并绑定生命周期 bootstrap,获取静态资源 Mount,安装应用,如创建 DOM 节点 Unload,删除应用的生命周期 Unmount,卸载应用,如删除 DOM 节点、取消事件绑定 单个浏览器多个应用还需做到 状态|css 共享/隔离...

December 5, 2021 · 8 min · cui

关于微前端实现原理与ngx-planet(二)

道标 准备好源码,然后跟着文章去看代码,在每个代码块的第一行,我都把 filename 写上了,并且打开了 gitalk。 项目结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 - packages/planet |--src |--application |--planet-application-loader.spec.ts |--planet-application-loader.ts # 应用加载器 |--planet-application-ref.spec.ts |--planet-application-ref.ts # 应用的引用 |--planet-application.service.spec.ts |--planet-application.service.ts # 应用逻辑处理Service |--portal-application....

December 5, 2021 · 26 min · cui

关于微前端实现原理与ngx-planet(三)

1.为什么要服务端渲染 因为公司后端服务在k8s上,是分布式的微服务,之前端全部打包部署在了物理机器(虚拟机)nginx上,如果通过helm做应用商店的话,nginx前端这部分无法处理,包括灰度部署,CI等,全部都只能做到接口级别的处理,并不能连带静态资源文件一起处理,所以基于分布式的前端整改迫在眉睫。 偶然发现了ngx-planet,整篇文章基于前几篇文章,可以看之前的几篇文章。 2.如何基于ngx-palnet进行服务端渲染 2.0 有路由前缀的情况下服务端渲染ngx-planet如何改进 在 start函数中监听路由阶段,其中的 startWith过滤路由要把 location.pathname修改好,要将前缀去除掉,至于如何动态去除不写死,仁者见仁智者见智。 2.1 首先,准备打包好的静态文件 将 build命令修改,注意 --deploy-url的意思是,打包完成后,静态资源路径是什么 1 2 "build": "ng build --prod --deploy-url=/static/star-universe/ --base-href=/star-universe", 打包后的index.html如图,静态资源路径变成了 /static/star-universe前缀,这里和 base-href不能冲突,否则在渲染时有死循环问题 其次 base-href就是项目访问路径前缀 然后修改 angular.json中的 build放到你的静态资源目录,这样在执行 npm run build后静态资源自动放入后台项目中的静态目录中 2.2 准备Portal后台项目 我的项目基于SpringBoot自动生成,项目结构如下 以下是用到的maven配置文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <?...

December 5, 2021 · 2 min · cui

关于微前端实现原理与ngx-planet(四)

客制化 由于公司和公司的业务不同,所以在ngx-planet的基础上,需要作出一些针对于业务的拓展 目前分出四个基础项目 @yunzai/stars:封装了用户认证,元素权限,i18n等系统初始化信息的内容,需要发包的,意为繁星. star-universe: portal项目,所有子前端项目的入口,意为宇宙. star-dust:一些可能会通用的components都放到这个项目里,统一管理,意为星尘. star-uranus:模版项目,意为天王星. 开发环境 可以看到桌面共有四个编辑器,开发时需要跑起其中三个项目. star-universe,star-dust,star-uranus @yunzai/stars 因为是基础包,所以扩展了哪些功能点,先做一个介绍,因为发包,所以planet前缀都被我改名成为了star前缀,针对于ngx-planet加载过程请看前一篇link start。 接下来看项目结构 首先基于ngx-planet加入了auth,config,i18n,providers,stomp,token,user这些文件夹 module 针对于Module做出了以下改良 加入了TranslateModule来写i18n 加入了Inject的静态配置类StarConfig 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 /* * @Author: ferried * @Email: harlancui@outlook....

December 5, 2021 · 3 min · cui

纪念逝去的软件先驱

《设计模式》作者之一:John Vlissides Vlissides 曾就读于弗吉尼亚大学和斯坦福大学电气工程。自 1986 年以来,他在斯坦福大学担任软件工程师,顾问,助理研究员和学者。从 1991 年开始,他留在 IBM T.J. Hawthorne 的沃森研究中心作研究员。他是许多书的作者,许多杂志文章和会议论文的撰写者,并荣获多项专利。他的工作集中于面向对象技术,设计模式和软件建模。 他也曾为我最喜爱的书籍《敏捷软件开发》写过书评:“这大概是第一本将敏捷方法、模式和当代软件开发基础糅合在一起的书。当 Bob Martin 发言的时候,我们最好洗耳恭听。” John Vlissides 在 2005 年感恩节(2005 年11 月 24 日)逝世(脑肿瘤并发症),享年 44 岁。 谢谢你,为我们带来了 OO 的理念和无数规范化软件工程的思考。 ZIP 算法发明者:Phil Katz Phil Katz(菲尔·卡茨)出生于 1962 年 11 月 3 日。1986 年他编写了共享软件 PKARC,这是一款压缩软件,通过他个人高超的优化技术完胜了 SEA 公司的商业压缩软件 ARC。之后 SEA 对他提起了诉讼,法院最终判决 Phil 停止关于 PKARC 的一切活动。 然而 Phil 并没有就此认怂归于平凡,他成立了一家叫做 PKWARE 的公司,于 1989 年发明了压缩算法 ZIP,并开发了相应的压缩软件 PKZIP 供大家免费使用,在 DOS 时代 PKZIP 是压缩软件界的不二之选。Phil 仅凭一己之力,用自己开发的共享软件打败了商业公司的产品,这一传奇故事足够逆天! 在 90 年代 M$ Windows 早期版本发布时,Phil 个人比较反感这套操作系统,这让 PKZIP 错失了在当时就上 Windows 平台的机会。不过还好,使用 ZIP 算法的 WinZIP 在当时基本没有对手,最终也让 ZIP 成为了使用非常广泛的文件压缩算法并沿用至今。...

December 5, 2021 · 2 min · cui

JSONSchema

Document Ref JSONSchema,Validation 1.什么是JSONSchema JSON Schema 是一个允许您注释 和验证 JSON 文档的词汇表。 2.构建JSONSchema 2.1 Example 1 2 3 4 5 6 { "productId": 1, "productName": "A green door", "price": 12.50, "tags": [ "home", "green" ] } 如上json有一些问题,比如 productId是什么,productName是什么,如何验证里面的字段,price可不可以为0,上述JSON只是一份不完备的JSON文档 2.2 开始构建 1 2 3 4 5 6 7 { "$schema": "https://json-schema.org/draft/2020-12/schema", "$id": "https://example.com/product.schema.json", "title": "Product", "description": "A product in the catalog", "type": "object" } $schema: 根据哪个json草案/标准进行编写的,还有版本信息 $id: 定义了Schema的 URI,以及Schema内其他 URI 引用解析所依据的基本 URI title,description: 描述这个JSON文档的一些信息 type: 这个字段是对JSON文档的第一个约束,如上表明json文档为对象类型 type还有如下几种类型...

December 5, 2021 · 5 min · cui

在IPAD上调试Flutter应用

1.Flutter 环境 1.1 安装dart 1 2 brew tap dart-lang/dart brew install dart 1.2 安装flutter 1 git clone https://github.com/flutter/flutter.git 配置环境变量 1 2 3 4 5 export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # 这里换成你自己clone的地址 export FLUTTER_HOME=$HOME/Sdks/flutter export PATH=$PATH:$FLUTTER_HOME/bin 2.Android 环境 2.1 sdk 1 brew install --cask android-sdk 配置环境变量 1 2 3 4 5 # 后面的数字会灵活变动,使用brew info android-sdk查看路径 export ANDROID_SDK_HOME=/usr/local/Caskroom/android-sdk/4333796 export ANDROID_SDK_ROOT=/usr/local/Caskroom/android-sdk/4333796 export ANDROID_NDK_HOME=/usr/local/Caskroom/android-sdk/4333796/ndk export PATH=$PATH:$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/platform-tools:$ANDROID_NDK_HOME:$ANDROID_SDK_ROOT/emulator:$ANDROID_SDK_HOME 2....

December 5, 2021 · 1 min · cui

K8S服务健康检测(探针)

1.业务探针 readinessProbe 1.1 为什么自动扩容导致请求失败? 一个新Pod创建后,Service就能立即选择到它,并会把请求转发给Pod,那问题就来了,通常一个Pod启动是需要时间的,如果Pod还没准备好(可能需要时间来加载配置或数据,或者可能需要执行 一个预热程序之类),这时把请求转给Pod的话,Pod也无法处理,造成请求失败。 1.2 如何解决? 加入业务探针,可以理解为类似ws的心跳检测机制. Kubernetes中解决这个问题的方法就是给Pod加一个业务就绪探针Readiness Probe,当检测到Pod就绪后才允许Service请求转给Pod。 Readiness Probe周期性检测Pod,然后根据响应来判断Pod是否就绪,Service根据就绪状态分发流量。 1.3 配置详解 1.3.1 EXEC(shell)检测 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 apiVersion:apps/v1kind:Deploymentmetadata:name:nginxspec:replicas:3selector:matchLabels:app:nginxtemplate:metadata:labels:app:nginxspec:containers:- image:nginx:latestname:container-0resources:limits:cpu:500mmemory:1024Mirequests:cpu:500mmemory:1024Mi// 重点内容// 声明一个 业务探针 去检测 当前服务是否准备完毕readinessProbe:# Readiness Probeexec:// 在容器中先后执行 ls,/ready 命令,如果命令完整执行完毕,则标志POD为就绪状态,可以从Service接收流量command:- ls- /readyimagePullSecrets:- name:imagepull-secret 1.3.2 HTTP 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 apiVersion:apps/v1kind:Deploymentmetadata:name:nginxspec:replicas:3selector:matchLabels:app:nginxtemplate:metadata:labels:app:nginxspec:containers:- image:nginx:latestname:container-0resources:limits:cpu:500mmemory:1024Mirequests:cpu:500mmemory:1024Mi// 这里是重点// 声明一个业务 探针,向本POD发起 /read请求,根据响应码判断POD是否准备就绪readinessProbe:httpGet:path:/readport:80imagePullSecrets:- name:imagepull-secret 1....

December 5, 2021 · 3 min · cui

Win下使用 GitBash下安装 rsync

0.原因 不知道为什么MinGW下的sys1.0的rsync不好使,所以需要手动为gitbash安装一个 1.下载点 http://www2.futureware.at/~nickoe/msys2-mirror/msys/x86_64/ 2.对于tar命令的zstd扩展 zstd-1.4.7-1-x86_64.pkg.tar.xz 首先解压 xz -d zstd-1.4.7-1-x86_64.pkg.tar.xz && tar -xvf zstd-1.4.7-1-x86_64.pkg.tar 得到如下几个目录 /usr /usr/bin 这个目录存放了 zstd 的二进制脚本 /usr/share 这个目录存放了man文档和license文件 将 /usr 直接覆盖到 Git 安装目录下 3.安装其他二进制包 libzstd-1.5.0-1-x86_64.pkg.tar.zst libxxhash-0.8.0-1-x86_64.pkg.tar.zst rsync-3.2.3-1-x86_64.pkg.tar.zst 由于前面安装了 zstd 所以这里就可以使用 tar 来解压 .zst包了 tar -I zstd -xvf libzstd-1.5.0-1-x86_64.pkg.tar.zst tar -I zstd -xvf libxxhash-0.8.0-1-x86_64.pkg.tar.zst tar -I zstd -xvf rsync-3.2.3-1-x86_64.pkg.tar.zst 同样将/usr直接覆盖至 Git安装目录下 4.测试 重启Cmd/Gitbash rsync -v

December 5, 2021 · 1 min · cui