2023年10月21日,重庆前端交流会圆满落下帷幕。
大会以"破茧"为主题,以"让技术引领卓越体验,以开放迎接前端未来"为口号,汇聚了众多前端领域的专家和从业者,共同探讨前端行业的发展趋势和创新思路。嘉宾分享内容涉及到数字资产管理、高性能前端打包工具、数据驱动的前端研发模式、音乐可视化渲染等话题,探索了前沿技术的应用和前端开发的创新思维。
本次交流会于重庆南岸区阿里中心线下开展,于B站、微信视频号同步直播 ,激发了与会者的思考和灵感,线下参会人数近100人 ,线上观看人数超过3600人,受到广泛好评。在此感谢参会的各位嘉宾,感谢线下线上观看的所有朋友,期待下一届会议的举办,继续推动前端技术的进步,为前端行业的未来发展贡献更多力量。

现场全员大合照
获取大会PPT、查看直播回放
- 大会PPT 查看"2023渝FE重庆前端交流会"各位嘉宾演讲材料的PDF文件,请访问链接:传送门
- 直播回放 交流会直播间为大家生成了所有分享的直播回放,大家可以微信关注"支付宝体验科技"公众号,查看直播回放内容,入口截图如下:
️ 大会精彩回顾
开场演讲
首先是由RichLab团队负责人完颜带来开场致辞。完颜从大会主旨:不破不立、勇于创新出发,探讨了前端发展过程所带来的机遇与挑战,分享了自身对前端困境的理解以及如何脱困的思考。

完颜:大会开场致辞
嘉宾分享
《新一代前端发展的困境与破局》 ------ 侑夕 / 飞猪
来自飞猪的侑夕老师,为观众们带来他关于当代前端发展现状、面临的困境与破局方向的思考。

随着技术的飞速革新、前端工具层出不穷的变化,前端工作对技术广度、深度的要求越来越高,前端研发者需要涉猎的领域、了解的知识、关注的点也越来越多。

从这些日新月异的变化中,逐渐延伸出前端研发者所面临的新的困境:年龄焦虑、天花板低、内卷过度、行情不好等。

面对这些困境,新一代前端的应充分利用诸如科班出身、全局视角、全站研发等自身优势,调整心态,不单纯只做前端,而是朝产品工程师的发展方向,提升自己的综合能力,做到能讲明白事情、能把事情做成、做出易于使用的产品,从而提升自己的核心竞争力。

总的来说,建议从以下方面出发调整自己的工作状态:
- 快乐地写代码比其他事情更重要;
- 工程师应该很明白地做事;
- 不做传统前端,去做产品工程师;
- 做一个给业务帮忙的前端;
- 提升自己的工程师实力。
《懂车帝数字资产管理和创作技术创新之路》 ------ 胡晓晖 / 懂车帝
来自懂车帝的胡晓晖老师,围绕业务背景、3D资产实践、资产管理和创作三方面,分享了将数字资产管理和创作技术落地到具体业务场景的经验。

业务背景方面,胡晓晖老师介绍了包括AR/VR、3D看车、3D混排等实际场景。

资产实践方面,胡晓晖老师介绍了包括3D汽车建模、模型制作、3D工具链等技术方向,并列举诸如逆向建模、360图、3D素材创作平台、裸眼视频、骑姿工具等具体业务场景。

随着资产的不断累加,必然会有资产管理的诉求。资产管理和创作方面,胡晓晖老师分享了3D模型管理编辑、数字资产管理创作等领域的最佳实践。

《Rust 在前端:构建高性能前端打包工具》------ 辟殊 / 蚂蚁
辟殊老师从"打包工具"的定义出发,延伸出高性能打包工具在实际研发场景的必要性,以及选用Rust的理由:高性能、可靠性、生产力。

以此为基础,辟殊老师逐步深入讲解如何快速理解Rust的核心概念,以及如何快速上手Rust投入研发工作。

就项目尺寸问题,辟殊老师提出压缩、常量折叠、Tree-shaking、Re-tree-shaking等解决方案并深入探讨。随之而来的是对性能优化的讨论,通过Benchmark+火焰图来定位性能问题,再通过puffin工具逐步优化性能。

最后,辟殊老师介绍了Mako打包工具的架构设计及未来规划。

《基于数据驱动的前端研发模式》------ 彦奇 / 蚂蚁
彦奇老师围绕前端低码发展历程及现状、在数据驱动上的研发实践、对低码行业的思考和总结三方面内容展开分享。

从前端应用构成和前端应用开发过程出发,彦奇老师指出传统研发模式中,效率、成本和幸福感三者之间的矛盾问题。

在此基础上,彦奇老师将现有研发模式分为源码研发、低码搭建、无码配置、智能生成四个等级。并从低码搭建的角度切入,深入探讨了数据驱动开发模式的推导及实现。


最后,彦奇老师以"合则生,分则死"的深刻的行业思考结束了此次分享。

《音乐可视化渲染:前端开发中的艺术与技术》------ 黄保山 / 中移物联网
黄保山老师从可视化的业务属性和技术属性出发,渐进推及到音乐可视化。

黄保山老师从声音即为震动的物理属性触发,推导出音乐可视化的数据处理的基本原理,以快速傅里叶变换获取音频素材的频域数据、时域数据。

黄保山老师通过Echarts可视化工具将获取的数据以2D、3D可视化图表的形式呈现,从颜色、形状、节奏等多个交互层面体现音频素材的数据特点。

黄保山老师通过演示诸如动态条形图、3D渲染图、钢琴图等具体的Demo,向参会的观众详实呈现了web可视化技术与音乐艺术有机结合后的美妙结果。

Light Talk
紧接嘉宾分享之后的LightTalk环节也是精彩纷呈,分享涵盖前端3D、远程工作探讨、AI分析、Language UI、跨端开发等多个方向的前沿资讯。
Light Talk详情可访问链接查看:2023重庆交流会Light Talk总览
LightTalk 《前端如何从零开发 Web3D 项目》------ 睿祺 / 蚂蚁

LightTalk 《远程工作的A面与B面》------ 钟典 / 远程工作者

LightTalk 《从 Touch UI 到 Language UI》------ 满昌 / 蚂蚁

LightTalk 《AI助力用户体验分析》------ 田婷 / 富民银行

LightTalk 《跨端开发新思路探索》------ 杨梦琴 / 腾讯云
致谢
最后,感谢本次大会的主办方、合作平台、分享嘉宾及各位幕后的工作人员,希望未来有更多公司和个人一起参与进来,让这场有意义的事情能持续下去并且越办越好,服务和影响更多的同学,携手建立共同成长的交流渠道,为行业进步贡献力所能及的力量。

主办方

RichLab 蚂蚁消费金融前端团队,负责消费金融业务板块,旗下产品拥有国内顶级的消费者群体,深受广大用户喜爱。
社区指引 :RichLab的天空、蚂蚁RichLab前端团队
特别鸣谢
排名不分先后
