大前端架构设计实践

会议室:二层 2号厅A
出品人:周效翰

伴随业务的增长,软件系统也会由有序向无序发展,甚至逐渐开始难以维护和扩展。架构的... 展开 >

专题出品人:周效翰

美团美团资深技术专家

周效翰,美团资深技术专家。2015年加入大众点评,参与团购交易平台建设。目前负责美团到店综合业务商家前端团队,从0到1搭建了到店综合业务的终端核心系统,过程中沉淀了多款公司级框架工具,在美团各业务有广泛落地应用。

近年来带领团队进行大前端方向转型,持续优化团队研发效能,打磨产品性能体验。对前端平台化、自动化、智能化等方向有长期探索和实践。

地点:二层 2号厅A

专题:大前端架构设计实践

伴随业务的增长,软件系统也会由有序向无序发展,甚至逐渐开始难以维护和扩展。架构的本质就是对系统进行有序化重构,不断减少系统的「熵」,使其不断进化。

在大前端技术领域,架构设计之「道」常被层出不穷的新技术所遮蔽。如何抓住本质的东西,与次要的东西分离解构?在当今互联网行业「下半场」的转型浪潮中,优秀的系统架构设计能更好地满足企业业务发展需要,引导团队向最大化生产力的方向前进。如何真正有效地提升前端系统可复用性,而不造成过度的设计和妥协?

本专题将分享多个大前端架构设计的优秀实践案例,在变化中寻找趋势,帮你找到恰如其分的架构设计新思考。

by 梅旭光

百度
资深研发工程师

在完成搜索组件化技术改造后,使用 PHP 支撑的服务器端渲染架构已渐渐不能适应搜索前端技术的发展。随着搜索渲染架构不断演进,百度引入了 Node.js 作为单独的渲染服务,支撑了搜索移动、PC 的各个业务线,每日承接十亿级的渲染请求。 本次演讲主要分享搜索前端渲染架构的演进历程。

演讲提纲:

  1. 背景与挑战
    • 结果页每条结果使用独立模块运行容器形式进行组织,涉及到 20+ 个团队,每日上线 20 个左右的需求
    • 10 亿级的渲染服务
    • 搜索架构整体迁移:Go + Node.js
    • 大规模渲染服务架构设计与实施
  2. 架构方案介绍
    • 搜索渲染服务化:Node.js 作为一个单独的服务,全面接管搜索渲染工作
    • 多进程主从并行渲染架构:充分利用线上机器 CPU(100 核),避免卡片间相互干扰,提升性能
    • 将主模板和卡片内容分开,主模板与卡片内容并行渲染
    • 多个卡片之间进行并行渲染,单卡渲染失败不影响整页结果输出,提升稳定性
  3. 方案落地实践
    • 页面内部主模板与独立模块运行容器并行,主进程劫持机制
    • 多种前端框架,SSR 集成及性能优化
    • 主从 60+ 进程数据通讯优化,性能对比,共享内存
    • 从进程的预热,不停流预热更新方案
  4. 方案收益
    • 渲染技术的更新换代,优化服务端渲染(SSR)机制,丰富了 SAN 的技术生态
    • 前后端渲染同构
    • 优化服务端渲染耗时,提升结果页渲染的稳定性
    • 在工程化方面,业务迁移方案实践积累
    • 抽象出渲染服务,不仅可满足搜索结果页,还在持续为搜索其他业务提供服务

你将获得:

  • 学习 Node.js 在渲染服务中的实践方案
  • 大前端工程架构以及相关配套设计

 

by 张芳

美团
资深前端开发

到店平台目前三大业务团队并行发展,前端团队的规模几百人,几百上千个业务工程,涉及团队20+,各个团队在研发各阶段的流程、规范、工具均有不同。导致开发协作效率低、学习维护成本高、质量隐患突出、基础能力复用难。本文将分享团队如何通过工程化架构演进来解决业务发展、团队规模扩大带来的技术「熵增」问题。


演讲提纲:

  1. 业务背景问题
  2. 架构演进阶段
    • 通过流程规范&基础设施统一建立标准化落地抓手
    • 通过基础架构统一大大降低运维成本,提升服务可用性
    • 通过研发框架统一提升业务研发效率,让一线开发同学可以专注
  3. 总结及未来规划
    • 通过工程化平台让业务低成本自增全链路工程化能力

你将获得:

  • 如何在大规模团队中快速落地工程化架构演进
  • 一个支持几百人研发的工程化架构应该如何设计
  • 了解中后台场景下的一些工程最佳实践

by 秦阳

哈啰出行
高级技术专家

随着哈啰出行业务场景的不断拓展,客户端首页需要在业务场景呈现和用户交互上提供更丰富的能力,业务模型日益复杂多样化,对首页架构的高可用性和扩展性提出更高的要求。 本次演讲主要分享我们在业务快速发展的背景下进行首页架构升级的实践经验,深入探讨在支撑新业务扩展和高可用性建设上的探索和思考,希望对移动端业务架构和跨平台技术感兴趣的听众带来思考和启发。  

演讲提纲:

  1. 背景
    • 哈啰出行首页的业务形态演变
    • 业务能力扩展和技术高可用性的挑战
  2. 首页架构的实践
    • 容器化架构
    • 新业务场景扩展
    • 跨平台技术融合
    • 故障降级能力
  3. 总结和展望
    • 实际落地情况
    • 未来的架构演进和趋势

你将获得: 

  • 了解在哈啰出行首页架构的演进之路,以及面临的技术挑战
  • 学习大型 App 核心架构改造的实践经验

by 俞天翔

快手
Web 开发探索组负责人

在刚刚过去的春节活动里,快手的活动不管是飞行棋、小牛拔河赛、还是天降福袋、集卡等都给人留下了很深的印象。在这个活动中,前端是如何分析场景、找到关键路径,最终通过多层降级设计,同时还可以保证活动效果与稳定性,很多的技术人对此都比较感兴趣。本专题将着重分享快手春晚活动中的降级方案设计与稳定性保障实践案例。

演讲提纲:

  1. 快手春晚活动的背景介绍
    • 活动规模
    • 业务规模
    • 业务要求
  2. 如何在体积/效果/性能之间保持平衡
    • 体积要求的限制“5M vs 25M”的诞生
    • 40+ 数量的动效实现与拆解,动效实现方案的取舍
    • CPU/GPU 消耗的开销与提前预估,如何保效果达成业务预期
  3. 在保证体验的情况下,如何做到活动的优雅降级与实现
    • 不同版本、不同端能力覆盖的 APP,如何在做到 DAU Max 的同时保证核心流程
    • 动效的具体实现路径,APNG / 透明视频 / CSS / Lottie,以及在活动场景中,取舍边界是什么
    • 本地降级策略 VS 远程降级策略,多重手段保证活动稳定性
    • 监控看板 & 指标确认,如何在问题发生时,快速降级操作止损
    • 最终收益
  4. 总结与回顾

你将获得:

  • 完整了解大型活动的前端挑战点
  • 技术方案的全面性思考
  • 方案设计的平衡与取舍,如何在满足业务需求的同时做到追求极致 
  • 电话咨询

    联系电话:+86 13269078023
在报名过程中如有任何问题,欢迎微信扫描二维码联系我们的票务经理