主会场

一、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用于引入组件
模板引擎根据资源表实现资源加载管理，并自动完成优化（按-需、合并、同步、异步、预加载、推送、首屏内嵌等）
性能高，搜索引擎友好

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

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

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

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

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

三、面向前端开发者的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
使用create-react-app创建PWA
使用preact-cli创建PWA

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。