FEDAY 2019 记录与思考

FEDAY 2019 ‧ 成都

第五届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的渲染过程做了详细的阐述(忽略其中一个单词的笔误),如下图:

WebGL Pipeline

分享过程中,使用了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.jsBabylonJsmeshjs等现代类库

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的设计与思考给大家带来相关的故事。

作者提出了隔离 & 总控框架,通过流水线将业务模块小程序 全局样式&全局配置 合并,再将小程序生命周期函数合并,最终实现:小程序矩阵合并成一个小程序。

Weshop 合并流水线

有几个问题处理原则:

1. 优先杜绝

源码阶段合并方案存在的问题,从源头彻底杜绝

2. 及早暴露

每一次合并前置更新公共模块并进行代码质量校验,及早暴露问题,及早修复

3. 简化关系

模块间的相互影响关系由错乱的网状变为有序的中心辐射,平级模块不应相互影响

4. 非急勿扰

问题优先自动解决,不能解决才爆出。作者曾经上过非诚勿扰。

最后作者通过一些规范与原则去指导团队的开发,去管理团队的工作:

1. 化繁为简

2. 明确清晰

3. 假力于己


基于weex实现的小程序引擎

崔红保

基于weex实现小程序引擎的工作重点、规范约束等,由于时间原因很多东西都没听到了


最后

其实本次大会本身并没有太多新潮或者独特的东西,更多的是通过这样的机会去了解一下前端行业之中,大家都在做些什么,大家的方向在哪里。如果能通过一些话题,收获到一些灵感及思考那便已经是再好不过了。


1. 大会详情 https://fequan.com/2019/

2. 知乎专栏 https://zhuanlan.zhihu.com/p/84148051

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容