SegmentFault D-Day Technical Salon Notes

Write at the beginning

2021.7.31 is a Saturday, enjoy the days of weekends. But in the morning the alarm clock yelled me, saying that there is a very important offline technical salon in Zhongguancun, I must go, hahaha~

I ate meat at noon, and then slept for an hour o(╯□╰)o Recharged, after all, there is a lot of new knowledge to digest in the afternoon. At about 13:30, I rushed to the next door Microsoft with my computer.

Unexpectedly, the CEO also went to the scene. I was very impressed by a sentence: ' we want to maintain the purity of technology '. Upon hearing this sentence, I know that the next technology will be less than the hard-to-broadcast, which is worth listening to.

开场白-高阳

My share

Up to now, the lecturers' PPT appealed by the on-site friends has not been made public, so I will temporarily send out the notes that I took down in the order of the topics for the reference of the friends.

1. Tao system web front-end architecture development practice

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

Icejs  ice-scriptes2.x

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

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

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

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

webpack5文件缓存的能力

工程能力  运行时能力

Ssr...

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

This is a little disappointing because the lecturer did not arrive, and the video played.

2. How to observe the front-end performance

### 可观测性

指标  日志   链路

### 前端指标以及如何采集
  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形式)

I’ve talked a lot about the basics, and I also reviewed the basic knowledge. Very good teacher👍🏻

Third, the front-end DDD architecture design for the future and browser specifications


### 技术背景
微前端 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


探索阶段
搭积木


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

This topic is the one I think the lecturer continues to speak the most in today’s sharing😄

Four, front-end spreadsheet technology sharing


表...

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

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

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

问题 js精度 高dpi

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

对象数组

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

json序列化

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

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

公式IRR 内部回报率 应用

gogosheet 逼近算法?

葡萄城社区



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

罗列式

这块跟算法强相关

V. The impact of React on the development of global front-end frameworks


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) ？
不给所有加 降低时间复杂度 那是多少？

Bar, bar, last

The above is purely personal on-site notes, no further sorting is done for the time being, xdm can make do with it, the key point is not clear, I think it should be relatively complete~
The official short sleeve design is quite good. I wanted to wear it out for a show. I found that the color faded a bit when I washed it this morning. Fortunately, the logo was not washed off😝

I wish segmentfault is getting better and better, D-Day is getting better and better~
by i said

This article participated in the SegmentFault D-Day Call for Papers , and you are welcome to join us if you are reading.