软件技术学习笔记

经过长时间的观察，我发现软件开发过程中的许多活动都与自动控制系统、通信系统有非常相似的地方，于是把它们变成我的一个指导思想。本文就从这两个系统的角度来思考软件开发，仅代表个人观点，也许还是不够成熟的观点。

在我的软件职业生涯中，大部分时间都在设计与开发新系统。刚开始参加工作的时候，代码也写得不好，但也不会糟糕到开发效率越来越低的程度，也有业务不够复杂的原因。后来开始学大厂的开发规范、极限编程、敏捷软件开发与设计模式，再后来开始学软件架构相关的知识。在软件设计上，“Uncle Bob"对我的影响颇深，学习他写的书也比较多。

在这类书籍当中，里面讲到了稳定依赖原则、稳定与不稳定划分等概念。一开始并没有体会到这些概念的重要程度，只需遵守原则、重构坏代码，一切都很顺利。在亲自接手腐烂的代码项目之后，才深刻感触到代码与业务的关系就是“水能载舟，亦能覆舟”，处理好这些概念就变成跳出泥潭的关键。

作为一名喜欢研究软件技术的铁憨憨，一直以来，很想写两篇关于软件思想的文章，主要目的是：1、记录自己一段精彩的经历；2、把自己独特的想法成文。

后续的文章会有：

1. 成功跳出“泥潭”的经历：接手一个“大泥球”代码的前端项目，运用软件大师那里学来的知识，如何当好一名“学生”。
2. 从自动控制系统、通信系统的角度去看软件工程、软件设计，发现软件相关的许多活动都符合这两个系统的特征。
3. 哪些情况下“Less is better”教条并不适用。
4. 在软件阵线上见闻与思考：我们的“士兵”为何临阵脱逃，有的人不再从事软件开发工作。

对个人而已，这方面的文章要比一个技术实践难写多了，要写好只能慢慢道来。

以前发现 sass-loader 需要使用 Node Sass，还需要编译二进制包，造成本地与CI跑起来很麻烦，所以，在项目中不想使用SCSS，选择了PostCSS扩展语法。但是，VSCode官方也不提供PostCSS支持，只有language-postcss插件凑合使用。

如今，Drat Sass已经在npm上面，纯JS包，yarn add sass -D一秒安装完成。以前的.pcss文件可以改到.scss文件，本来用法跟SCSS差不多一样。VSCode中已经卸载language-postcss，走向正规化。

在SaaS或其它互联网软件中，新版本即使在开发/测试环境验证OK，也不敢保证上到生产环境就万无一失、用户是否喜欢，要可靠、稳定上线，最好要经过A/B测试与灰度发布。

新版本部署到生产环境之后，先不让普通用户使用，而是让测试人员或自动化到生产环境验证OK，再逐步放开部分用户使用新版本。如果发现问题，影响范围比较小，同时，可立即停用新版本与回滚。

在微前端中，整个软件由很多小块微前端动态拼装出来的，版本的多样化更加明显，也不能使用负载均衡控制（会造成长期缓存失效）；如果写路由控制，微前端的个数足够多时就要写到手抖，经常的变更也更加容易出现问题。

在react-micro-frontend-server-go中，我们使用“用户分组隔离”与“激活百分比”来控制每个APP版本的用户服务范围，满足A/B测试与灰度发布的需求。在每个APP版本的元信息中，使用这两个字段（extra.userGroup、extra.activationPercent）标记其服务的范围。本文也主要讲解这两点的设计与体验。

在设计React微前端方案时，已经考虑了对微前端APP的开发没有入侵。原有SPA的代码要上React微前端，可以做到原有JS代码改动不到100行，唯一的前提条件是已经使用CSS模块化避免全局污染、全局冲突。开发人员在本地开发微前端APP时，仍然有原先SPA般的开发体验。

本文主要从两个样例中讲解：

1. react-micro-frontend-app-example，只依赖框架引入的公共库，使用Redux，也使用子APP做子路由。讲解原有APP如何搬迁到微前端。
2. react-micro-frontend-app-example-echarts，相比app-example，还引入ECharts。讲解如何把ECharts也当作为一个微前端。当然也可以把ECharts包含在自身内部，但是与别的微前端APP就无法共用一份ECharts JS代码，用户浪费加载时间。

在初始构建React微前端时，我是想每个微前端APP版本如何兼容发布到K8s平台上面，像后端一样部署上去就可以路由到新版本，所以，在URL Path上添加Git Revision信息。但是，这样做造成微前端APP新版本发布之后，浏览器无法重用以前版本的任何资源，没有全部遵守“缓存为王”、“客户体验至上”的设计原则。

为了重用以前版本缓存的部分资源(JS/CSS/图片等)，构建微前端APP时需固定发布的URL路径，只有文件内容Hash发生变化时才使用新的文件名。我们使用Webpack构建React微前端工程，相关配置项也是在Webpack配置脚本中修改。

文本演示如何尽可能地重用以前APP版本的资源文件。

相比Puppeteer，Cypress支持更多的浏览器（Chrome家族、Edge、Firefox），在编写测试用例时不需要使用代码去拉起浏览器。Cypress Test Runner是开源软件且免费的，在本地运行、不使用Dashboard Web服务时，不需要付费。

Cypress可以用在端到端测试、集成测试、单元测试，但是作为一款一站式重型框架，比较合适用在端到端测试。单元测试，在NodeJS中使用jsdom模拟浏览器就足够了。

渐进式Web应用（PWA）的好处：添加到主屏幕、缓存加速启动、离线运行、渐进式更新、通知等功能，不支持PWA的浏览器可以像以前一样使用网页。PWA上线时需要开启HTTPS协议，本地调试可以是HTTP协议。

在构建React微前端之后，相关资源都是动态选择，造成PWA安装时不好确定缓存哪些内容。本文例程使用postMessage()的方式在主线程与Service Worker线程之间传递数据，让Service Worker线程取得微前端元信息。

给React微前端Demo网站添加PWA功能的操作步骤如下：

1. 添加 PWA manifest

在网站的根目录中添加文件rmf-pwa.webmanifest，内容如下：

{
  "short_name": "Micro Frontends",
  "name": "React Micro Frontends Demo",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

在网站配置文件site_config.yaml的htmlBegin添加：

<link rel="manifest" href="/rmf-pwa.webmanifest"/>

有了这份清单，Chrome浏览器就可以识别我们的网站为PWA，就能安装并添加到主屏幕或桌面。

从GoLang 1.11开始，直接支持编译目标为WebAssembly，不需要安装额外的TidyGo。

本文演示GoLang WebAssembly Hello World程序。

1. 编写main.go

package main

import "fmt"

func main() {
    fmt.Println("Hello world!")
}

2. 设置GOARCH、GOOS环境变量，编译目标为wasm文件

Linux:

$ GOARCH=wasm GOOS=js go build -o lib.wasm main.go
$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

Windows Powershell:

$Env:GOOS='js'
$Env:GOARCH='wasm'
go build -o main.wasm