SegmentFault D-Day 技术沙龙随手记

2021.7.31 是个礼拜六，享受双休的日子。但早上闹钟把我喊起来，说有个很重要的线下技术沙龙，就在中关村，必须去啊，哈哈哈~

中午吃了顿肉肉，然后睡了一个小时 o(╯□╰)o 养精蓄锐，毕竟下午有好多新知识要消化。大概13:30时候，拎着电脑就冲向了隔壁微软。

没想到的是，人家CEO也去现场了。有句让我印象很深：'我们希望保持技术的纯粹性'。听到这句话，我知道接下来的技术会比硬广要少一些，是值得听下去的。

截止目前，现场小伙伴们呼吁的讲师们PPT还没有公开，那我就暂时把自己按照议题顺序记下的笔记发出来，供小伙伴们参考。

一、淘系 web 前端架构开发实践

脚手架
框架: 1. 提供标准 2. 技术收收敛

Icejs  ice-scriptes2.x

设计:
工程设计: 底层依赖  插件体系  配置文件 对外命令
核心 插件机制

ESM
默认webpack   vite；默认webpack: 应用多  社区方案多；两者 对比

Webpack 预编译 module f  (知乎有个文章介绍) host remote 消费 虚拟应用

分析运行时依赖 -> 构建第三方虚拟应用 -> 编译   作为host

webpack5文件缓存的能力

工程能力  运行时能力

Ssr...

研发升级模式  ？
同仓库  同依赖  同命令
共享src 类型 代码
一起开发 一起部署

这个略微有点小失望的是讲师没到，播放的视频。

二、如何进行前端性能的观测

### 可观测性

指标  日志   链路

### 前端指标以及如何采集
  1. 性能指标
  页面性能 资源性能

  LCP 载入速度 <2.5s  4.0s
  FID 互动性 100ms  300ms
  CLS 稳定性 0.1  0.25

  以及...具体

  2. Error信息
  network   http request
  console
  runtime  window.onerror

  3. 用户操作
  action  winddow onclick 排除无效aciton(无dom更新、无网络请求)

采集 跟上

### 观测指标数据可视化
分类  图表 查询(DQL) es
组件库
接入SDK


### 系统的全链路可观测性方案
应用性能检测  开源方案 zipkin DDTrace Skywalking jaeger

数据链路的关联性

场景: 指标库 基础设施日志分析 应用性能 用户访问 安全巡检  云观测

DataFlux (sass形式)

讲的点点很多，基础知识我也跟着回顾了下，挺赞的老师 👍🏻

三、面向未来与浏览器规范的前端 DDD 架构设计

### 技术背景
微前端 bit qiankun webpack的mf ... iframe
npm包
使用React Vue 不同技术栈

组件库痛点 antd  人力 时间 成本
兼容

本质是 html css js  越发展 复用能力越弱

磨平框架带来的限制

社区

直接原生

现在方案能解决 但不够优秀

1. single-spa  主从应用 应用调度器 模块调用；主应用只是调用子应用生命周期 ;  对老逻辑友好
2. web components 原生标签tag
3. omi
4. shoelace  更便捷的使用体验
共有局限  自建体系或DSL 无法快速承接已有逻辑

结合 single-spa  + web components

### 能力实现
微服务本质  领域驱动设计
先看后端DDD模式实现 docker
微服务 抽象和分治的过程

所有框架的render逻辑  本质就是appendChild 从共性点入手 -> webcomponents提供容器+spa生命周期让用户自定义渲染逻辑 -> webc兼容性

浏览器原生能力得到更好的支持


本次分享我们将会介绍在现有的业务场景下，我们对前端 DDD 架构体系的思考过程以及设计实践，最终如何借助社区 Portals（ https://github.com/WICG/portals ）以及 Realms（https://github.com/tc39/proposal-realms）提案的设计思想，打造更贴合浏览器发展趋势的微前端框架，并以此解决我们实际的业务问题。

systemJS
cjs   npm i 过程
umd   window全局变量
esm   兼容性问题

组件服务化模式

webpack module federation 生产-复用逻辑的过程也会因此受限于构建工具带来的体系  vite rollup


web components 根本局限: html作为标记语言 只能承接String的Attributes props
WC框架的常见解决方案 DSL，

Magic一切问题都可以通过一个函数解决

最大程度贴合现在开发者习惯 减少学习成本

如何复用单元适用千变万化场景

领域驱动
六边形架构(装饰器?)

webpack插件机制

magic使用过程: 引用  注册 使用

Magic核心: 设计概念

jquery工具 m也是提供工具函数  贴合开发者的使用舒适度  使用直觉



### 业务落地

打磨过程

页面的模块化复用场景

集群型微前端场景

社区
Portals
Realms

为什么不 iframe 类似flash 沙箱
需更灵活的触达渲染底层的能力


### 未来展望
《围城》
社区框架 svelte vue3 react


探索阶段
搭积木


###### 讲师
语速 节奏很快
时间把控

这个话题是我觉得今天分享中，讲师持续讲话最多的一位 😄

四、前端电子表格技术分享

表...

### 性能- 表格渲染
HTML5 Canvas 绘制模型

canvas 分层渲染
油画绘制
分为主体图层和装饰图层

双缓存画布
页面滚动: 清空主画布  裁剪缓存画布 绘制新内容 更新缓存画布

问题 js精度 高dpi

### 内存-数据存储
二维数组

对象数组

数据字典
按需构建 节省内存

json序列化

基于行模式的稀疏矩阵存储策略

### 可靠性
1. 支撑复杂逻辑运算的计算引擎
  1. 公式字符串
    1. 词法分析 得到字符串数组
    2. 语法分析 根据优先级，将字符串数组组成装成表达式树
    3. 计算表达式树  通过递归调用来计算
    4. 3同时 构建依赖关系的计算链，统计入度(rudu: 单元格依赖其他单元格的数量)
      1. 常规运算(有向无环图)
      2. 按需计算 脏的概念

公式IRR 内部回报率 应用

gogosheet 逼近算法?

葡萄城社区



### 感想
刚开始的“表”释义和话题开始衔接, 前一个讲师有点多.

罗列式

这块跟算法强相关

五、React 对全球前端框架发展的影响

React的定位(视图状态)

领域状态 + 视图状态

状态管理

路由 请求库 工程化

### 架构层面
极致的运行时概念

svelte solid  编译时

vue3 运行+编译

UI = Fn(state)  => 视图=库(数据)


#### 更新粒度
1. 节点级更新粒度
Svelte
特点: 预编译技术、关心触发更新的节点、没有虚拟dom

2. 树级更新粒度
React
两棵树比较变化的部分
特点: 基本没有编译、不关心触发更新的节点、虚拟dom

3. 组件级更新粒度
Vue
组件子树去更新  react整棵树虚拟
特点: 虚拟dom、关心触发更新节点、有预编译能力
描述视图的方式 => 虚拟dom => 真实dom
    ↓
 (jsx 模板语法) => vue都有



### 特性层面
Hooks
设计理念: 代数效应
工程角度: 逻辑收敛、功能复用

hooks是一个初一数学知识
2x + 1 = y  x自变量 y因变量
有副作用的因变量 无副作用的因变量
(卡老师开启绕口令模式...)


#### React Concurrent Mode (CM)
https://zhuanlan.zhihu.com/p/60307571

视图库
性能瓶颈：
1. cpu
减少运行时流程： 提供性能优化API
减少用户感知：
  时间切片
    1. 自动批处理
    2. ?star
2. io
网络延迟 : 请求尽快发出去 suspense
react18 全新ssr解构


#### note
react所有节点加Key 时间复杂度是O(n^3) ？
不给所有加 降低时间复杂度 那是多少？

吧啦吧啦最后啦

1. 以上纯属个人现场笔记，暂没有做进一步的整理，xdm凑合看哈，关键点除了看不清的，我想应该算是比较齐全咯~
2. 官方赠送的短袖设计挺好的，本来想穿着出去秀一波，今早洗时候发现掉色有点狠，还好logo没洗掉 😝

祝 segmentfault 越来越好，D-Day 越来越棒~
by 我说的

本文参与了 SegmentFault D-Day 征文 ，欢迎正在阅读的你也加入。