拓展一下视野 - 2023QCon大会前端相关专题

昨天有幸参加了QCon全球软件开发大会，分享几个和前端相关的专题，相关ppt下载在文章末尾。

--本文由前端技术江湖整理。

大型活动中，Web 场景动效的那些事儿

image.png

在去年的 GMTC 大会上，我曾分享过快手在 2021 CNY 春晚活动中的降级方案设计与稳定性保障的经验。在新的一年里，出于对性能和稳定性等需要的更高要求，以及对更加高效的上下游协作的追求，快手进一步深挖了 Web 场景下的动效的实现方式、性能优化手段以及协作流程，本次演讲将对此进行讲解，希望能给大家带来一些启发。

基于代码虚拟化的 H5 安全加固方案

image.png

由于 JavaScript 脚本语言特性，代码是公开透明，这个原因也致使 JavaScript 代码是不安全的，任何人都可以直接获取源代码阅读、分析、复制、盗用，甚至篡改。如果不想让 JavaScript 代码被恶意篡改攻击，保障业务的安全，那么使用 JavaScript 保护是必需的。本议题将通过对 H5 应用安全现状及风险的分析，给大家带来关于 58 在基于代码虚拟化的 H5 安全加固方案的案例实践。

技术领导力实战

image.png

多数优秀的工程师，在工作 5-10 年后，就会被组织委以更大的责任，以小组长或者管理者的身份走上技术领导之路，负责或大或小的业务交付和技术决策。这一转变相较于独立的技术贡献来说，需要不同的思维模式和实践方法。本次分享我将结合自身的实际经历讲述相关案例及经验。

ppt下载：https://static001.geekbang.org/con/106/pdf/1778050736/file/%E6%8A%80%E6%9C%AF%E9%A2%86%E5%AF%BC%E5%8A%9B%E5%AE%9E%E6%88%98-%E8%AE%B8%E6%99%93%E6%96%8C.pdf

工程师成长中的金字塔思维

image.png

高德前端基建是如何炼成的

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

image.png

基于 Electron 的跨平台应用的全方位质量保障体系

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

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

基于本质的企业级设计系统

image.png

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

1. 很多组件库大多基于新语言再造一次轮子，本质没有改变；

2. UI 组件库+设计规范方式依赖人对规则的执行程度难以落地，在大规模研发中不能有效保证系统整齐划一；

3. 目前行业技术方案以前端技术为主，随着前端技术门槛越来越高，初级前端及后端等其他研发工种介入后难以写出高质量产品；

4. 现有设计、技术方案是一种具象的表达，针对跨端、交互变更弹性不足。

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

哈啰基于 Web Components 的跨技术栈组件库实践

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

image.png

标准化组件在美团的实践

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

OpenSumi 演进之路——云研发背景下的应用与实践

image.png

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

最后，以上专题的ppt下载已整理好，在公众号聊天框输入 "2023qcon" 即可全部领取。