2017TFC腾讯web前端大会记录

时间:2020-11-29 13:27:13

主会场

一、TC39, ECMAScript,and the Future of JavaScript

By Nicolas Bevacqua

什么是TC39
TC39(Technical Committee 39)是一个推动JavaScript发展的委员会。
它的成员由各个主流浏览器厂商的代表构成。

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

Stage0 : strawman
以*形式提交想法以推进 ECMAScript 发展的阶段,任何 TC39 成员,或者注册为 TC39 贡献者的会员,都可以提交。

Stage 1 : proposal
该功能的正式提交阶段。

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

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

Stage 4 : finished
已经准备就绪,该特性会出现在年度发布的规范之中。

处于Stage 4 的特性
- Array#includes : 数组实例的 includes 方法,用于判断数组实例是否包含某个值。
- Async Functions : async 函数,处理异步回调的一种解决方案。

处于 Stage 3 的特性
-Async Iteration : async 函数和迭代器的结合使用形式。
-Rest/Spread Properties : 允许我们将一个对象的各个属性进行解构赋值和定义相关的操作。
-Dynamic import() : 动态引入脚本。
-Named Captures : 支持正则表达式的命名捕获。
-Unicode Escapes : 字符编码的扩展。
-Lookbehind Assertions : 支持正则表达式的后行断言。

处于 Stage 2 的特性
-Class Decorators : 类装饰器,用于对类的方法和属性做一些定义或前置后置操作。

Future of Javascript
未来可以借助哪些工具更高效地开发Web页面,写JavaScript?

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

这一场全程英文,看了下周围的人,大多也是一脸懵的状态,不过还好有讲义,再加上部分PPT贴了一些代码,还是能看懂部分内容。

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

By 张云龙(全民直播 CTO)

组件化开发与系统拆分
分而治之是软件工程中的重要思想,是复杂系统开发和维护的基石,这点放在前端开发中同样适用。在解决了基本开发效率运行效率问题之后,前端团队开始思考维护效率,组件化是目前前端最流行的分治手段。

服务端模板

  • 模板提供require声明对js/css模块的依赖
  • widget用于引入组件
  • 模板引擎根据资源表实现资源加载管理,并自动完成优化(按-需、合并、同步、异步、预加载、推送、首屏内嵌等)
  • 性能高,搜索引擎友好
    2017TFC腾讯web前端大会记录

持续集成/交付/部署
持续集成、交付、部署是团队协作的重要基础,初创团队非常有必要尽全力打造完善的可自动部署的测试、预发布、灰度发布环境,实现持续集成。基于持续集成,进一步做到持续交付,杜绝临上线前的返工。

前端自动化测试
前端自动化测试对于快速迭代的业务来说,一直是一个痛点。Case的维护跟不上业务变更的速度,久而久之就放弃了自动化,撸起袖子手点就好了。如果能有一种不需要维护的自动化case就好了。

看板,可视化你的进度
通过创建代表工作项的即时贴,并在一个可视化的工作流白板上跟踪每个工作项的当前状态,就可以很容易地实现可视化。这是一个很棒的方式,可以帮你了解你的工作,反思你的工作是如何运作的,并开始发现在工作流程中的改进机会。

  • 看板的原则 :
    • 限制在制品
    • 管理流动
    • 显示化流程规则
    • 建立反馈环路
    • 协作式改进、试验中演进
  • 电子看板的问题
    • 信息辐射成本高
    • 容易形成【信息冰箱】
    • 缺乏仪式感
    • 定制性较差
      2017TFC腾讯web前端大会记录
  • 物理看板
    • 易于创建、易于变更、易于观察
    • 有极强的信息辐射能力,了解彼此工作
    • 有一种特别的仪式感,是一种特别的团队社交形式
    • 白纸黑字,写下时间的承诺
    • 方便追踪进度问题
      2017TFC腾讯web前端大会记录

个人觉得这一场的看板挺值得借鉴,也挺有意思的。

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

By justjavac(迷渡)

这一场跟我预期的不太一样,本以为是讲如何进行优化,结果是讲JavaScript背后的引擎以及实现,对大多前端开发者太说,汇编语言还是比较陌生以及难以理解的,现阶段前端开发者只需掌握如何进行优化即可。

分会场一

下午我选择了分会场1 : Web前沿技术

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

By BruceWan ( 万波 )腾讯 前端高级工程师

WebGL能做什么?

  • 产品展示
  • 品牌及营销类网站
  • 应用 比如:衣服搭配、虚拟装修
  • 游戏
  • webVR / webAR

WebGL项目开发成本很高吗?

  • 大约为2D网站 2倍。

WebGL性能如何?

  • 移动端需要降低画质。
  • 桌面端表现十分优异。

浏览器支持率如何 ?
- 桌面端 81.2% 数据来源:Netmarketshare@China 2017年3月
- 移动端 74.7% 数据来源:Android Developer & App Store

该怎么做呢?
- 从WebGL框架开始。

Three.js Babylon.js PlayCanvas
全面的3D开源框架,可以使用WebGL、Canvas等多种方式进行渲染。 微软员工David主导开发的3D游戏引擎,自带物理引擎,能方便创建光线、波浪纹理 。 开源的3D游戏引擎,拥有很强在线编辑器,开发者与设计师能协同完成项目。
Watch: 1947 Watch: 387 Watch: 217
Star: 31442 Star: 4246 Star: 2496



三维场景基本概念

场景 Sence 灯光 Light 材质 Material 相机 Camera
抽象为一个三维空间的容器 光线照射到物体上,反射光使我们能够看到物体 光线照射到物体上,反射光使我们能够看到物体 即观察者视角



三维物体基本概念

几何体 Geometry 网格 Mesh 面 Face 顶点 Vertex
拥有分段,半径(或长宽高)等属性的物体 就是几何体表面,由Face构成 一个个很小的三角形 构成三角形的点



三维软件中制作流程

  • 创建场景
  • 添加物体
  • 赋予材质
  • 渲染

Three.js中的开发流程

创建场景 配置场景 创建模型/材质 渲染
scene = new Scene() camera = new Camera(..)
light = new Light(..)
scene.add(camera)
scene.add(light)
loader = new Loader()
loader.load(‘..’, function(..){
mesh = new Mesh(..);
scene.add(mesh);
});



我们需要储备哪些知识?

  • 了解常用3D软件 3dsMax / C4D / Maya / Blender
  • 学习 Three.js 实例+文档
  • 三方类库 Tween.js / Cannon.js
  • 学习 WebGL
  • openGL ES shaderFrog / shaderToy
  • 线性代数 / 计算机图形学

二、一名前端工程师的机器学习之旅

By 邓鋆 美登科技

未来的前端

  • 多元输入(语音、手势)
  • 因人而异
  • 信息层次丰富
  • AR / VR

传统编程与机器学习

传统编程 机器学习
发现需求(人) 发现需(机器、人)
分析和理解需求(人) 抽象需求(机器)
设计与分析算法(人) 设定网络结构和目标函数(机器、人)
编写代码(人) 执行(机器)
执行(机器) 测试与纠错(机器、人)
测试与纠错(人)

三、企鹅电竞PWA实践

By HongweiQu ( 渠宏伟 ) 腾讯 前端高级工程师

PWA(Progressive Web App):是由谷歌提出推广的,在移动端利用提供的标准化框架,在网页应用中实现和原生应用相近的用户体验。

Why not Web?
当前用户使用习惯 :

  • mobile web : 13%
  • apps : 87%

数据来源:comScore Mobile Metrix, U.S., Age 18+, June 2015

What was missing?
还缺少什么?

  • 可靠的性能
  • 推送消息
  • 桌面图标访问
  • 离线缓存
  • 硬件权限

What is a Progressive Web App?

  • 将web以及apps体验效果相结合
  • 无需安装
  • 快速加载
  • 推送消息
  • 桌面图标
  • 全屏体验

Key features of PWA

  • 渐进式
  • 响应式
  • 离线缓存
  • 类原生体验
  • 始终保持最新
  • 安全
  • 可搜索
  • 推送消息
  • 允许用户安装到桌面
  • 易分享

PWA核心技术

  • Web App Manifest
  • Service Worker
  • App Shell
  • Push Notification
  • Fetch API

快速创建PWA应用

  • 使用vue-cli创建PWA
    2017TFC腾讯web前端大会记录

  • 使用create-react-app创建PWA
    2017TFC腾讯web前端大会记录

  • 使用preact-cli创建PWA
    2017TFC腾讯web前端大会记录

PWA缺点
1、依赖https,建议开启http2/spdy 降低https带来的延时。
2、目前适用于android 5 以上版本,IOS不支持。
3、国内GCM不可用,还没有实现Web Push Protocol的推送服务。
4、android webview环境复杂。
5、Service Worker fetch请求UA为系统UA,无法获取应用标示。
6、Fetch API存在不同统一问题,使用polyfill兼容。
7、X5支持Service Worker 、Fetch。

四、QQ空间AMP实战

By loviselu 卢嘉辉

AMP 介绍

  • Accelerate Mobile Page
  • 加载速度是同等内容的非AMP页面的1/4
  • 曝光率,点击率明显提升

AMP技术组成

1、AMP HTML

  • HTML的子集,限制了部分标签的使用
  • 所有js文件必须是异步加载的
  • 只允许使用内联样式
  • 使用preconnent API
  • 不允许自定义js脚本
    2017TFC腾讯web前端大会记录
传统HTML AMP
<img> <amp-img>
<video> <amp-video>
<audio> <amp-audio>
<iframe> <amp-iframe>
<embed>


2、AMP JS

2017TFC腾讯web前端大会记录

3、AMP Cache

  • 第三方提供的CDN服务
  • 缓存AMP页面
  • 缓存图片资源,并做体积优化。

demo1

需求描述
2017TFC腾讯web前端大会记录
2017TFC腾讯web前端大会记录
2017TFC腾讯web前端大会记录

Demo 2 动态列表 & 模板使用

需求描述
2017TFC腾讯web前端大会记录
2017TFC腾讯web前端大会记录
2017TFC腾讯web前端大会记录
2017TFC腾讯web前端大会记录

AMP与PWA结合
https://github.com/google/amp-pwa-demo