tips：点击查看D2 前端技术论坛内容速记（Day 1）

1. 揭秘TC39：ES2020和ES2021

介绍：本节解析了一个新标准带来的新特性和新语法，以及ES标准的制定过程和参与方式。
es 2020
截屏2020-12-20 09.23.39.png
Optional Changing

arr[2] && arr[2].name => arr[2]?.name

截屏2020-12-20 09.25.18.png
Nullish Coalescing 空值合并

截屏2020-12-20 09.26.25.png
BigInt

2n

截屏2020-12-20 09.27.27.png
Dynamic Import

Intl 国际化API截屏2020-12-20 09.28.40.png

截屏2020-12-20 09.30.52.png截屏2020-12-20 09.30.01.png

es 2021

截屏2020-12-20 09.32.38.png
Logical Assignment

a || = b => a||(a = b)

截屏2020-12-20 09.33.56.png
Numeric Separators

截屏2020-12-20 09.35.13.png
截屏2020-12-20 09.36.15.png
截屏2020-12-20 09.36.48.png
截屏2020-12-20 09.37.57.png截屏2020-12-20 10.12.12.png

github:tc39/es262
jscig（中国参与情况）

es402 国际化相关标准

2. 前端故障的探索与实践

介绍：本节介绍了前端故障的全面架构，包括度量单位、故障演练体系等。

前端安全生产缺少度量单位

截屏2020-12-20 10.12.12.png

  1. 混沌工程：把异常扰动注入到稳定系统中

截屏2020-12-20 10.13.35.png
截屏2020-12-20 10.19.11.png

  1. 如何打造前端故障演练体系

监控接入、覆盖率、告警、响应
截屏2020-12-20 10.36.57.png（安全生产演练过程）

  1. 展望

截屏2020-12-20 10.39.45.png

3. 腾讯文档自动化测试

介绍：本节是基于自动化测试的devops流程优化，非常值得学习。

截屏2020-12-20 10.52.27.png

  1. 人月神话

面对复杂模块要求高质量交付

性能要求高

  1. 持续测试

腾讯文档研发流程：DevOps
开发负责全流程：编码、测试、发布、监控
运维、测试：提供运维、测试工具

1/同源同工程 项目仓库=业务代码+测试代码
2/前端开发的自动化测试框架
3/Test Anywhere

自动化测试完成可以获得测试报告
截屏2020-12-20 11.00.00.png
截屏2020-12-20 11.02.31.png

测试有效性 => 变异测试
测试稳定性 => 智能等待
=> 智能重试
测试速度 => 分布式执行
性能测试 => E2E测试自动执行性能测试

截屏2020-12-20 11.06.41.png

  1. 持续发布和监控

ChatOps：IM机器人命令式交互、进度控制

发布频率变高、准时旅变高；紧急发布频率和耗时都在下降

灰度发布、持续监控

4. 如何建设跨端灰度监控

介绍：本节讲解了完整的跨段灰度监控体系，也是非常实用、可以落地到现有项目的内容。

截屏2020-12-20 11.26.54.png
（灰度监控数据链路）
截屏2020-12-20 11.27.57.png
（灰度页面发布方案）
截屏2020-12-20 11.35.40.png
（数据处理架构）
截屏2020-12-20 11.39.50.png
（实时监控方案）

传统监控：JSError/接口错误/性能
容器：Crash/白屏/启动异常
目前的监控方式是无法满足业务需求的

JSError局限性：日志小幅度增长没有触发Error/无法区分流量增长还是错误引起

灰度的意义：在发布流程解决错误

三个问题：容器监控/发布标志/

采集标准：
端外：meta标签中携带采集数据（脚手架打包注入） 容器：Response Headers
字段：env/grey/release

变更过程需要对日志进行分析：新增错误日志、日志比例增长

判断白屏：资源加载完毕后10s如果没有节点则判断为白屏
截屏2020-12-20 11.43.12.png

6. 打造更稳定的serverless业务

介绍：本节介绍了2020年阿里技术团队对serverless的稳定性的进一步探索。

1/业务落地数据
serverless业务落地增长10倍、承载流量翻了6倍，已经在核心业务落地

2/serverless稳定性保障
研发模式升级、大促态保障
截屏2020-12-20 13.39.37.png
截屏2020-12-20 13.44.40.png
Serverless提升稳定性的策略：强弱依赖分析、流量模型预估、多层流量管控

7. SSR在在双十一会场的实践落地

介绍：本节从实际角度出发，介绍了serverless对业务的提升以及优化的方法和策略。和Day1的前端性能优化相结合可以对性能优化有更深入的理解。

前端发展：手写HTML => 模版 + js lib => 现代js框架
截屏2020-12-20 13.48.28.png
性能体验衡量

截屏2020-12-20 13.53.40.png
（对具体问题进行具体温习）
截屏2020-12-20 13.53.55.png
（使用SSR优化加载流程）

  1. 优化前架构以及渲染流程

截屏2020-12-20 13.55.40.png
截屏2020-12-20 13.56.01.png

  1. 低成本、低风险的优化方案

截屏2020-12-20 13.58.59.png
截屏2020-12-20 13.59.50.png
降级方案
截屏2020-12-20 14.01.47.png
截屏2020-12-20 14.06.06.png
截屏2020-12-20 14.12.33.png
展望截屏2020-12-20 14.13.45.png
渐进式hydration：和原生结合，优先渲染可交互组件，优化TTI。

8. Node.js - What’s next?

介绍：本节介绍了Node.js目前的最新动态，以及参与到Node.js开源讨论、维护的办法，同时介绍了Node版本维护和更新的一些规则。

1/ 如何追踪nodeJs动态
截屏2020-12-20 14.27.44.png

2/ Node.js Releases

截屏2020-12-20 14.30.15.png
截屏2020-12-20 14.31.18.png

3/ Interesting New Features
截屏2020-12-20 14.33.05.png
截屏2020-12-20 14.34.59.png

  • ES Modules：
    • 对Node是巨大挑战，require是同步的、import是异步的
    • package.json定义为module
  • Throw on Unhandled Rejections
    • 未catch的Promise抛出错误
    • 可以全局捕获unhandled
  • Full ICU by default
  • Diagnostic Report
    • JSON格式
  • Async Local Storage
  • Abort Contorller
    • 中止Promise Api
  • QUIC（Experimental）
    • HTTP3和未来的HTTP实现基础

截屏2020-12-20 14.37.30.png
（ES Module）
截屏2020-12-20 14.38.40.png
截屏2020-12-20 14.40.28.png
截屏2020-12-20 14.41.09.png
截屏2020-12-20 14.43.15.png

4/ Strategic Initiatives
截屏2020-12-20 14.45.19.png
5/ What are the teams and Working groups up to?
截屏2020-12-20 14.48.02.png

  • N-API
  • Disgnostics
  • Next-10
    • 关注WASM等新技术新特性如何在node实现
  • package Maintenance
    • 探索最佳实践

6/ What’s new in the OpenJS Foundation?

9.Serverless 在前端部署领域的实践

介绍：SSR的优质实践内容。

截屏2020-12-20 15.15.44.png
01/前端困境

前端常见部署方案：

  • 跟后端代码一起部署
  • CDN
  • Nginx代理
    • +Lus处理复杂细节
  • Node代理

统一前端部署体系：

  • 把“部署”收敛到一个平台
  • 实现前端灵活、统一的灰度体系&&项目/路由管理
  • 支持各类项目部署
    • 静态页面
    • 静态资源
    • …

02/serverless前端部署

无服务 = 无需关心服务运行细节
流量天然是波动的，自动扩缩容很有必要
BFF服务增多

字节解决方案：轻服务/前端研发平台

03/前端部署架构方案

  1. 静态页面部署 - 集中式方案
  2. Serverless方案

截屏2020-12-20 15.18.53.png
截屏2020-12-20 15.22.22.png
04/前端几类项目的部署方案

05/Serverless部署的路由方案

  • 分布式网关
  • 高效的分层、分类分发机制
  • 树形结构匹配查找
  • 回溯模型

截屏2020-12-20 15.28.59.png
截屏2020-12-20 15.34.19.png
截屏2020-12-20 15.41.43.png
截屏2020-12-20 15.46.40.png

06/部署平台在边缘的思考
截屏2020-12-20 15.51.09.png

10. 高密度部署实践

介绍：蚂蚁的serverless实战。内容比较干，主要靠口述，所以记录不了多少。

01/BFF开发

02/Function开发：轻研发、免运维

  • Function化

03/高密度部署

04/系统架构

网关架构

总结

  1. 结合ES和Node的新标准，可以看出，目前语言框架的一个主要方向是基于语言层面的国际化，这也是未来技术的一大发展方向。
  2. Serverless的架构和落地已经有了充分的实践，其对性能、维护带来的提升也是显著的。相信未来Serverless将会在各大小企业相继落地。
  3. 自动化测试和serverless一样，致力于使开发可以掌握软件开发的全部流程，提高了交付效率和质量，也是目前很火的方向。可预计的未来也会相继在各研发团队落地。