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

开场前的花絮

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

签处处

给你们合影的小姐姐（征得小姐姐的赞成）

会场布置

开场致辞

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

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

嘉宾分享

1、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 桌面应用开发工具

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

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. 总结

创业不是要减小犯错的次数，而是要尽可能减小犯错的成本。

3、面向前端开发者的 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

4、嘉宾致辞

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

1. 关于全栈

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

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

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

3. 阿里的 Node

咱们要围绕 Node 作一些中间件，以及更好的服务 Node 相关的生态，为咱们本身也为更多的开发者造福。

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

下午场预告

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

5、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
   • 线性代数，计算机图形学

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

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. 实际业务

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

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

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，适配多框架
• 添加文档

展望

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

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

8、解密实时协做文档

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 来解决多人改动的冲突

多端同步

流程图示

今天全部的分享到这里就结束了，手机电脑也都没电了，感谢你们看到这里。