第五届FEDAY前端大会于2019.09.21在成都瑞利广场金逸影城举办,齐聚来自全球的的技术与团队管理专家,分享了各自对该领域的见解与看法。
大会话题以前端为基础背景,从数据可视化到其底层原理及其性能提升,从基础设施搭建到框架开发、从协作问题到流程优化、从技术演进到团队管理,话题涉及多个方面与维度。
总得来说,大会有不同技术方向的分享与思考,也有不失深度的底层探究。虽然部分话题重合的地方,但能通过不同的视角看类似的问题,不至于限制自己的视野。
话题
大会总共九个话题,从个人角度上来看钉钉前端负责人贵重及Vue Core开发者Chris Fritz的话题更能引起共鸣。不论是钉钉前端团队演进之路中其团队做出的实践与性能体验上的思考,还是在数据可视化中可技术栈的合理选择、性能优化建议及继续挖掘的思考,都看得出来两位讲师对于所讲话题的真正热爱与理解并为能深入浅出的切实地分享其经验与方法。
以下是个人对每个话题的一些简单记录与思考,大部分话题目前还未更新Slides,有兴趣可查看官网 获取更多信息。
大型团队中开发的平衡性
Vladimir Grinenko from Yandex
主要分享了团队开发管理中,开发与产品的主要冲突,在冲突时如何去解决的过程。当产品足够大时,开发者们容易走向极端:
1. code is beautiful → releases are rare
2. 代码优美 → 发布缓慢
3. 流程上花费的精力太多 → 开发上花费的精力太少
4. 发布频繁 → 代码质量堪忧
5. 高的测试覆盖率 → 产品变得笨重,难以改变
除了这些之外:
1. 关注UI速度 → 不追求增加更多特性
2. 想提升 UI → 没有时间思考代码架构
但其实在讲述的过程中,更多地讲述了经验性的过程,少了一些定量的具体计划。
与国内互联网行业相比,国外的开发环境相对较好,会更多地去思考过程而非纯结果导向。以上冲突在互联网行业中更为强烈,而作者所提到的解决方案可总结为一点:
以产品或者业务维度去划分,打造全功能团队。也即敏捷开发。
框架开发中的基础设施搭建
王泽 白鹭引擎首席架构师 PPT
首先需要理解何为框架,框架基本组成:Runtime + CLI + DevTools。那一个团队是否真的需要打造自己的框架呢?
框架本质是通过代码复用提升开发效率
通用型框架只解决“通用型问题”,而业务型封装可以解决“业务问题
基于以上两点,作者提出尽其可能、开发框架。但与业务类功能开发相比,框架对代码质量和可维护性会提出更高的要求,诸如模块拆分、单元测试、版本控制等。基于白鹭引擎 Egret Pro 的工程实践。
作者提出了以下建议:
1. 使用 monorepo 的设计思想以及 rush.js 进行代码管理
2. 使用 mocha / karma / sinon 进行单元测试
3. 使用 ts-morph 进行源代码检查与批处理
其整个演讲过程虽然提到了Monorepo的实践,整合团队技术栈,提高代码复用率与新成员的构建效率。但主要更加侧重了rush.js的工具使用实践,其中更多的是如何去使用社区工具,并未谈及与相似工具Lerna对比。
从前端到全栈:依托云的Serverless落地实践
周俊鹏
整体探讨了在云环境下,云+端 模式在未来的可行性,以及前端跨界的可性性。然会场音效问题,导致很多过程听得不是很清楚,具体的实践缺少一些共鸣。
你不知道的GPU — 前端、图形系统与数据可视化
吴亮(月影)360高级技术总监 PPT
在可视化大屏的应用中,奇舞团可视化团队使用WebGL渲染2D、3D图形并根据可视化项目的特点利用新的浏览器支持的API进行优化,以充分发挥GPU渲染能力。
月影在分享中谈到了,为什么需要一种新的引擎(WebGL)去做数据可视化,即:
大量大规模数据的需要渲染
可以更高效地使用GPU
WebGL使用相比曾经更加简单
WebGL的渲染过程做了详细的阐述(忽略其中一个单词的笔误),如下图:
分享过程中,使用了meshjs并与Canvas API做了简单的相比,语法非常相似。相比于原生WebGL的语法,meshjs才是比较适合前端程序员使用的工具。
Visualizations using SVG, Canvas, and WebGL
Chris Fritz Vue Core Team Member
与上个话题类似,通过不同的方式去分享数据可视化。不过Chris是站在Vue的角度去思考与讲解,以厘清SVG、Canvas、WebGL等不同方式去做可视化时的异同,给出不同技术之间的性能对比。
并给出了在使用不同技术栈时的调优策略及优化建议:
1. 避免使用原生WebGL语法 可使用 three.js、BabylonJs、meshjs等现代类库
2. 避免频率增删节点 而采用复用节点的方式。如在绘图时有大量节点变化时,Vue中使用v-show 而非 v-if会更高效
3. 使用Offscreen Canvas 通过在 Worker 线程完成 Canvas 渲染任务,可以提升 WebApp 的并发程度,从而提升性能和使用体验
这是我最喜欢的一个话题,作者幽默风趣,又能将话题深入浅出。看得出来只有真正从内心喜欢技术的人才能有像Chris一样的洞查。
钉钉前端团队演进之路
谢传贵(贵重)钉钉前端技术负责人
分享了其钉钉前端团队如何在高效快速迭代的同时去提升应用的稳定性和体验,提出了 Native + FE 组合优化的方案与手段。并通过一些监控抓手以及报警指标去指导团队,主动去发现并解决线上问题。
埋点监控,异常报警,处理规范,以及性能优化其实是前端开发团队中需要不断去探索并精进的一个过程。如何让产品高效、稳定、安全,可以通过不同的方案与对比,精进更多自己的想法。
Rewrite with React Hooks
Unbug Lee PPT
使用React Hooks的去重构一个现有项目。其实熟能生巧,多看文档即可。
墨夫当关——巨型小程序的分布式开发与自动化管理
刘帅 PPT
自动化合并独立小程序的工程框架——Weshop,开创了一种全新的多团队协作开发小程序模式。将作者在项目中遇到的问题,通过Weshop的设计与思考给大家带来相关的故事。
作者提出了隔离 & 总控框架,通过流水线将业务模块小程序 全局样式&全局配置 合并,再将小程序生命周期函数合并,最终实现:小程序矩阵合并成一个小程序。
有几个问题处理原则:
1. 优先杜绝
源码阶段合并方案存在的问题,从源头彻底杜绝
2. 及早暴露
每一次合并前置更新公共模块并进行代码质量校验,及早暴露问题,及早修复
3. 简化关系
模块间的相互影响关系由错乱的网状变为有序的中心辐射,平级模块不应相互影响
4. 非急勿扰
问题优先自动解决,不能解决才爆出。作者曾经上过非诚勿扰。
最后作者通过一些规范与原则去指导团队的开发,去管理团队的工作:
1. 化繁为简
2. 明确清晰
3. 假力于己
基于weex实现的小程序引擎
崔红保
基于weex实现小程序引擎的工作重点、规范约束等,由于时间原因很多东西都没听到了
最后
其实本次大会本身并没有太多新潮或者独特的东西,更多的是通过这样的机会去了解一下前端行业之中,大家都在做些什么,大家的方向在哪里。如果能通过一些话题,收获到一些灵感及思考那便已经是再好不过了。
1. 大会详情 https://fequan.com/2019/
2. 知乎专栏 https://zhuanlan.zhihu.com/p/84148051