GMTC 会议记录及感受

962 阅读13分钟

gmtc大会.png

对于去没有现场的小伙伴,我只能给你放一张传送门了。闭着眼,幻想着进入会场吧!😄

GMTC (全球大前端技术大会),本届大会主要专题有:

​1、大前端工程化提效(热门)
​2、可视化技术与工具(听)
​3、小程序开发实践
​4、跨端技术
​5、移动技术新趋势
​7、前端核心标准和基础技术
​8、前端智能化(听)
​9、端智能
​10、前端团队管理
​11、音视频技术
​12、大前端架构设计实践
​13、前端质量保障
​14、Serverless 业务场景落地(听)(热门)
​15、Flutter 技术探索与实践
​16、移动端性能优化

从业前端几年来,第一次参加这种大会,整体体验还是不错的,也有些收获。

接下来我就具体的分享一下我认为值得大家去学习的专题记录和感受,希望对大家有所帮助:

大会主题

1、前端的现状之痛及未来趋势(玉伯,阿里研究员)

这个可是前端界的大佬人物,其简介:

1、程序员,研究生退学,在中科院
2、重情义,同事发生什么事,他会第一时间站出来,哪怕得罪高管
3、一紧张就口吃,但在朋友面前很会分享
4、样子土鳖,内心火热
5、左撇子

以上简介信息来自网上自称曾经同睡过一张床的人爆料。

奥,还是看看他自己的自我介绍吧:

1、2008 年加入阿里,一入江湖十余载
2、喜欢技术:与团队一起折腾过 KISSY、SeaJS、Ant Design、AntV 等开源项目
3、热爱产品:对生产力工具情有独钟,正在做语雀、白雁、云凤蝶、雨燕等系列产品
4、追求自由:敢想敢说、敢做敢当,简单真诚、自由活着
5、现负责支付宝体验技术部 & 蚂蚁智能协同事业部

听说他是从 P6 跨级晋升 P8,再到 P10,他是怎么做到的?

来来,正题!前端的现状之痛:

1、前端技术卷 (前端的轮子真多,太卷了、前端的技术创新越来越难了、前端工作很重复,大量 CRUD...)

​真卷假卷?其实在前端的技术层面上是不卷的,技术上的高水平竞争非常少,也就只有一些大厂们在探索。前端技术在快速的发展,技术栈也在快速收敛。不过开放高效的 Web 前端技术,正在渗透各个领域。

我觉得其实关键在于,你自己觉得怎么样,你自己身边的环境是怎样,如果你也感受到卷,接着你就可能消极了,到最后,也把自己的积极性打击了,受损失的还是自己。

2、前端发展难 (35 岁以后能干嘛? 学不动了...)

​35岁应该是所有程序员逃不开的一个话题,都会讨论一下,如何避免度过。领域技术专家、独立创业者、CTO、产品负责人、业务负责人等。前端确实这几年发展的挺快的,各种新东西层出不穷,多少个前端哭喊着学不动...没办法,叫苦完,还得学,不过还是要注重基础,接着挑选方向学...

3、前端资源缺 (缺前端、招聘难、高级别的前端少...)

目前,前端工程师在中国的量级应该是几十万,程序员总体是有百万。随着行业的发展,程序员肯定会到千万量级,那时候,前端也必定会到百万量级,这是大势所趋。

听说目前整个阿里将近有四五千个前端。在一些以 SaaS 型为主的创业公司,他们一百个工程师里面,基本上有五六十个是前端工程师,前端已经成为整个技术团队的中坚力量。你要知道,现在整个行业的方向是数字化转型、产业互联网,这里面对工程师,特别是前端工程师的需求都是指数级增长的。

​看到这个,我们都应该窃喜,证明机会还是很多,大家加油!

前端的未来趋势:

1、能用前端技术实现的,迟早都会用上前端技术

​web端、桌面端、移动端、跨端、小程序、音视频、智能化、可视化....

从更宏观视角看,前端就是人机交互工程师,需要和机器交互,需要 UI 界面的地方,就需要前端。

2、越来越多前端工程师,会成为 SaaS 型产品工程师,总人数会超过后端工程师

​IaaS--基础设施服务,Infrastructure-as-a-service
​PaaS--平台服务,Platform-as-a-service
​SaaS--软件服务,Software-as-a-service

​IaaS + PaaS 的从业者会逐步收敛,SaaS 的从业者会急剧增加

3、在低代码、智能化、体验型工具等融合创新领域,中国有机会引领世界

低代码或者无代码,这可以解放前端自己的生产力,消除重复劳动,比如四表一局(图表、表单、列表、表格以及布局)的开发。

智能化领域,特别是端智能,现在大家对用户隐私、数据安全越来越看重,那智能的计算放到端侧肯定是最合适的,而这块,必然会和前端结合。

体验型的工具产品,从国外看,不少生产力工具,或者体验型产品的创业者,他们都是前端或者设计师出生,因为他们都是对体验天然有追求的一帮人。这里面会有不少的机会。

2、Vite: 对下⼀代前端⼯具的思考 (尤⾬溪)

Vite 的定位是下一代前端工具,其分为两个部分:

1、基于原生 ESM 的 No-Bundle 的开发服务器
2、基于 Rollup 的生产环境打包命令。

Vite 的出现得益于两个趋势:

1、现代 JS 支持广泛铺开,原生 ESM 的全球浏览器支持率已经达到 92% 以上;
2、基于原生语言开发的 JS 编译工具(比如基于 Rust 的 swc 和基于 Go 的 esbuild)正在涌现,大大提升了 JS 编译的速度。

原生 ESM 的最大特点就是快,尤大给出了一些应用从 Webpack、Rollup 等迁移到 Vite 后的速度对比,基本都是十倍乃至几十倍的提升。

​这块就是尤大对 vite 的一些介绍,我个人还没有详细具体的实践,大家可自行百度找官网及相关资料学习了解,后续有机会再一起探讨学习。

3、5G视频大时代下移动端技术全景 (于冰,快手)

​本课题主要是于冰老师介绍了快手这几年在技术上的一个发展变化及5G大时代下的技术发展全景,主要是移动端。其中包含公司这几年快速发展,技术架构的发展,技术的演进,以及对未来的展望。

​整体感受就是:洞察时代的发展,紧跟时代的变化,借着时代的风势,乘风破浪!

大会个别专题

1、可视化技术与工具

BI产品中的可视化原理及应⽤实践 (刘阳,字节跳动)

BI(Business Intelligence)

现在大部分企业中的大数据未被利用,造成了资源浪费,给公司企业造成了成本提升。仅有少部分大数据被有效分析,并产生业务价值。这也是我们大数据部门存在的意义之一。

BI系统中的可视化流程
​1、连接数据源
​2、数据编排
​3、发布仪表盘
BI系统开发中常遇到的问题
​1、产研团队间的协作沟通、可视化需求⽆法穷举

​团队的专业性、规范化

​2、可视化呈现效果 、千奇百怪的数据和⽤法

​数据与可视化的分离 、开脑洞的⽤法

​3、可视化的回归测试 、⼤数据量的性能

​图形测试 、功能的排列组合 、海量数据需要秒级响应

字节内部图表框架 ChartSpace 的介绍(暂未开源)。

数据可视化的技术演进
1、Web Worker

​图表并⾏渲染、OffffscreenCanvas 、WorkerPool(线程池调度)

2WebGL

3WebAssembly

​wasm带来的性能提升相当可观 、wasm更适合复杂的计算逻辑、打包后的体积略⼤

二维图表玩转组件化 (姚向阳、小米)

背景:

1、可视化积累,满足部分个性化需求
2、Echarts,优秀,文档复杂,二次开发困难
3、修改图表样式,耗时长

😄 主讲带货:SpriteJS v3

解决Api配置多,文档多、样式设置复杂:

属性归纳归纳法,点、面、线、文本(这方面感觉思路不错)

拓展

1、数据产品

数据产品是指 结合数据仓库、报表查询、数据分析等能力,为企业的决策提供数据支撑的技术和应用。

2、数据可视化

最后获取的数据就需要呈现在人面前,众所周知,人的眼睛对于图像图形的接收程度和理解速度远远高于对于阅读数字本身,而使用图形的方式将数据及其代表的结论,通过视觉方式快速传递给数据阅读者,可以快速直观的得到数据信息,这就是所谓的 数据可视化。

3、数据可视化现在遇到的难度

  ​* 如何能适应不同结构的数据
  ​* 何开放足够的自由度供用户自定义
  ​* 如何在开放高定制能力的同时保持接口简洁易用
  ​* 如何设计一套通用的接口能够让用户对于不同图表类型也能触类旁通
  ​* 何对多种图表类型进行组合

4、图形语法

图形语法:就是将所有的图表类型囊括在内,通过描述几何图形与数据字段的关系的理论框架。其核心思想是:虽然不能穷举所有图表类型,但可以穷举所有的图形类型,并将数据与图形的属性进行绑定。因为任何图表都是由图形构成的,使用数据控制图形属性即可实现数据的可视化。

5、维度/指标

维度:是对一个原始的数据集进行切分的方式,用于描述数据可以被分为多少类,一般代表离散数据的字段组成。

指标:也被称为度量,是衡量一个属性程度的方式,一般由可量化、可比较的字段组成。

6、视觉通道

视觉通道:比如:一个柱状图的主要几何元素是矩形,矩形具有的几何属性包括:长、宽、填充色、位置等属性,通过描述矩形的几何属性与数据的关系,就可以描述一张图表。而矩形的几何属性就被成为视觉通道。

图表展示分类.png

2、前端智能化

AI在设计稿生成代码平台imgcook中的应用场景和落地实践 (常艳芳,阿里)

将设计稿 (Sketch、Figma、PSD、图⽚) ⼀键⽣成可维护的前端代码(HTML、React、Vue、⼩程序、Flutter 等)

覆盖双 11 新增模块 90.4%,智能⽣成代码可⽤率 79.26%,编码效率提升 68%(个人之前2020年使用过,这个数据个人是认可的)

后续方向及目标:多状态UI、微动效和复杂 UI 等代码⽣成问题的探索

imgcook 3.0 技术原理:

imgcook原理图.png

主要是通过大量的机器学习,模型样例归纳总结学习...

前端机器学习框架 PipCook:github.com/alibaba/pip…

羚珑智能设计背后的图形处理 (王勇、京东凹凸)

😄 主讲带货地址:ling.jd.com/

Serverless 业务场景落地

无服务器计算是一种按需提供后端服务的方法。无服务器提供程序允许用户编写和部署代码,而不必担心底层基础结构。从无服务器供应商处获得后端服务的公司将根据其计算费用,而不必保留和支付固定数量的带宽或服务器数量,因为该服务是自动扩展的。请注意,尽管称为无服务器,但仍使用物理服务器,但开发人员无需了解它们。

基于 Serverless 的前端研发模式升级 (王磊,字节跳动)

基于 Serverless 打造一站式前端解决方案有 2 个目标:

1、基础能力平台化,业务再也不需要关注前端基础服务的开发,平台提供,开箱即用,简单配置即可;

技术能力平台化.png

2、友好的开发体验,用户在开发 SSR(服务端渲染) 和 BFF (Backend for Frontend,大多数是请求转发、数据组织、接口适配、权鉴和SSR)的过程中无需感知到差异性,和开发 CSR(客户端渲染)一样轻松;此外支持 CSR 到 SSR、SSR 到 一体化 BFF、一体化 BFF 到微前端的渐进式开发。

友好开发体验.png

用户体验,想要支持 SSR 和 BFF,只需要简单配置和开发即可,在开发上和 CSR 没啥区别。

* 比如用户想要支持 SSR,只需要开启一个配置;
* 想要支持 BFF,添加一个 API 目录,写一写就行了。
* 然后经过云编译,静态资源会自动上传到 CDN。
* HTML、SSR 、BFF 等产物经过发布控制台,简单配置一下即可上线。
* 从研发流程来看,用户只需要关注红框框中的部分。
* 用一句话来总结,传统前端 + 框架能力 + 平台能力 = 全栈前端。

整体架构.png

😄 主讲带货:字节微前端解决方案 Garfish github.com/bytedance/g…

微前端开发流程.png

微前端运行流程.png

对于 Serverless 方向,觉得将来会朝着 3 个方向去发展:

1、Runtime 部分,这块主要解决 FaaS (Functions as a Service)冷启动问题,更好应对突发流量问题;

2、FaaS + BaaS(Backend as a Service),更好的完善 Serverless 的生态;

3、Serverless+,在 FaaS + BasS 的基础上,构建各种从框架 - 开发 - 部署 - 线上运行的应用视角的一站式研发平台。

总结

我个人也是首次参与这样的会议,总体来说,不论是当前的一些趋势走向,还是各个大厂的实践思路,都还是带给我不少的收获与启发。

听完整个大会,最大的感慨其实是大厂们前端布局的全面和深入。本次大会分享的内容,从技术产品到工程实践,并且还具有一定的研究深度。

建议在参与会议之前针对自己的方向和兴趣挑选专题,接着对专题做一些预习,避免在演讲时陷入一脸懵逼的状态。

最后,在开发中,我们要想有所突破或者创新,在前端要做的事:

1、如何提升前端效率,让资源变得更加的高效?
2、如何做性能优化、体验优化?
3、如何保障产品的质量?