前端18个月难度翻番？来这里把握大前端技术本质进展丨稀土开发者大会

“别更新了，学不动了”向来是前端开发群体的切肤之痛：

• React 还没学明白，Vue 就出来了；

• Vue 2.0 还没上手，3.0 就发布了；

• Node 刚精通，Deno 又 1.0 了；

• Flutter 刚流行，Flutter 又被唱衰了；

• 就更别提原生、跨端、混合开发的循环往复了。

所以前端圈曾经有一位技术专家下过深切的论断——前端 18 个月难度翻番。此言道出了前端领域更新换代之快背后的前端开发血泪史。也因此，“别更新了，学不动了”这句话成为了不少前端开发玩梗的口头禅。

但从国内前端专家月影的角度看，如果你不盲目地去追求所谓的“时髦”技术，不去刻意担心自己是否落伍，而是去多观察这个行业，找到技术发展内在的规律和脉络，那么你就知道该如何前进，不会有任何恐慌。

在任何一个领域或方向，知识体系都可以大体上分为基础知识和领域知识，而领域知识又可以分为通用领域知识和专用领域知识。二者的变化是不一样的，基础知识的变化最慢，其次是通用领域知识，然后是专用领域知识。深入学习基础知识，按需学习领域知识，这就是把握技术本质的基本逻辑。

2021 年 10月 27-28 日，由稀土掘金社区举办的首届稀土开发者大会，将体系化地呈现当前国内大前端领域的技术发展，带给参会者对大前端技术发展的本质脉络。目前大会设置了「大前端工程与架构」、「大前端性能优化」、「大前端技术探索」三个专题，邀请了国内一线大厂前端技术专家分享精彩实践经验。

大前端工程与架构

专题简介：

前端工程与架构随着互联网的发展，企业业务的不断深入与变化，前后端不断拆分与重组；前端架构形态也不断调整，之前火热的前端中台、微前端也不断更替；现在前端架构在企业发展现状如何，我们来一起探索。

出品人：张飞彪字节跳动创意生态技术负责人

现就职于字节跳动上海研发中心，担任创意生态技术负责人，之前曾负责抖音电商上海研发团队、抖音音乐项目、小红书客户端。毕业于华东师范大学数学系国家理科基地班，自学完计算机专业的所有主干课程，从事移动软件开发工作十年以上，先后参与过 Windows Mobile、Windows Phone、嵌入式、 Android 以及 iOS 等平台的 App 和框架开发，主导了多款大中型 App 的研发，也曾作为客户端架构师负责过 Android、iOS、Web 三端的基础架构设计和演进，在移动架构、跨平台开发等大前端领域具有丰富的研发和管理经验。

议题介绍：

议题一：《支付宝钱包动态化技术方案的现状和演进》——王佐蚂蚁集团支付宝事业群小程序技术部高级技术专家

支付宝在 17 年左右启动了钱包下一代动态化技术方案Cube。在过去的 4 年中，通过业务的打磨，逐渐形成了两个技术产品。一个是面向移动端应用开发的动态卡片技术栈，在原生的 Native 页面中嵌入动态卡片；开发者使用类 Vue 的语法编写动态卡片的布局和逻辑，发布即可见，从而提高原生页面的运营效率。一个是面向 IoT 应用开发的小程序技术栈，向低端设备上的开发者提供提供小程序技术，目前主要应用于电视/收银台等场景。

议题二：《美团企业应用前端工程化实践》——杨林美团基础研发前端技术专家

在美团，支撑业务高效运转的企业应用是较为复杂的ToB 业务，包括 HR、财务和 ERP 等业务，这些领域下有100+ 系统，几千个页面，特点是系统多，交互复杂，业务迭代快，本次分享介绍我们建设大型的ToB 应用的过程，如何通过“微前端架构+开发模板化”的工程化方式，支持众多业务线并行需求迭代，协同几百人团队快速交付。

议题三：《简洁的艺术 —— astro 带来的全新体验》——薛英琛字节跳动小程序前端开发工程师

现代前端开发技术的演进史几乎就是 JavaScript 的发展史，我们越来越少去直接编写 HTML/CSS，转而将这项工作交给各类 JavaScript 框架与工具，但是这并不是无痛的抽象，很明显我们正在为无限的自由买单。 Astro 是解决这个问题的一种选择。它利用 partial-hydrate 的手段，结合用户交互特点，尽量地按需加载，同时在编译时自动识别内容去做静态化。另外，它也天然支持微前端，结合一整套 bundleless 开发链路，大幅提升开发者构建复杂的前端应用的开发体验。

议题四：《贝壳视觉物料生产平台的架构与实践》——闫士博贝壳找房资深前端工程师

随着业务发展，公司的视频、图片等各类物料的需求日益增长，开发与设计的人力捉襟见肘。贝壳视觉物料生产平台，是前端技术创新与架构赋能业务的典型，通过自动识别各类设计稿，加之图文、视频、动态 GIF 的可视化编辑与数据配置，统一视觉物料的生产管理能力，支持各业务低成本完成物料相关需求，并赋予上千运营人员直接制作视觉物料的能力，大大提高产研效率，为公司的业务运营保驾护航。

大前端性能优化

专题简介：

在移动互联网时代，由于设备资源、网络等因素，性能优化显得尤为重要，反之，性能不友好的产品，用户流失率极高。本专场将邀请在 Web 前端、渲染引擎和特定场景下有速度优化经验的技术专家，通过对性能优化优化工具及技术，去分享其在端上的实践经验。

出品人：梁士兴美团买菜终端研发负责人

2009 年毕业于北京航空航天大学，2014 年 7 月份加入到美团，现任美团买菜终端研发组负责人。

多年从事大前端方向的技术研发工作，对应用架构演变、大前端工程化建设以及大前端的技术发展趋势有浓厚的兴趣，希望能够与大家进行交流和分享。

议题介绍：

议题一：《手淘跨平台引擎架构与未来演进》——彭涛（龙冥）阿里巴巴无线技术专家

互联网业务如火如荼的飞速发展，新的跨平台技术也随着历史的浪潮在探索和实践中不断涌现，最成熟的跨平台技术莫过于大家熟知的浏览器技术。标准化以及其强大的生态，加上硬件的不断升级所带来的性能红利使它一直占据着举足轻重的重要地位，随着业务复杂度的不断提升，从后来的 Weex/React Native，到现在如火如荼的 Flutter，也标志着新一代跨平台架构已升级为自绘渲染，高性能脚本引擎等内核技术深水区。如何满足差异化业务场景，依托前端成熟的生态与标准化，减少业务的迁移适配成本，通过一套跨端内核引擎支持多App，以至多生态乃至不同的前端框架，成为了跨平台架构的新挑战。本次将分享从手淘几年来随着业务发展所带来架构升级思考，核心性能瓶颈的突破以及对未来几年内跨平台架构的探索方向，希望能与您产生技术上的共鸣与互勉。

议题二：《预加载技术在百度 App 上的应用》——杨刚百度百度 App T7 浏览内核研发工程师、整体内核技术负责人

随着移动设备性能的整体提升（CPU、内存、网络等），越来越多的移动应用通过预取技术来优化 H5 相关业务的首屏性能，百度 App 也在很多业务场景使用了这一技术。预取技术很诱人，对打开速度往往可以起到立竿见影的效果，但在移动端相比 PC 还是有很多需要注意的事项，比如，由于 32 位运行模式的关系，内存仍然是一个需要高度关注的一个点。本次主题将通过对移动端H5 业务速度拆解、常用优化手段特别是预取技术的原理及优缺点入手，梳理预取技术的注意事项，以及预取技术在百度app的应用实践过程。

议题三：《前端页面加载性能优化实践及运维》——王梓童美团买菜事业部 iOS 开发工程师

随着业务不断地发展，美团开始引入 RN 用于解决对开发效率和更新速度的需求，同时使用H5 支撑数量繁多的营销活动。RN、H5 在性能上相较 Native 技术有着天然的劣势。如何在享受开发迭代效率提升的同时，满足用户日益严苛的性能体验要求，成为每个移动开发者追求的目标。为此，作为美团的新业务团队，在2021年上半年度对性能进行了专项优化；在半年时间里，将RN 页面 1s 内渲染出首屏的比例由40%提升至了85%，实现了页面秒开甚至近乎直出的性能体验，H5 TP90 首屏时间由也从 4500ms 降低到了 2000ms。本次分享将深入 RN、H5 的技术原理，分析优化思路，系统性介绍在美团有着丰富实践的成熟优化措施，以及相关指标是如何监控运维的。相信经过本次分享交流，你可以更全面地了解前端性能的优化方案，并结合自己 App 的实际情况落地。

议题四：《小红书搭建秒开 H5 的关键技术设计》——杨远翔小红书电商技术部电商大前端负责人

首屏性能一直在快迭代H5 业务中被人诟病，尤其是在无法定制首屏优化，有丰富内容的运营搭建场景。我们吸取了近几年业界公开关于性能探索中宝贵实践经验，在搭建业务中逐步探索、沉淀出一套基于"真实用户体感秒开"的技术方案。全员参与(前后端、QA、产品视觉)，管"挖"管"埋"。

大前端技术探索

专题简介：

随着互联网不断发展，前端技术也跟上班车；Vue发布 3.0 新特性，React 版本也到了 V17；连 Flutter 也开始和 XD 紧密联系。本专题将聚焦 2021 新技术及未来前端领域的新技术发展趋势。

出品人：李玉北字节跳动 Web Infra 团队负责人

开源爱好者，热爱 JavaScript 社区，目前负责字节跳动 Web Infra 团队 (https://webinfra.org/sg)。团队的职责是维护公司前端的技术设施和服务（例如：Node.js、Serverless、跨端解决方案等等），并同时打造下一代的 Web 开发引擎，重塑基于 Web 技术栈的应用的开发流程。

议题介绍：

议题一：《开发、维护与微循环》——张立理百度EE 前端架构师

在一个相对长期维护与发展的应用中，开发者需要更多时间面对功能的增量迭代、已有功能的调整、修复与优化等情况。

传统的初始脚手架、构建工具、代码生成等虽有助于项目从零到一的快速启动，但在增量迭代中难以发挥持续地效益。

项目的长期持续开发是一个个人能力、开发模式、团队协作紧密结合的过程，本次分享将介绍一种基于组件化的开发形式，力求通过统一的手段进行工作的分解，在细粒度上完成定义、开发、验证、冻结的研发循环，进而保持合适的开发节奏、效率、质量。

议题二：《从历史的演进来看前端业务工程的发展》——俞天翔快手 Web开发探索组前端负责人

从“上古时期”的模板拼装到“MV*”的大量被使用；从 jQuery 一统天下到Vue/React 逐步成为全民框架；从 PC 时代到移动时代，从 2B 到 2C，前端 er 们似乎一直都在探索路上不断前进。在历史的发展进程中，我们是否能够积累出属于我们的工程方案，以应对业务的持续发展。本次分享将结合讲者在过去工作中的经验以及大型活动的“惨痛”开发经历，针对如何对工程进行设计，将工程中变与不变的部分进行拆解，将业务开发逐步演变成“填空题”，保证持续交付和有效积累。

议题三：MWA（现代 Web 应用）框架和 Modern JS 工程方案——宋振伟字节跳动 Web Infra研发工程师

前端开发和 Web 开发中出现的范式转移都已经累积到接近革命的程度，字节跳动 Web Infra 前段时间介绍了「现代Web 开发」范式和、Modern Web Stack、MWA 这些新一代技术，这次会进一步基于 Modern.js 开源项目来介绍 MWA 框架、现代Web 工程方案。

此外，混沌工程、云原生、分布式数据库、低代码、机器学习、音视频技术等专场议题讲师已全部上线，目前大会线上直播免费预约火热进行中，点击底部阅读原文直达大会官网，了解更多专题详情。