FDCON 2018前端千人峰会参会体验

以下内容如有侵权请及时联系

第三届FDCON 2018前端千人峰会于2018年5月19日在上海兴荣温德姆酒店举行。

本次大会富途网络前端负责人Toobug作为演讲嘉宾参加。所以我也有幸跟随我的导师Toobug参与了本次大会。这是我第二次参加前端的大会,第一次是去年深圳的前端体验大会。本次大会其实还是蛮期待的,虽然深圳到上海的飞机票略贵(花了我2000+大洋)。

5.18日晚上22:30分搭乘晚点了2小时的东方航空飞机飞往上海,19日凌晨2点多到的上海兴荣德姆酒店。大会是19日早上8:00开始签到,9:00正式开始。为了保证有好的精神状态,所以到了酒店就快速洗漱。定了早上19日7:00的闹钟,就准备睡觉了。

早上7:00,准备起床。因为没有睡多久,还是很累的。但对大会非常期待,精力不减,怎么也得撑着。早上出了酒店,发现附近有点略显尴尬。到了对面马路买了点吃的。

难道我来了一个假上海。。。。。

入场

早上8:00,酒店会场签到,入场。

会场挺大的,大概可以容纳上千人,最后到场的也差不这个数了,很多后面到的同学都是站着的。因为Toobug作为讲师,有指定的讲师位置。我只能自己找位置,开始我是坐在中间靠后的。后面Toobug微信留言说前面靠近讲师后面的一排还有位置。所以早上主会场,我一直坐在前面。上图就是在他身后拍的,后面我尽量用自己拍的图片吧。不然盗图太多不太好。

参会一定要早点去,不然没有合适的位置也是很尴尬的。这个问题我下午就深深体会到了。

大会开始

先说说本次会议的安排:早上一个主会场(4个主题),下午三个分会场(每场5个主题),大概也就19名讲师。

也就是说我一个人,最多听完9场(上4下5)。

开场白由主办方Topgeek负责人致辞,话不多讲,宝贵时间还是留给讲师。

1. 局限和突破——谈谈 Web 性能瓶颈和未来发展

讲师: 吴小倩-W3C 万维网联盟-Web 标准技术专家

简介:从 HTML 和 DOM 的角度,谈谈各浏览器共同面临的一些性能局限,同时探讨如何用各种 Web Timing API 去监测网页瓶颈,以及运用 PWA, resource-hints, long-tasks, request-idle-callback 等新的性能优化手段去改善你的页面。

从我听完她的演讲,主要内容我觉得就3个:

  1. 如何检测性能瓶颈(peformance)
  2. 如何进行性能优化
  3. 问题反馈

很多人可能都不了解W3C干嘛的。那这里我大概了解到其实呢,他们团队是专门制订WEB标准的。

这里就会有一个问题:这些标准浏览器一定要遵循和实现吗?

答案是否定的。因为W3C和浏览器厂商之间并没有明显的关系,实不实现某一标准,浏览器厂商自己决定。

实现了某一标准,合不合理,这里会有一套统一的规范。web-platform-tests详情

通过上面的web-platform-tests测试来检测浏览器厂商实现的web标准是否符合规范。这是让web和浏览器言行一致的一种方法。

说实话,W3C制订标准,浏览器厂商落地标准。完全不同的公司之间需要协同,挺难的。这也就是web标准有了,但是浏览器厂商支持情况各不相同的主要原因?

想知道性能检测的可以自己去了解Peformance对象。

性能优化方面就不多说了,自己网上搜。Service Workers, Preload, Web Storage, IDB一大堆就会出来。

我感兴趣的在后面的未来发展这里。

会上,她提到未来浏览器可能更多的是面向开发者,提供更智能的接口。里面有一个叫做requestIdleCallBack的函数,可以告诉浏览器如何合理的利用资源(包括:CPU资源)。

还有一点就是可以使用原生API。 意思大概就是:开发者需要什么就提供什么,而不是像现在有什么用什么。

感觉角色调换了,赞。

这里也提到了Web Assembly,但后面有个主题专门讲,这里就先不赘述了。

2. 西西弗斯的转生

讲师: 侯振宇-支付宝-前端技术专家

简介: 围绕“在快速变化的外部环境中,前端如何建立高效的研发体系”这一话题展开,将全面地讨论到工具、框架、自动化等细分领域的问题。并将与听众一起展望,在人工智能等新技术冲击的大背景下,前端的研发工作以及工程师的发展将走向何方。

西西弗斯: 埃俄利亚国王埃俄罗斯之子,科林斯城的创建者,以其狡猾机智闻名。因欺骗死神被惩罚将大石推上陡峭的高山。但每次他用尽全力,大石快要到顶时,石头就会从其手中滑脱,又得重新推回去,永无止境。

其实我看见这个主题的时候,是一脸懵13的。完全不知道他需要讲述的是一个什么东西或者某一个东西的发展历程。从他开讲后,我大概跟着他的思路,慢慢的明白他将的是一个什么东西了。他是一名专门研究自动化框架的前端工程师。

从他的演讲中,我得知他做过很多的自动化的框架和项目,但很多都没有得到推广应用,这就印证了西西弗斯的转生。做的很多东西就像罗老师的锤子手机一样,很多时候是为了情怀。

后面,他从这么多的项目中领悟出了问题的本质。

整个主题听下来,感觉就是他们做了很多大而全的集成自动化工具。还有就是要有:远见 + 野心。

好高大上的样子,说白了没太听懂,不过他后面演示的自动化测试确实很牛13。

还有我比较好奇的是,他们居然能做到还原用户出错的场景,我的乖乖。这不就是我梦寐以求的吗。省得我每次出错还得各种猜是哪出的问题。

3. 一个程序员的成长之路

讲师:张云龙-全民直播-CTO

简介: 创业以来我面试过很多工程师,工作 4-5 年的时候大多会在职业发展上遇到瓶颈期,不知道前路在何方。我毕业到现在工作 8 年,从北京到广州再到上海,从程序员到技术专家再到 CTO,踏踏实实地走过一条完整的程序员成长之路。回顾职业生涯这些年,有很多经历和感悟可以与他人分享,技术深要深到什么程度?是不是程序员的终极目标都是成为 CTO?创业之路会遇到哪些荆棘与坎坷?如何建设一个团队良好的工作氛围?希望能藉由大会与大家交流讨论。

这是本次大会唯一的一场鸡汤。不过我觉得讲的挺好的。

他从自己的人生工作经历作为切入点,讲述了自己是如何一步一步走到今天CTO的。以及每个人生阶段成长路上的转变。

哦,对了。他就是百度fis的开发者。后面去了UC,现在在全民。我不是八卦,是他自己说的。

东西都在上面的图片里面,自己体会。

多说一点吧,这也是我听到的。

  1. 30而立,40不惑。
  2. 大前端。
  3. 未来:端工程师 + 云开发工程师
  4. 不要轻易的转岗。

还有,他后面也通过ppt的方式回答了很多问题。下面这个我感兴趣。

感同身受有木有!!!

推荐阅读:云龙老师的演讲实录

4. 支付宝小程序的开放架构

讲师:何一鸣(承玉)-支付宝高级前端技术专家,小程序前端框架负责人

简介:支付宝小程序依托自身的技术能力和开放服务,为开发者提供了触达亿级用户的机会。我们不仅提供高效的开发框架,易用的开发者工具,还在监控,发布,数据分析方面给开发者提供全方面的支持。
支付宝小程序对外更是一套开放架构,未来支付宝将和合作伙伴 app 一起打造共赢的小程序生态。

总结就一句:支付宝小程序开发详解。

听说,会场来了许多微信的小伙伴。额。。。。。 好了,不多说了气氛略显尴尬。

发2张架构图吧,省的大家说我没有听。

东西挺好的,感觉放在大会上讲,意义不大。

会前我就专门去官网了解了一下支付宝小程序开发,感觉差别不是很大。

午休

上午4场结束,给我的感觉本次大会的师资力量很强。先不过多评论。

吃饭。。。。。

期待下午分会场。

哦,多说一句,中午吃的是108大洋的海鲜粥。没有拍照,怕被打。

昨晚睡太晚,想着下午13:30才开始,就想多休息一会。13:10下楼到3号分会场,发现人满为患。根本没有好的位置,由于3号分会场场地比较小,显得更加拥挤。

5. 从零开始建设服务化的 Web 设计规范 —— 分会场3

讲师:易郑超(Toobug)-富途网络-前端负责人

简介:需求爆炸、重复开发、设计和体验不统一是很多公司都会碰到的问题,我们作为一家创业公司,自然也不例外。面对这一系列问题,我们联合设计和前端的同学,从零开始梳理,逐步在项目迭代过程中整理出一整套web设计规范,并以组件的方式一一进行落地。最终形成了一套服务化的web设计规范,使得前端页面的开发变成搭积木的方式,同时能在保证统一用户体验的情况下,极大减少设计和开发的人力投入。

虽然ppt前面Toobug有让看过,但还是和我原先看过的有很大变化,东西变多了。

这里主要讲的是富途前端UI组件库的一个从无到有的这么一个过程。大家都应该对bootstrap不陌生,但作为公司产品,使用并不合适。

什么原因使得我们需要设计规范:

  1. 设计师想法和风格不一
  2. 设计稿风格不一
  3. 产品同学想法天马行空
  4. 同一组件被反复使用不同的方式实现
  5. 实现质量不一bug多

为了统一设计思路和风格并适当约束产品方案,我们渴望设计规范。

目标:

  1. 统一设计思路和风格产品、设计有据可依
  2. 规范更新流程 确保产品体验可落地
  3. 细节封装 确保产品体验统一
  4. 可复用可移植 极大减少开发人力

所以,我们在公司内部组建了一个专门的项目组跟进设计规范。人员包括:产品,设计,视觉,开发,测试,项目经理。

被挡住的应该是开发人员

设计规范项目执行:设计稿->开发落地->产品接入->反馈

规范更新流程:需求->评审->设计->开发->使用

其实会后也有过来的同学说他们也准备在做这一块东西。知乎上也有人评论说其实他们已经领先了我们。对于这一块的发展,其实大家每个公司的发展进度各不一样。

这么多年了。还是没有一个新颖的UI框架让人耳目一新,超越bootstrap。

6. 自动化生成 H5 骨架页面 —— 分会场3

讲师:罗冉-饿了么-高级前端工程师

简介:在 Web 应用加载过程中,用骨架页面代替常规的 loading 图标,用户感知上页面响应更快,但是手动书写骨架页面带来的只是重复劳动,「自动化生成H5骨架页面」方案正是为了解决以上痛点。

说实话,真正做出来的效果确实挺惊艳的。对比一下感觉我们还有很长的路要走。

主题的目的:就是减少用户首次进入页面的白屏时间。

这一点应该不用解释吧。页面加载越久,用户跳出率越高。

大概就是把左边的实际页面,在首屏加载的时候,显示成右边图上的效果。

先说说作者吧。好像听他自己说原来他不是做前端,是后面转的。为什么转呢,没问。

不过,相比较而言。使用了骨架屏的页面没有loading,有loading的页面的体验效果好太多了。

很多大的公司都在使用,比如facebook,twitter等。

那这里他主要讲述的点有2个:

  1. 如何构建生成骨架屏
  2. 骨架屏应用

骨架屏构建生成及应用这里,我大概了解到应该是通过Puppeteer(爬取大量异步渲染内容的网页)渲染页面,然后在渲染的页面里插入他们自己的一段自己用于生成骨架屏的js代码,产生对应需要的骨架屏页面。

我们都知道使用Vue做项目一般都是也该空壳页面。也就是基本上页面上就一个<div id="app"></div>

就是因为这样,我们可以在vue真正渲染页面前,往#app里注入骨架页面,这样用户进入页面时,看到的就是骨架屏。等vue正在执行后会重新渲染页面。

这里还用到了client-side hydration,我觉得这是一个优化的过程吧。目的应该是尽最大努力是减少页面元素重新渲染。

客户端激活(client-side hydration) , 指的是 Vue 在浏览器端接管由服务端发送的静态 HTML,使其变为由 Vue 管理的动态 DOM 的过程。

附上饿了么骨架屏生成插件: page-skeleton-webpack-plugin

7. 淘宝Web 3D应用与游戏开发实战 —— 分会场2

讲师:徐乾伟(烧鹅)-淘宝-前端技术专家

简介:随着WebGL技术在移动端的普及,Web图形技术越来越多地应用到手淘中。同时,人们越来越追求精神享受,App的“微游戏”化成为互动营销中的必要手段。如何在苛刻的移动端环境中开发Web游戏,借鉴传统游戏开发工具和设计模式,较低成本地实现高性能的3D游戏与应用,已经成为新一代前端开发者面临的挑战。本次分享将以多个互动项目为例,讲述手淘Web 3D技术的发展史,内容涵盖3D图形技术、游戏架构以及移动端工程化方面的最佳实践。

手淘的双11活动游戏,相信大家都玩过。烧鹅在这里讲述了他在手淘开发游戏的整个循序渐进的过程。包括最开始需要兼容phone 4而使用canvas,包括使用canvas踩到的坑,以及webGL在游戏里面循序渐进的应用。

CPU和GPU画图的区别在于:GUP是并发的。

还有就是烧鹅自己也说了,在webGL里面过多的使用光源是很耗性能的。

还有就是说了一些关于IOS下,切换app时,如果不停止调用GPU渲染将会造成app崩溃。

好吧,听着场,其实就是为了去看淘宝游戏炫酷的3D效果的。

很专注的听,没拍照。

8. 极致流畅的移动Web应用解决方案 —— 分会场1

讲师: 关开设 - 腾讯 - 高级前端工程师

简介:在各种概念技术难以落地、没有Hybrid技术的支持、产品场景要做到多平台兼容的业务场景下,Web 应用的流畅性还能达到什么程度?我们团队探索了一套解决方案,以提升首屏速度、切换流畅度为主要指标,以技术的简约、开发效率为辅助, 打造极致流畅体验的 Web 应用。在腾讯视频商城上落地,带来了令人惊艳的流畅体验。

其实是因为我在腾讯视频的草场地买个几个公仔,觉得确实挺快的,所有就从分会场2跑到了分会场1,我到的时候已经开始了,不过精华的部分幸好没有错过。

使用Websocket就是为了解决上图的TLS。

解决的方案就是:后端渲染 + 单页面 + WSS。

这里有同学问了一个问题:如果访问量很大的时候,扛不住的时候怎么办?

这里讲师的回答是:加机器,而没有选择客户端渲染。

好吧,想想也是,加一台腾讯云服务器不就分分钟的事吗?

9. 前端与领域驱动设计 —— 分会场2

讲师:李华桥-Teambition-高级前端工程师

简介:使用领域驱动设计,在不断变化的前端技术中寻找对复杂前端应用的描述和解决方案。

这场我并没有在我的行程内,碰巧因为分会场1的演讲比会场2要快个10多分钟吧。所以我过来准备听下一场时,碰巧就听了。

其实个人感觉,其实挺抽象的。感觉都是把我们平时使用的技术都抽象起来讲了。大家都应该知道把大的东西抽象起来,要理解肯定是需要花费些精力的。

不过,个人觉得,当项目过于庞大或者复杂的时候,将具体的东西先抽象,可能跟好理解。

我表示路过。。。没听全。

10. webassembly在全民直播的应用 —— 分会场2

讲师:赵洋-全民直播-前端研发经理

简介:webassembly在全民直播中已经有很不少的探索和实践,其优异的性能、比javascript更好的保密性以及代码的多端复用带来的开发效率提升都不断的让我们惊喜。本次分享为你介绍webassembly整体在全民直播的探索和实践落地的过程,为大家介绍其中的一些良好实践和踩坑经验。

因为公司牛牛直播使用的是腾讯云的播放器,基本上我们自己需要做的比少。听这个主题,就一个原因:好奇。

其实全民直播在视频编解码这里是有一个专门的C++团队的,但主要是为客户端服务。所以就有了今天的主题。全民前端通过自己研究发现:JS编解码,JS/wasm ,wasm之间的编解码速度呈上升趋势。

他们觉得js/wasm混合编解码的速度与纯wasm的编解码速度相差不大。

wasm的安全性其实只是相对的。

他们为什么要自己编解码,好像是因为有一次因为C++视频编解码团队对码流进行了优化,造成了前端页面的直播视频和语音不一致。

附上编解码DEMO: Demo

结束

大会一共19场演讲(下午分会场3的Echarts4 最全技术攻略–讲师羡辙,受伤了,没有来,挺可惜的这场,祝她早日康复。),其它的演讲都正常举行。

总的来说,此次大会质量很高。这也印证了一句话:大会的质量是由讲师决定的。

我一天下来听了差不多10场,觉得每一场演讲主题都有它吸引人眼球的地方。

对了,好像碰到了勾三股四,好吧。听他说是来取经的,不知道是真是假。

晚宴

晚上,有幸参加了举办方的晚宴,就在酒店一楼。所有的讲师其实给人的感觉都是有很强的亲和力。

所有人开开心心的吃着东西。

晚宴聊到了招人,感觉说大厂吃的招人要求都略有下降,猜测可能是业务需要。都在吐槽说招不到人。

还有就是感觉现在公司招前端的思路也在发生着微妙的变化,好像现在大家都对你会多少框架并不怎么感兴趣,有点现在你说你可以做到页面兼容IE6一样的味道。

更看重工程经验吧。这好像印证了张云龙老师说的——大前端。

以后会不会真的发展成:端工程师 + 云工程师。咱们拭目以待。

宴会期间进行了优秀讲师颁奖。只拍到一半的讲师。没来得及拍。

想知道讲师名称,可以自己找找,我这里就不标了。

宴会期间还有小游戏。索性参加了一把,获得了不错的奖品。

非常感谢大会的工作人员同学,也非常感谢每一位讲师的精心准备,以及举办方的大力支持。

没来得及为会场的工作人员同学拍一张照,好想盗图。

回深

20号,早上8:00回深的飞机,不敢聊太晚。

一天没睡好,还进行了一整天的头脑风暴。晚宴结束直接就回房间了。回去后,和Toobug也闲聊了很久。

大都是关于大会上看见的以及听见的一些事,进行一些交流。大概讲了啥,好像忘了。

不过他问了我一个我很不想回答的问题:“你觉得我pang吗?”。

没理他,反正一个晚上Toobug一直在搞以太坊,好像是同步区块链数据的时候,老是内存泄漏,服务器经常挂。

明年见!!!!!!