关于segmentfault-d-day:2021-SegmentFault-DDay-大前端前沿技术实践

淘系 web 前端架构开发实际

• 插件式六边形架构，提供插件生命周期，插件间通信机制；
• 工程化打包工具可选：webpack、vite、gulp、rollup…；

• 研发模式降级，同仓库、同依赖、同命令；
• 前后端同构开发，通过 midway 及 hooks 函数进行构建，联合 serverless 进行全链路开发；

如何进行前端性能的观测

• 可观测性：提供监控可视化语料库，数据库抉择、自定义同一查询语言；

• 链路追踪：OpenTracing 标准，调用关系图；

• 日志剖析：容器日志、利用日志、主机系统日志关联剖析；

面向未来与浏览器标准的前端 DDD 架构设计

• 前端 DDD：组件服务化，分治形象，子域宰割及定义限界上下文，做好防腐，领有更准确的缓存及按需加载粒度；

• Web Components 对接类 Single-SPA 生命周期；
• portals 作为 iframe 的代替，能更好的深度定制 sandbox；

• 所有的 render 实质都是一个 appendChild，框架是个围城，应该贴近浏览器原生 api 的倒退方向才是趋势

前端电子表格技术分享

• 在线表格：单元格基于行模式的稀松矩阵存储，构建计算公式先后的依赖计算链

React 对寰球前端框架倒退的影响

• 框架设计：React 是一个极致的运行时计划，NG、Svelte、Solid 等是极致的编译时计划，Vue 介于二者之间，可运可编；

• React Hooks 实质是一种 React 的 ui=F(state)，即 ui 是一种数据的设计哲学践行，是函数式编程的最佳实际，也更适配 Serverless 的 lambda 函数践行

• CPU 瓶颈：1、提供性能优化 API（底层缩小运行时流程）；2、工夫分片，如批处理及 startTransition 等（缩小用户感知）。IO 瓶颈：Suspense，全新 SSR