昨天有幸参加了QCon全球软件开发大会,分享几个和前端相关的专题,相关ppt下载在文章末尾。
--本文由前端技术江湖整理。
大型活动中,Web 场景动效的那些事儿
![737fa8a01a600f4cc647b48b60e36e10.png](https://i-blog.csdnimg.cn/blog_migrate/db97de7cb8a9dec4a6a893fd0a2c663c.png)
在去年的 GMTC 大会上,我曾分享过快手在 2021 CNY 春晚活动中的降级方案设计与稳定性保障的经验。在新的一年里,出于对性能和稳定性等需要的更高要求,以及对更加高效的上下游协作的追求,快手进一步深挖了 Web 场景下的动效的实现方式、性能优化手段以及协作流程,本次演讲将对此进行讲解,希望能给大家带来一些启发。
基于代码虚拟化的 H5 安全加固方案
![2dfa988df59bedf3ab9b5c79fe828e8d.png](https://i-blog.csdnimg.cn/blog_migrate/a12c2592a98c60a5aa664cca056318f4.png)
由于 JavaScript 脚本语言特性,代码是公开透明,这个原因也致使 JavaScript 代码是不安全的,任何人都可以直接获取源代码阅读、分析、复制、盗用,甚至篡改。如果不想让 JavaScript 代码被恶意篡改攻击,保障业务的安全,那么使用 JavaScript 保护是必需的。本议题将通过对 H5 应用安全现状及风险的分析,给大家带来关于 58 在基于代码虚拟化的 H5 安全加固方案的案例实践。
技术领导力实战
![ca725aff4d7bbc58896942a1bb80c8d9.png](https://i-blog.csdnimg.cn/blog_migrate/67469aa0abe70f22eaa948c7cbfc26e0.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
工程师成长中的金字塔思维
![4d7888ec7f0f8acfea263ac9658f1ef4.png](https://i-blog.csdnimg.cn/blog_migrate/79cde47e2eb6ddbc7aed65f8328aeaed.png)
高德前端基建是如何炼成的
高德前端从初创期、发展期到稳定期完成了以 IDE 为核心的跨端技术体系、跨端发布体系以及近几年结合高德客户端业务场景,探索出了 Lowcode 搭建投放、FaaS 端云一体化、智能化 D2C、设计研发一体化等新的研发模式;那么这些基建背后是怎么思考的,对于前端同学有哪些参考意义,有哪些方法论可以指导前端基建。
![c2f06d539ac2838c35bb6767d9d2eda3.png](https://i-blog.csdnimg.cn/blog_migrate/aa750e4512b52a5a40bbe0bbf7cb803a.png)
基于 Electron 的跨平台应用的全方位质量保障体系
使用前端技术栈搭建桌面应用是近年来大前端的一个重要发展趋势。为了在快速迭代的同时保障产品质量,我们探索出了一套基于 Electron 的跨平台应用的全方位质量保障体系:其一,持续代码评审、自动化单元测试和功能测试,保障版本功能正常,减轻开发和测试同学的发版负担。其二,自动化性能测试,建立性能指标和监控体系,自动化回归每个版本的性能,保障产品的性能和体验。其三,挂机检测,通过长时间挂机过程中的内存、CPU、Crash 等指标反馈,提前发现相关问题。最后,打通 CI/CD 与监控预警平台,提供完善的问题定位日志,让开发团队能够实时收到各个环节的问题,做到持续监控。
在上述体系的帮助下,能有效减少开发团队发现问题排查问题的反应时间,让产品的质量得到有效保障。本次演讲将提炼我们的经验方法予以分享,助力同领域的前端开发者。
基于本质的企业级设计系统
![1ba70e73d1a023b59fdb7da5d83fffbb.png](https://i-blog.csdnimg.cn/blog_migrate/d41583e94496582a1d4c4c2a576f04fa.png)
界面整齐划一,开发高效敏捷是 ToB 系统设计的核心目标,针对这个目标行业诞生了很多优秀的 UI 组件库,大大提升了 B 端产品研发效率。但近几年行业 B 端 UI 组件库在成长过程中也似乎遇到了一些瓶颈:
很多组件库大多基于新语言再造一次轮子,本质没有改变;
UI 组件库+设计规范方式依赖人对规则的执行程度难以落地,在大规模研发中不能有效保证系统整齐划一;
目前行业技术方案以前端技术为主,随着前端技术门槛越来越高,初级前端及后端等其他研发工种介入后难以写出高质量产品;
现有设计、技术方案是一种具象的表达,针对跨端、交互变更弹性不足。
多点在 3 年多的过程中,拉通交互、UI、研发探索了一套基于本质的企业级设计系统 CabinX,从全新的角度以事物本质结合设计、工程化体系探索 B 端设计体系,目前在公司全面推广,实现了上百个系统,反应良好,希望借助本次大会和大家探讨 B 端设计体系新思路,为 ToB 体验贡献薄弱的力量。
哈啰基于 Web Components 的跨技术栈组件库实践
前端技术栈(React、Vue 等)每年更新迭代是近年来的一种常态,随之依赖技术栈的组件库也需要经常变更,这让项目升级迭代和维护变得非常困难。为了让组件能超越框架而存在,我们使用了 Web Components 去搭建了一套与众不同的 UI 组件,它拥有以下优点:其一,原生支持,不需要任何框架即可完成开发,同时也意味着这将有更好的用户体验、更低的网络请求,以及更稳定的迭代前景。其二,无排他性,组件可以同时在 React、Vue、Preact、Angular 或原生 JS 等任意框架或无框架中使用,这意味着对 Quark 的支持无需大刀阔斧的颠覆现有逻辑体系,可以直接项目中接入使用。其三,性能优势,Shadow Dom 使得每个组件都拥有自己的根节点,因此对主 DOM 没有侵入性,并且 CSS、事件的有效隔离,不用担心不同组件之间的样式和事件污染。
![7215cc9bed99823a661a7dd226a6b9d2.png](https://i-blog.csdnimg.cn/blog_migrate/f74ba4cc00d287d9523eac940cc48454.png)
标准化组件在美团的实践
随着前端的发展,多技术栈在业务中应用已经成为常态,体验一致性、一码多端、低代码等技术被频繁提及和应用,在多技术栈应用中,如何保障复杂业务场景设计规范可落地、可观测是一项挑战的事情。MTDUI(Meituan Design UI)是美团一套标准化组件,经过 4 年的不断迭代,我们把 MTDUI 打造为前端一种新基建,实现研发提效和多角色协作,MTDUI 支持多种技术栈,通过统一的 API,降低用户在技术栈间切换的成本,通过标准化各工具产出物,达到不同角色间物料智能化替换,提升协作效率。目前 MTDUI 在美团内广泛应用,覆盖超过 1000+ 前端项目,超半数设计师在使用。本次分享为大家解读 MTDUI 的架构设计思想和在业务实践经验,介绍我们是如何把标准化组件打造为一种新的前端基建。
OpenSumi 演进之路——云研发背景下的应用与实践
![7836f22cccf1987cf7a296ff54b8bd3c.png](https://i-blog.csdnimg.cn/blog_migrate/ee5688eb3202f3ed0447321ca7f6e53d.png)
传统研发中,开发者通常使用日常的文本编辑器进行编码工作,从本地机器到服务器,VIM 和 Emacs 等基于终端的文本编辑器以及 VS Code 等基于 GUI 的文本编辑器仍然是许多开发者的首选。然而,随着云服务的日益普及导致 CloudIDE 的兴起,越来越多的厂商开始布局并推出云端的研发能力,如 GitHub Codespaces、CodeSandbox 、华为云 CloudIDE、阿里云 CloudIDE 等。IDE 产品一般涵盖了多种功能(如文件树、编辑器、调试、搜索等)的组合,研发产品本身是一件门槛较高的事情,后续持续化的定制也会反复受前期建设限制,整体研发是一件投入大,产出慢的事情。而在阿里和蚂蚁集团内部,我们通过一种底层共建的模式,历时 3 年时间,共同研发并推出了一款公共的 IDE 研发框架 OpenSumi,期间积累了大量在业务场景下的实践与探索经验,通过这个框架,能真正让 IDE 产品的定制化研发更加简单高效。
最后,以上专题的ppt下载已整理好,在公众号聊天框输入 "2023qcon" 即可全部领取。