2020年不容错过的前端技术趋势 - GMTC全球大前端技术大会解读

7,413 阅读11分钟

本文由阿里巴巴前端技术专家、本届GMTC讲师 陈周勉 首发于 UC研发效能 公众号,关注文末公众号可领取GMTC大会PPT。

1. 导读

2019年,大前端领域发展的步伐看似略有放缓,并没有太多颠覆性的新技术出现。可是,"学不动"的焦虑感依然笼罩着整个前端圈子。回看这一年,前端圈其实热闹非凡:

  • 小程序百花齐放,爆炸性增长,大厂商趋之若鹜
  • React、Vue、Angular 三驾马车一统江湖,稳步前行
  • 跨端新贵Flutter野心勃勃,动作频频;Flutter For Web发布,携三端之势欲令天下
  • WebAssembly 核心规范正式成为Web标准
  • Serverless来势汹汹,大前端融合趋势势不可挡


或许,这就是我们感到困惑的原因 —— 前端技术越来越多,边界却越来越模糊,大前端融合趋势越来越明显。而 GMTC全球大前端技术大会,就是一场专门为大前端开发者准备的技术盛宴。大会聚焦前沿技术和实践经验,透过Ta,我们可以一窥国内外大厂最新落地的实践,更好地了解大前端发展未来的趋势。

笔者有幸作为讲师,在大会中作了题为《阿里岳鹰Web全景监控的建设之路》的分享。本文将从个人的角度,给大家带来2019年GMTC大前端技术大会·深圳站的解读。

💡小科普 GMTC全球大前端技术大会是由极客邦科技旗下InfoQ中国主办的技术盛会,关注前端、移动、AI应用等多个技术领域,促进全球技术交流,推动国内技术升级。

2. 大会一瞥

2019年12月20日,为期两天的「GMTC全球大前端技术大会」在深圳拉开帷幕。会议上,总计有超过 50位来自BAT等一线互联网大厂的讲师做了精彩的主题分享。

主题囊括了时下火热的前端前沿技术,还包括各大厂最新的一线实践,如 Flutter实战、Serverless实战等,也有历久弥新的议题,如 Web性能优化与全链路监控测试与安全团队建设与成长等。

嘉宾阵容也令人欣喜,不仅请来了TC39核心成员 Daniel Ehrenberg 给大家现场解惑,也有国内前端大神同样也是TC39成员的 Hax贺师俊,贺老这次除了干货还给大家带来了TC39委员会的一些轶事,十分有趣。
大会现场也是十分火爆,座无虚席。


3. 2020年大前端趋势

3.1 小程序

如果说2017年是小程序元年,那么2019则是小程序爆炸性发展的一年,无论是小程序应用,还是小程序平台的数量,都让人眼花缭乱。

移动互联网头部流量的各大厂纷纷推出了自家的小程序平台,除了BAT三家,头条、QQ、美团等企业也都加入到了这一战壕。

多样小程序平台让本就膨胀的大前端知识体系更加显得复杂,开发者只能一脸黑人问号,一边吃力的适配。好在主流小程序的架构基本一致,语法上也是大致相同,结合 taro、mpvue等这样的上层框架,可以屏蔽部分的复杂度。

小程序蓬勃发展的景象,事实上也掩盖了目前在性能方面的一些不足。比如来自DCloud的崔红保老师在《小程序的未来方向》中也提到了这个问题,并分享了一些解法。

最新的好消息是阿里和百度前端联手发起了W3C小程序标准提案悄然发布了—— w3c.github.io/mini-app-wh…(不要问我为什么没有鹅厂)。俗话说分久必合,2020年小程序标准化也许无法一蹴而就,但未来确实可期!

3.2 Flutter

自打跨端解决方案 Flutter以革命的姿态出现以来,在前端圈里就备受瞩目。经过2018年的试错或储备,2019年终于迎来了突破性的发展。无论是Flutter大版本发布的力度(Flutter For Web的发布尤为瞩目),还是各大厂大前端团队的深度实践,相较以往都更加重磅。

国内Flutter先行者·阿里闲鱼团队以布道者的形象,在过去一年里为我们带来了几十篇深度实践总结文章,更是直接开放下载**《Flutter in action》。**

从大会Flutter专题的分享中,我们也看到百度、蚂蚁金服以及字节跳动的前端团队其实也都在各自的业务中做了Flutter的落地和工程化,从研发体系上拥抱了Flutter。其实远不止这几家企业,像美团、阿里内部更多的BU其实都有较深的实践。这对于一个才诞生不久的框架来说,非常难得。

以往我们都说跨端没有完美的解决方案,或许 Flutter,就是最接近的那一个,2020年非常值得期待。

3.3 Serverless

Serverless(无服务器架构)概念的提出,实际上可以追溯到2012年。最早的原型当属AWS Lambda,也即函数计算。2019年,Serverless在阿里等大厂中其实已形成燎原之势。今年双十一、双十二的大部分前端业务都跑在Serverless架构上。那么,这么火的Serverless核心要解决的是什么问题?

借用腾讯前端技术专家·河伯的一个词,就是「提效」。Serverless 带来的其实是前端研发模式上的颠覆。相对以往纯前端研发的方式,Serverless 屏蔽底层基础设施的复杂度,后台能力通过FaaS平台化,我们不再需要关注运维、部署的细节,开发难度得到了简化,前端开发群体的边界就得以拓宽,能够参与到业务逻辑的开发当中,更加贴近和理解业务,做更有价值的输出。

用最简单的方式实现最有价值的输出,这不正是我们一直所期盼的么。未来已来,Serverless浪潮,不能错过。

3.4 WebAssembly



2019年12月,W3C联盟宣布,WebAssembly核心规范正式成为其官方 Web 标准。这意味着 WebAssembly 成为了继 HTML、CSS 和 JavaScript之后的第四种 Web语言。消息一出,前端圈欢呼雀跃。

目前WebAssembly的应用场景更多集中在前端音视频的解码方面,UC研发效能出品的另一款产品 岩鼠云设备平台,其中的云真机视频流解码底层用到的就是WebAssembly技术,性能方面杠杠的。

除了性能,WebAssembly的另一个优点是代码复用和可移植性方面,让Web有机会能复用到像 C/C++、Go等语言生态中的优秀实践,让 Web 的世界充满想象和无限可能。

实际上,WebAssembly是2015年被提出的,前期更多的是在规范制定上花了较多时间,在得到Chrome和Firefox的有力支持和推广之后,今年是在技术实施层面发展较为不错的一年,国内外大厂都有较多的尝试。
也许,2020年,WebAssembly 就是下一朵绽放的技术之花。

💡小科普 WebAssembly 也叫 WASM,它是为基于栈的虚拟机设计的二进制指令格式,WASM 作为可移植目标,用于编译高级语言(如 C/C++/Rust),从而可以在 Web 上部署高性能客户端和服务器应用,同时它也可以在许多其它环境中使用。

GMTC大会期间,最爆场的当属阿里巴巴前端技术专家·桑世龙(狼叔)出品的 Serverless专题,以及腾讯前端技术专家刘恒兵(河伯)出品的 优化与全链路监控专题。

Serverless作为当红炸子鸡,现场火爆不出意料,而优化和全链路监控专题的受捧则略显意外

不过也从侧面反映出移动互联网下半场,开发者对于自身应用的体验和质量不约而同地有了更高的要求。而笔者所在的部门·UC研发效能的一个核心职责,就是保障业务产品的线上质量,让用户体验提升更简单,这也是岳鹰Web前端监控平台的愿景和使命。

下面简单介绍一下笔者在GMTC大会上所做分享的精华部分。

4. 岳鹰分享精华

岳鹰Web监控平台发布至今不足半年,看似年轻,但其实作为阿里集团内部的效能中台,服务内部业务已有接近十年的时间,到目前为止服务的BU也超过100+,以及近10000名开发者。可以说,岳鹰是经过了层层淬炼之后孵化出来的阿里系精品之一。

分享中,笔者主要从诞生的背景、平台探索以及未来规划三个方面介绍了岳鹰平台。

4.1 背景

  • 大前端时代,Web技术仍占据主流位置,运行于大量的PC、Mobile以及IoT设备上。移动互联网的兴起以及各类设备的爆炸性增长给前端开发群体带来了新的挑战
    • 兼容性问题频发
    • 终端环境复杂多样
    • 用户体验难以衡量
  • 众所周知,阿里拥有庞大的业务体量和用户基数,作为前端重镇,在监控方面的诉求自然十分强烈(体感首屏、白屏监控)
  • UC,作为移动互联网的先行者,其内核团队在H5和Web容器方面的沉淀十分深厚,正向推动了创新式的监控方案

4.2 探索

  • 基于JS SDK的传统监控方案,不能够完美支撑现代的监控诉求

    • 监控维度有限
    • 问题分析能力弱
    • 需要前端埋点
  • JS SDK + Android 内核监控SDK = 岳鹰Web全景监控解决方案

    • JS SDK发挥跨端的优势,是基础
    • 内核监控SDK从深度出发,创新性的弥补传统方案的不足
  • 内核SDK的优势和监控原理

    • 更强的捕获能力(完整的堆栈和响应码信息,天然无惧跨域)
    • 更准的首屏性能(独创算法,体感首屏数据准确率85%+)
    • 更好的白屏监控(创新式地通过分析绘制指令判断是否白屏,更准确更低性能开销)

内核监控SDK原理之JS异常

  • 日志上报四要素
    • 节流(http2、合并去重)
    • 降级(上报方式支持降级,提高成功率)
    • 动态采样(可控)
    • 安全(https)
  • web分析平台核心要素
    • 实时监控、预警(大盘趋势,监控项闭环)
    • 多维分析(实时数据/趋势/时间段对比,网络、终端、地理、前端版本)
    • 领域工具(辅助高效问题分析)

岳鹰监控平台产品架构

4.3 展望

  • 功能演进 or 体验升级
    • 实时预警 -> 智能预警
    • 新兴语言/框架的支持

4.4 现场花絮

笔者在现场分享

笔者在现场分享


聚精会神的现场听众

聚精会神的现场听众

5. 结束语

2019 终将逝去,2020 的脚步也越来越近。从本届GMTC大会上讲师们所分享的信息来看,技术的变革将使未来大前端的边界将更模糊,大前端融合是无法逆转的趋势,前端开发群体将有机会扮演更多的戏份。

在这大前端最好和最坏的时代里,机会更多,挑战也更大了,如何快速适应变化和发展、快速普及知识 / 能力模型显得尤为重要,希望本文对您有所帮助。

洞悉前端监控密码,请关注微信公众号 UC研发效能
岳鹰产品体验:yueying.effirst.com
岩鼠产品体验:yanshu.effirst.com


关于UC研发效能

研测领域资深专家团队,依托UC十余年移动技术沉淀,全力打造专业的研发效能平台。服务于阿里巴巴100+产品、近10000名开发者,为团队降低研测成本、提升交付效率,助力产品提升用户体验,让产品交付更好更快更安心。