高德前端从初创期、发展期到稳定期完成了以 IDE 为核心的跨端技术体系、跨端发布体系以及近几年结合高德客户端业务场景，探索出了 Lowcode 搭建投放、FaaS 端云一体化、智能化 D2C、设计研发一体化等新的研发模式；那么这些基建背后是怎么思考的，对于前端同学有哪些参考意义，有哪些方法论可以指导前端基建。

演讲提纲：
1. 业务与技术的演进

• 出行工具到超级 App 的升级 
• 跨端：给高德地图插上翅膀 

2. 高德基建如何炼成

• 基建矩阵思考 
• 借力前端生态 
• 高德跨端生态延展 
• “五独”架构拆解巨石应用 
• 流量之殇 

3. 未来展望

你将获得：

• 了解体系化的前端基建知识，以及如何根据业务特点和阶段因地制宜地制定目标和实施手段
• 探讨基建在和业务的伴生关系当中遇到的困阻和如何破局

界面整齐划一，开发高效敏捷是 ToB 系统设计的核心目标，针对这个目标行业诞生了很多优秀的 UI 组件库，大大提升了 B 端产品研发效率。但近几年行业 B 端 UI 组件库在成长过程中也似乎遇到了一些瓶颈：

1. 很多组件库大多基于新语言再造一次轮子，本质没有改变；
2. UI 组件库+设计规范方式依赖人对规则的执行程度难以落地，在大规模研发中不能有效保证系统整齐划一；
3. 目前行业技术方案以前端技术为主，随着前端技术门槛越来越高，初级前端及后端等其他研发工种介入后难以写出高质量产品； 
4. 现有设计、技术方案是一种具象的表达，针对跨端、交互变更弹性不足。 

多点在 3 年多的过程中，拉通交互、UI、研发探索了一套基于本质的企业级设计系统 CabinX，从全新的角度以事物本质结合设计、工程化体系探索 B 端设计体系，目前在公司全面推广，实现了上百个系统，反应良好，希望借助本次大会和大家探讨 B 端设计体系新思路，为 ToB 体验贡献薄弱的力量。

演讲提纲：
1. B 端设计准则 
2. 基于本质的设计理念 
3. 基于本质在跨端领域应用 
4. 基于本质的 DML 语言设计 
5. 工程化技术方案支撑 

你将获得：

• 全新的 B 端 UI 组件库设计思路 
• 体验式跨端新思路
• 前端工程化技术设计理念 
• 如何创造适合后端使用的 DSL 

近两年，开发者面临两大挑战：一是新冠疫情倒逼全球数字化升级，面对井喷式需求，要求开发者更短时间、更高效率地交付应用；二是小程序被头部厂商验证成功，更多大中型应用厂商随之推出各自不同规范的小程序，前端需适配更多不同的终端环境。面对更多应用、更多平台的需求挑战，开发者需要在设计、编码、联调、测试、发布、运维等各个环节进行基建升级。另外，近些年，国内正在形成一种有自己特色的互联网环境（如：移动支付、不同平台小程序、智能制造/物联网等），国内外环境差异愈来愈大；为适应这种差异，需要与之匹配的国产数字基建。

DCloud 作为一家专为开发者服务的团队，多年来坚持在“开发工具”、“端引擎”、“云引擎”方向上进行基础设施建设。通过 IDE、跨端框架、Serverless 组合出“云端一体”的开发模式，帮助前端工程师提效并赋能。目前IDE（HBuilderX）累计用户超过900万，跨端框架（uni-app）引擎月活超 10 亿。本次分享将会介绍 DCloud 面向前端的基建思考，以及前端开发者如何借助云端一体方案，拓展自己的能力及职业边界。

演讲提纲：
1. 高效生产数字应用的挑战

• 终端大分裂
• 团队强依赖
• 产业弱协作

2. 面向开发者的数字基建

• IDE：提高编码效率
• 框架：减少跨端投入
• Serverless：前端触达业务，减少后端联调依赖
• 生态：产业协作，快速组装应用

3. 未来展望

你将获得：

• 了解 DCloud 面向开发者打造的基建逻辑
• 了解云端一体方案及对前端的效率提升
• 前端工程师如何更简单的拓展自身能力、职业边界

前端技术栈（React、Vue 等）每年更新迭代是近年来的一种常态，随之依赖技术栈的组件库也需要经常变更，这让项目升级迭代和维护变得非常困难。为了让组件能超越框架而存在，我们使用了 Web Components 去搭建了一套与众不同的 UI 组件，它拥有以下优点：其一，原生支持，不需要任何框架即可完成开发，同时也意味着这将有更好的用户体验、更低的网络请求，以及更稳定的迭代前景。其二，无排他性，组件可以同时在 React、Vue、Preact、Angular 或原生 JS 等任意框架或无框架中使用，这意味着对 Quark 的支持无需大刀阔斧的颠覆现有逻辑体系，可以直接项目中接入使用。其三，性能优势，Shadow Dom 使得每个组件都拥有自己的根节点，因此对主 DOM 没有侵入性，并且 CSS、事件的有效隔离，不用担心不同组件之间的样式和事件污染。
 

演讲提纲：
1. Web Components 技术介绍
2. Web Components 常见问题＆技术挑战＆解决方案 
3. 如何从零构建一个简单的 Web Components 组件
4. 哈啰自研 Web Components 开发框架建设
5. 跨技术栈的组件库——Quark 的实现及成果展示
6. 下一步，打造跨小程序侧的组件库建设
7. 总结＆展望 

你将获得：

• 了解哈啰在 Web Components 的实践经验，来建设补充自己的 Web Components 跨技术栈技术方案
• 了解如何打造国内首个能用于生产环境跨技术栈组件库
• 学习 Web Components 技术建设注意点
• 了解如何打造高质量、易扩展的跨技术栈组件体系
• 学习如何迁移 Web Components 组件体系到小程序侧

随着前端的发展，多技术栈在业务中应用已经成为常态，体验一致性、一码多端、低代码等技术被频繁提及和应用，在多技术栈应用中，如何保障复杂业务场景设计规范可落地、可观测是一项挑战的事情。MTDUI（Meituan Design UI）是美团一套标准化组件，经过 4 年的不断迭代，我们把 MTDUI 打造为前端一种新基建，实现研发提效和多角色协作，MTDUI 支持多种技术栈，通过统一的 API，降低用户在技术栈间切换的成本，通过标准化各工具产出物，达到不同角色间物料智能化替换，提升协作效率。目前 MTDUI 在美团内广泛应用，覆盖超过 1000+ 前端项目，超半数设计师在使用。本次分享为大家解读 MTDUI 的架构设计思想和在业务实践经验，介绍我们是如何把标准化组件打造为一种新的前端基建。

演讲提纲：
1. 标准化组件是一种新基建

• 我们面临什么问题？
• 问题分析及解决思路是什么？
• 标准化组件特点是什么？

2. 标准化组件实现过程

• 开发者视角如何实现标准化组件？
• 业务视角如何定制业务标准化组件？
• 用户视角如何使用标准化组件？
• 总结

3. 总结和规划

你将获得：

• 了解美团在标准化组件的演进路程
• 了解标准化组件在产研协作中起到的作用
• 了解复杂业务场景设计规范可落地、可观测思路

使用前端技术栈搭建桌面应用是近年来大前端的一个重要发展趋势。为了在快速迭代的同时保障产品质量，我们探索出了一套基于 Electron 的跨平台应用的全方位质量保障体系：其一，持续代码评审、自动化单元测试和功能测试，保障版本功能正常，减轻开发和测试同学的发版负担。其二，自动化性能测试，建立性能指标和监控体系，自动化回归每个版本的性能，保障产品的性能和体验。其三，挂机检测，通过长时间挂机过程中的内存、CPU、Crash 等指标反馈，提前发现相关问题。最后，打通 CI/CD 与监控预警平台，提供完善的问题定位日志，让开发团队能够实时收到各个环节的问题，做到持续监控。

在上述体系的帮助下，能有效减少开发团队发现问题排查问题的反应时间，让产品的质量得到有效保障。本次演讲将提炼我们的经验方法予以分享，助力同领域的前端开发者。

演讲提纲：
1. 介绍大型 Electron 应用在版本迭代中的质量痛点

• Electron 应用的质量保障与传统 Web 网页的差异
• 大型 Electron 应用中的质量问题

2. 全方位质量保障体系设计

• 整体架构设计
• 开发过程质量保障
  • 持续代码评审
  • 单元测试
  • 圈复杂度检测
• 持续集成质量保障
  • 自动化功能测试
  • 系统测试
• 性能质量保障
  • 自动化性能测试
    • 建立性能指标和监控体系
    • 主干性能监控
    • 自动化版本性能对比
  • 自动化挂机检测：模拟用户挂机行为，检测 crash 与挂机性能
• 问题闭环
  • 案例总结存档，对开发人员培训

3. 效果与展望

• 效果
  • 应用性能可量化，版本数据清晰透明
  • 隐藏问题提前暴露，产品质量更有保障
• 愿景规划

你将获得：

• 了解前端桌面应用开发需要关注的质量问题，收获很有参考价值的质量基建实践经验，开拓眼界和思路。
• 适用于关注 Electron 平台基建和实践的听众，也可为传统前端项目的 Devops 建设提供一定的参考意义。

传统研发中，开发者通常使用日常的文本编辑器进行编码工作，从本地机器到服务器，VIM 和 Emacs 等基于终端的文本编辑器以及 VS Code 等基于 GUI 的文本编辑器仍然是许多开发者的首选。然而，随着云服务的日益普及导致 CloudIDE 的兴起，越来越多的厂商开始布局并推出云端的研发能力，如 GitHub Codespaces、CodeSandbox 、华为云 CloudIDE、阿里云 CloudIDE 等。IDE 产品一般涵盖了多种功能（如文件树、编辑器、调试、搜索等）的组合，研发产品本身是一件门槛较高的事情，后续持续化的定制也会反复受前期建设限制，整体研发是一件投入大，产出慢的事情。而在阿里和蚂蚁集团内部，我们通过一种底层共建的模式，历时 3 年时间，共同研发并推出了一款公共的 IDE 研发框架 OpenSumi，期间积累了大量在业务场景下的实践与探索经验，通过这个框架，能真正让 IDE 产品的定制化研发更加简单高效。

本次演讲将从业务场景出发（如：模块搭建场景、代码预览场景、云端一体化场景等），并结合真实的业务应用（如：淘宝/支付宝小程序开发工具、O2 客户端、AntCodespaces 等），阐述 OpenSumi 在 IDE 产品建设中发挥的作用及具体方案，带你了解如何通过 IDE 产品来为开发者提供一站式的解决方案及研发体验。 
 
演讲提纲：
1. OpenSumi 是什么？

• 简介
• 产生背景（为什么要做 OpenSumi）
• 解决的实际问题及目标
• 与 VS Code 及 Theia 之间的差异
  • 插件体系
  • 基础能力
  • 目标群体
• 为何要兼容 VS Code 生态

2. IDE 定制化研发的应用场景

• 常见的 IDE 研发场景
  • Electron 本地客户端
  • Cloud IDE 场景
  • 纯前端场景

3. 面临的技术挑战

• 多端部署架构带来的技术挑战及解法
• 性能与体验的平衡
• 如何跟进 VS Code Extension API 
• 如何做到更简单丰富的定制
• ...

4. 开发体验

• 演示 Web / Electron 环境下的集成
• 演示 OpenSumi 每日构建版本功能

5. 开源至今的一些变化及感悟

• 框架演进情况
• 版本维护流程
• 如何保障稳定性
• 2022 年的一些目标和计划
• 业界近况

6. 总结 & 未来展望

你将获得：

• 认识 OpenSumi，了解如何依托其高度定制能力进行垂直场景的产品研发
• 了解阿里集团在云研发前端基建这块所做的探索与建设
• 目前 IDE 领域目前面临的一些挑战，以及未来与业务相结合情况下的一些可能性