软件技术学习笔记

个人博客,记录软件技术与程序员的点点滴滴。

React混合SSR与SPA片段

单页面应用(SPA)在处理大数据与强交互的方面有优势,但是其缺点是首屏加载比较慢、很难进行搜索引擎优化(SEO)。在工具软件上,选择SPA是正确的。但是,以静态内容展现为主的网站,如果选择SPA,给用户的体验不好。前端使用React框架时,可以选择服务端渲染(SSR)的方式解决该问题。

大部分网站,即使是以静态内容展现为主的网站,其中也包含一部分动态内容与交互。本文就演示:使用React服务端渲染的同时,也在前端动态渲染一些组件(为了让只搞过SPA的同学更容易理解,暂时称之为“SPA片段”),目的是完成动静分离、页面骨架快速显示。同时,“SPA片段”这种方法,可以用来逐渐替换“祖传”的老代码到React组件。导出静态路由之后,还可以使用SSR来生成页面缓存或静态页面。

继续阅读→

React Native Android

以前使用Expo玩过React Native,只需把Expo APP安装,再扫二维码就可以运行自己编写的React Native程序,上手速度很快。但是,自己本来就想开发独立的Native APP,还需要寄生在Expo上才能运行,总感觉有点不爽。今天就使用React Native CLI + Android Studio自己构建APK的方式玩玩。

继续阅读→

Hybrid App体验(Android)

很早以前就听说过Hybrid App(混合模式移动应用),也大概了解它使用哪些技术,今天自己动手体验一把。大厂一般都是自己编译Chromium / Blink,还添加自己的定制。没有那个实力的话就选择别人提供好的SDK,比如腾讯浏览服务X5。我本次主要为了体验技术应用,不需要考虑不同Android版本的差异,就使用Android SDK中自带的WebView。

继续阅读→

Dart Sass,告别language-postcss

以前发现 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,走向正规化。

继续阅读→

React微前端实战教程(A/B测试与灰度发布篇)

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

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

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

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

继续阅读→

React微前端实战教程(APP篇)

在设计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微前端实战教程(长期缓存篇)

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

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

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

继续阅读→

体验Cypress E2E测试

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

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

继续阅读→

React微前端实战教程(PWA篇)

渐进式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.yamlhtmlBegin添加:

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

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

继续阅读→

Golang WebAssembly起步

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

本文演示GoLang WebAssembly Hello World程序。

1. 编写main.go

package main

import "fmt"

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

2. 设置GOARCHGOOS环境变量,编译目标为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
继续阅读→