Skip to content

Latest commit

 

History

History
301 lines (136 loc) · 7.16 KB

D2前端大会笔记.md

File metadata and controls

301 lines (136 loc) · 7.16 KB
Raw

D2前端大会笔记

前端技术发展7大方向

  1. 跨端技术
  2. Node方向(Serverless)
  3. 工程-安全生产
  4. 互动&游戏
  5. 智能化
  6. 可视化
  7. 中后台

其他：IDE、国际化、多媒体

重构Rxjs架构：如何让其更小、更快

并没有使用过 Rxjs，所以只记录一下演讲中提到的一些关键词：

  1. callbag库
  2. 传递订阅模式(next)
  3. 渐进式重构才是最佳方式

盒马中后台跨端方案探索

移动化办公、华为物联网、苹果跨设备... 都是跨端的趋势。

盒马面临的是更加多元化的中后台场景。

盒马工作台是多端作业任务的主要载体，让各类角色简单高效一致得完成工作。

  1. 多端多套方案
  2. 统一方案

业务逻辑一般是要把端有关的特殊逻辑拆掉，这样就没有多端问题了

以全球Web角度谈前端性能的更新与趋势

  1. 越 37% 的 JS 从未使用，被浪费
  2. 在chrome开发者工具中使用 lighthouse
  3. pagespeed insights(网页打开速度分析)：https://developers.google.com/speed/pagespeed/insights/?hl=zh-cn
  4. https://web.dev/

跨端的另一种思路

跨端的另外一种思路：逻辑跨端

不同端交互操作不同，但逻辑却相同。

用什么语言？

TypeScript 转 Dark

怎么分离？

React Hooks

使用 react hooks 编写抽象逻辑代码，然后通过 Dart 转化为 Flutter 对应的 hooks 代码

差异化

Dart2提供 Conditional Import，加载相同接口的不同模块

钉钉表格，在线Excal

DOM Pipeline

基于WebAssembly的loT应用架构实践

webassembly：https://webassembly.org/

从中台的前端走向前端的中台

淘宝直播流媒体互动实践

使用 Electron 开发自己业务的 IED

PixelAI：https://pixelai.jrsworld.co/

海量数据场景下用户行为分析方案

  1. 发现问题

    发现身体有不舒服状况

  2. 验证结果

    体检化验，得到化验结果

  3. 深入分析问题

    深入分析健康状况，疾病原因，治疗方案

海量数据分析：

  1. 第一步：设定期望链路
  2. 第二步：统计分析实际链路

数据分析——构建用户行为树

前端智能化实践：P2C从需求文档生成代码

P2C：PRD 2 Code (产品需求文档到代码)

PRD：Product Requirements Document

imgcook： https://imgcook.taobao.org/

Sketch： https://www.sketch.com/

TC39：ES2020、ES2021展望

**TC39：**推动 JS 技术发展的一个组织。

未来新增用法：

  1. 可选链(?.)：目前只作用域对象属性，将来还可以作用于对象方法

  2. 默认值(??)：目前设置默认值比较常见的做法是 let str = xxx || 'default'，但这种做法存在的一个问题：若 xxx 不为 true 就会执行 str = ‘default'，也就是说 xxx 为 false、""(空字符串)、0 时依然会执行 str = 'default'。而 ?? 新符号的出现，就可以解决这个问题。 let str = xxx ?? 'default'，此时 即使 xxx 为 false、0 也不会执行 let str = ’default'。

    特别注意，?? 和 ??= 意思相差很多，??= 的意思是 只有左侧为 null或undefined 情况下才会赋值，例如

    let obj = {age:18}
obj.age ??= 34 //由于 obj.age 有值，所以这行代码并没有真正赋值
console.log(obj.age) // 18
obj.name ??= 'puxiao' // 由于 obj.name 为 undefined，所以这行代码可以真正赋值
console.log(obj.name) // puxiao

  3. Bigint：可以将任意数字转化为 Bigint

  4. 动态引入(import)：通过字符串模板、有条件得动态引入

  5. Intl.RelativeTimeFormat：新增时区格式化函数

  6. Intl.NumberFormat：新增不同地区、类型 格式化数字

  7. Intl.Local：新增根据地区名参数，获得该地区的一些特性，该类是为 Intl.RelativeTimeFormat、Intl.NumberFormat 提供参数支持

  8. Logical Assignment：允许逻辑赋值，例如 a ??= b，也就是说只有在 b 有值(有运算结果，即使结果为0、false)的情况下才会将 a = b

  9. Numeric Separators：使用 _ 来分割数字，以提高 number 数字可阅读性，例如 10000 可以设置为 10_000

  10. WeakRefs：创建弱引用，目的是为了更加方便垃圾回收(存在强引用时一定无法存在垃圾回收)

  11. Intl.ListFormat：语言相关的列表格式化构造器

  12. Intl.DisplayNames：根据地区名，获得该地区(国家)的标准名称

  13. dateStyle/timeStyle：格式化日期(dateStyle)、格式化时间(timeStyle)

JS 中 Intl 详细用法：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl

前端故障演练的探索与实践

**混沌工程：**Thoughtful，planned

混沌工程不是一时的，而是不断持续的。

主要分为：生产阶段(开发阶段)、消费阶段(发布后的运行阶段)

服务器：Server(正式服务)、Drill Server(演练服务)

传统编写测试脚本方式不够方便，阿里直接采用：“流量即用例(测试用例)” 的策略，简单来说就是记录一部分用户的请求、操作、返回结果。然后再后期通过 “用户操作回放” 来分析可能发生的问题。

演讲中提到了 whistle 这个技术

腾讯文档高效质量交付

如何建设跨端灰度监控

打造更稳定的Serverless业务

**MidwayJS：**https://www.midwayjs.org/

一个面向未来的云端一体 Node.js 框架

Midway 是一个适用于构建 Serverless 服务，传统应用、微服务，小程序后端的 Node.js 框架。

SSR在双十一落地实践

Nodejs：What's next

1、package.json 中配置 type: 'module'，可以配置 Nodejs 认为 .js 文件使用 ES6 导入方式，也就是异步导入方式。

Nodejs引入一个模块默认采用的是同步方式

ES6引入一个模块，采用的是 异步方式

2、在以后的 Nodejs 版本中，若 Promise 中没有添加 reject 处理，则会报错。

在之前的版本中是 允许不添加 异步错误处理 (reject) 的

3、node-addon-api：C/C++实现nodejs扩展接口，https://github.com/nodejs/node-addon-api

4、异步钩子 Async Hooks 的进一步优化提升

Async Hooks 是在 Nodejs 8 中就已存在的新特性

Serverless在前端部署领域的实践

前端部署所面临的困境：

  1. 跟后端代码一起部署
  2. 放到 CDN 上
  3. Nginx类的代理
    • Lua处理复杂细节
  4. Node编写的代理
    • 灵活

新目标——统一前端部署体系：

  1. 出发点：把 “部署”这类脏活收敛到一个平台
  2. 实现前端灵活、统一的灰度体系

Serverlesss给前端部署带来什么

  1. Fass + Bass 概念和优势
  2. 给部署带来的变化
    1. 对流量波动的自动扩缩
    2. ...

SSR部署：

  1. 组成：静态代理服务、SSR渲染服务
  2. SSR渲染：Runtime打包业务渲染逻辑、SPR做一层策略缓存

**Node模块依赖代码压缩：**node minify

BFF部署： 自定义了一套 BFF 部署，前后端代码统一管理、一键发布

**接口定义：**字节跳动公司内部使用 Thrift 或 Protobuf 来定义 API 接口

Serverless高密度部署实践

2020年 D2 大会结束了，明年见。