2017TFC腾讯web前端大会记录
来源:互联网 发布:jira 数据库表结构 编辑:程序博客网 时间:2024/05/27 06:54
主会场
一、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中的开发流程
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。
四、QQ空间AMP实战
By loviselu 卢嘉辉
AMP 介绍
- Accelerate Mobile Page
- 加载速度是同等内容的非AMP页面的1/4
- 曝光率,点击率明显提升
AMP技术组成
1、AMP HTML
- HTML的子集,限制了部分标签的使用
- 所有js文件必须是异步加载的
- 只允许使用内联样式
- 使用preconnent API
- 不允许自定义js脚本
2、AMP JS
3、AMP Cache
- 第三方提供的CDN服务
- 缓存AMP页面
- 缓存图片资源,并做体积优化。
demo1
需求描述
Demo 2 动态列表 & 模板使用
需求描述
AMP与PWA结合
https://github.com/google/amp-pwa-demo
- 2017TFC腾讯web前端大会记录
- TFC 2017 腾讯Web前端大会 全场笔记
- 腾讯Web前端大会 TFC2017 会议 现场纪实(上午)
- 腾讯Web前端大会 WebGL&Three.js(MR_LP)
- AC 2017:Alloyteam Web前端大会
- 2016年腾讯web前端实习生面试记录
- 腾讯Web前端大会 企鹅电竞PWA实战(MR_LP)
- 腾讯we大会~2017
- 腾讯WEB前端面试题
- 腾讯web前端框架JX
- 腾讯web前端实习一面
- 腾讯web前端2016面试
- 腾讯we大会2017早鸟票开抢啦!!
- 2017前端开发者大会给你一次和国内外以及腾讯前端大神面对面交流的机会!
- 腾讯前端总结大会H5直播的学习心得
- web前端心得记录
- 前端web学习记录
- web前端记录
- JqGrid 完整例子
- 句子逆序(C/C++)
- Android 蓝牙打印小票与WiFi打印小票两种打印方式的实现(带有图片和二维码)
- JDBC原理 、JDBC基础编程
- OkHttp 3.x 源码解析之Interceptor 拦截器
- 2017TFC腾讯web前端大会记录
- StringUtils常用方法
- 14.before_after
- 用jstl在jsp接收后台传输数据并显示
- Mybatis对数据库批量操作(插入,修改)
- mongodb 存储经纬度以及查询
- error: ‘to_string’ was not declared in this scope
- android studio jni 开发生成.h
- acm学习指导