[已完结] TFC 2017 腾讯 Web 前端大会现场记录

开场前的花絮

这里就是一些会场的图片啦

签到处

给大家合影的小姐姐（征得小姐姐的同意）

会场布置

开场致辞

By 黄希彤（腾讯云技术总监）

主旨：知识是有半衰期的，获得安全感的唯一途径就是不断进步（引用王兴）。

嘉宾分享

一、The Future of Writing Javascript

By Nicolas Bevacqua

每一项新特性想要最终被纳入 ECMAScript 规范中，都需要经历 TC39 拟定的处理过程，共包含 Stage 0 - Stage 4 五个阶段

Stage 0：Strawman

以自由形式提交想法以推进 ECMAScript 发展的阶段，任何 TC39 成员，或者注册为 TC39 贡献者的会员，都可以提交。

Stage 1：Proposal

该功能的正式提交阶段

Stage 2：draft

草案是规范的第一个版本，与最终标准中包含的特性不会有太大的差别。草案之后，原则上只接受增量修改。

Stage 3：candidate

即将完成的候选阶段，需要具体实现和获得用户的反馈。此后，只有在实现和使用过程中出现了重大问题才会修改。

Stage 4：finished

已经准备就绪，该特性会出现在年度发布的规范之中。

JavaScript 的未来

• npm，Javascript 包管理工具，打败了 bower
• webpack，JavaScript 打包工具，击败了 gulp，require.js
• babel，JavaScript 编译工具
• rollup，新一代 JavaScript 的打包工具，在类库开发中颇受欢迎
• eslint，JavaScript 代码质量检查工具
• prettier，JavaScript 新一代代码质量检查工具
• node，JavaScript V8 运行环境
• electron，JavaScript 桌面应用开发工具

二、初创公司前端工程体系建设

By 张云龙（全民直播 CTO）

1. 组件化开发与系统拆分

• 在代码层面分而治之（不要在乎用什么框架）
• 静态资源管理（内嵌，依赖，定位）
  源代码 -> 构建工具 -> 资源表 -> 加载接口（同步，异步，预加载）
• 大型网站子系统拆分
  直播间业务子系统，公共模块子系统，首页业务子系统 -> 构建出发布版

2. 持续集成，交付，部署

• 使用 Gitlab—CI（比如新推一个 feature 分支，会自动产生 feature-name.www.quanmin.tv 的测试环境）
• 前端工程多环境实现原理
  a. 内网泛域名解析，把 *.www.quanmin.tv 解析到 gitlab-runner 机器上。
  b. gitlab-ci 针对推送的 git 分支生成 nginx 配置文件
  c. 随机选择一个系统可用端口，分配给 git 分支对应的应用，启动 nodejs server，监听此端口
  d. nginx 反向代理，把域名代理给对应的app端口，实现多环境效果

3. 前端自动化测试

• DOM 的 4 种差异（新增，删除，内容改变，样式改变）
• Dolphin 自动化测试系统
  a. 基于 page-monitor 项目建立页面差异对比
  b. 通过设置 dom 基线建立 case，对比版本之间的 dom 差异，缩小人工的测试范围
  c. 继承了行为录制，log 输出 diff，瀑布流分析的首屏分析等好用的功能

4. 看板，可视化你的进度（推荐使用物理看板）

• 看板原则：
  可视化
  显示在制作品
  管理流动

• 电子看板的问题：
  信息辐射成本高
  容易形成【信息冰箱】
  缺乏仪式感
  定制性较差

• 推荐一本书 - 看板实战

5. 总结

创业不是要减少犯错的次数，而是要尽量减少犯错的成本。

三、面向前端开发者的 V8 性能优化

By 迷渡

1. 动态语言如何进行快速计算

V8 中数字的表示

• 32位系统使用int30
• 64位系统使用int31

V8 中的数据类型

• Object：

  Array
  Function
  Date
  RegExp
  BooleanObject
  StringObject
  NumberObject复制代码

• Primitive：

    Boolean
    String
    Number：复制代码

  • Integer
  • Int32
  • Unit32

编译器优化

• 使用 typefeedback 做动态检查
• 一般而言，在编译阶段提前检查
• 检查之后，使用该类型作为动态类型
• 如果检查失败，去优化
• 去优化之后，可能会使用解释器运行中间码

未来方向

• TypedArray
• WebAssembly
• SIMD

四、嘉宾致辞

By winter（程邵非，阿里巴巴前端技术专家）

1. 关于全栈

并不是说会 Nodejs，就是全栈了，在生产过程中的全栈，前后端都是要兼顾的。

2. 前端和客户端的深度整合

前端和客户端之前在大家的印象中，都是互相竞争的关系，但是我认为未来前端和客户端会有深层次的合作和整合。例如，Weex 中动画很慢的问题，我们就让前端丢一个动画包给客户端去实现，这个过程中我们就用了 2 个前端，3 个客户端的工程师（包括一个客户端 leader）去完成，之后效果非常好。

3. 阿里的 Node

我们要围绕 Node 做一些中间件，以及更好的服务 Node 相关的生态，为我们自己也为更多的开发者造福。

以上三点是 winner 主要想分享的点，具体内容并非原话。

下午场预告

因为下午有三个会场，以下的四个分享前两个来自第一会场（Web 前沿技术），后两个来自第三会场

五、WebGL-开启新的篇章（WebGL & Three.js 的探索之旅）

By 万波

能做什么？（可交互的产品展示，逼真的三维场景，沉浸式网站体验）

1. 产品展示
2. 品牌及营销类网站
3. 应用（衣服搭配，虚拟装修）
4. 游戏
5. webVR，webAR

一些疑问：

项目开发成本很高吗？（大约为2D网站两倍的时间）
性能如何？（移动端还不错，桌面端没问题。）
浏览器支持的怎么样？（桌面端 81.2%，移动端 74.7%，但是支持速度上升很快，王者荣耀的设备统计，95% 的设备支持 WebGL）

该怎么做？

1. 从 WebGL 框架开始
   • Three.js
   • Babylon.js
   • PlayCanvas
2. 三位场景基本概念
   • 场景：一个三维空间的容器
   • 灯光：可以让物体被看见
   • 材质：物体看起来的特质
   • 相机：从不同角度会看到不同的面
3. 三维物体的基本概念
   • 几何体
   • 网格
   • 面
   • 顶点
4. 三位软件制作流程
   • 创建场景
   • 添加物体
   • 设置材质
   • 渲染出来
5. Three.js 能做些什么？
   • 创建各种几何体
   • 设置各种材质
   • 设置各种类型的灯光
   • 创建粒子效果
   • 创建 WebVR
   • 丰富的动画类型

工作原理

1. 工作流程
   • 顶点坐标（缓存起来 -> 矩阵化 -> 坐标转换 -> 图元装配 -> 显示）
   • 光栅化（由顶点生成片元 -> 光栅化）
2. 处理流程（分别处理创建流程）
3. 我们需要储备的知识
   • 了解常用 3D 软件
   • 学习 Three.js
   • 第三方类库
   • 学习 WebGL
   • openGL ES
   • 线性代数，计算机图形学

六、一个前端工程师的机器学习之旅

By 邓鋆（yun，二声）（美登科技架构师）

未来的前端

1. 多元输入
2. 因人而异
3. 信息层次丰富
4. AR / VR

五分钟搞懂机器学习

1. 机器学习是不具体编程而使计算机找到解的过程。
2. 传统编程与机器学习
   • 发现需求（机器，人）
   • 找到需求的规律（机器）
   • 验证需求（机器）
   • 准备数据（人）
   • 运行（机器）
3. 浅层学习（需要提前处理数据，不然效果很差）
4. 深度学习（当数据出现偏向性时，容易产生有偏向性的过拟合，解决方法就是用更大量的数据去训练）

我们的尝试

我们想知道用户喜欢什么样的字体，具体做法：

1. 数据采集
   • 记录前端的任何动作（在 websocket 和 http2 的情况下，这样网络压力小）
   • 在移动端的采集比例比较小
   • 格式：纯文本
   • 安全性（仅在有 TSL 证书的情况下采集）
2. 数据处理，预测
   • 整理成特征数据（csv）
   • 训练
   • 提供预测服务（跑单个数据几秒钟对用户是无法接受的，且当用户量大的时候对服务器负担极大。交给前端）
3. 把预测功能对前端开放
   • GPGPU with WebGL（前端 GPU 计算）
   • 三个网络（当前两个网络都预测不了时，再使用最后一个网络）
     你要什么网络（偏见少节点）
     你不要什么网络（偏见少节点）
     全节点网络
4. 把功能做到前端应用中
5. 常用函数与网络结构
   • softmax
   • k-means
   • t-SNE（降维方法）
   • CNN（处理计算机视觉）
   • RNN-LTSM
   • Deep Q Learning
   • Autoinput，Autooutput

6. 一些奇奇怪怪的优化

   • 预训练与组合网络
   • 规则化调整与网络简化

7. 实际业务

   • 语义搜索
   • 功能推荐
   • 智能推荐
   • 流失防止&转化
   • 自动化兼容性测试
   • 智能创作

关于创作，一个计算机网络创作，一个计算机网络判断是人创作还是机器创作，然后两个相互影响，最后一个越判断越准确，一个越创作越像人。

七、富途的工程化实践之路（组件与构建）

By 王运国（富途前端开发工程师）

历史问题

• 难以维护
• 质量堪忧
• 效率低下
• 交互各异

模块化和组件化

• AMD 模块化规范
• i18n 插件
• 标准化和灵活化

构建

• require.js
• gulp

问题：

• 构建耗时(15 - 20 分钟)
• 构建不可控(严重的依赖配置文件，构建可能会出错)
• 低效的缓存管理(因为全站只有一个版本号，所以每发一个版本之前的资源全部失效)
• 组件跨项目复用难

初步成型

• 组件项目化
• 构建变革
  • require.js -> webpack (支持指定非目录寻址)
  • 速度提升(1020s -> 300s，webpack 只打包，压缩和增量另外实现）
  • 自己实现 webpack-amdi18n 插件

新的问题

• 构建环境差异 -> 使用 JenKins：
  参数解析
  拉取代码
  安装依赖
  构建
  提交入库
• 人的不可靠性
• 开发者的困扰

组件 2.0

• 私有 NPM(registry.npm.oa.com)
• 命名空间 @futuweb
• semver 语义化版本
• 去 jQuery，适配多框架
• 添加文档

展望

• 会有适应多框架的组件方案或工具出现吗？
• 会迎来比肩客户端工程化的方案吗？

分享者希望出现一款一统前端开发的大一统的工具。

八、解密实时协作文档

By 许海浩（石墨文档前端团队负责人）

编辑器介绍

1. 富文本编辑器

   • 开源编辑器：UEditor，Simditor
   • 原理：利用contenteditable 特性以及 execCommand 接口

2. 富文本编辑器使用场景

   • 撰写博客，长文

3. 缺陷：

   • HTML 层级展现不严谨
   • 不支持多人同时对同一版本编辑

如何满足多人协作？

设计一种代码层级的 text model 来表示编辑器的 HTML 内容

HTML 转化为 model 来存储并处理变化 -> Data
Data -> 转化为 HTML 进行显示

总结：支持协作的条件

1. 编辑器的内容要与 Text Model 相互转换
2. Text Model 能够处理多人的改动

方案一：从头造轮子

参考对象：Google Doc，QUIP
原理：监听键盘事件，以 canvas 或其他方式来展现内容

方案二：借助开源（我们对选择）

参考对象：Etherpad
理由：市面上极少的，实现了 text model 与 HTML 互通的编辑器之一

Text Model 如何处理多人改动

关键点：Operational Transformation
借助 OT 算法的思想，使得 Text Model 能够：

1. 与 HTML 的改动互相转换
2. 处理多个改动的冲突

Operation

• Operation 类型：
  insert（插入）
  delete（删除）
  retain（保留）

• Operation 长度：
  Text Model应用到编辑器的机理：
  从坐标为 0 的位置开始，依次执行 Operation

Transform - OT 算法的重要方法

当有两个基于相同版本的改动而生成的 model 时
我们可以改变一个model 将其转换为基于另一个modlel应用之后的model

总结：

1. 以 Operation 来表示文档内容与更改
2. 以 Transform 来解决多人改动的冲突

多端同步

流程图示

今天所有的分享到这里就结束了，手机电脑也都没电了，感谢大家看到这里。