跨端跨框架的前端组件架构探讨

所属专题:大前端趋势

嘉宾 : 莫春辉 | 华为质量与流程IT管理部/主任工程师

讲师介绍

专题演讲嘉宾:莫春辉

华为质量与流程IT管理部/主任工程师

华为 AUI 前端框架负责人,2014年加入华为。2002年开始从事前端框架的研发,在 jQuery 尚未问世、IE 6独霸天下的时代,就开发出一套基于数据模型驱动、拥有企业级 UI 组件库、名为 DAP(Dichain Application Platform)的前端框架,并在中海物流、齐心文具等企业的物流系统里推行落地。

2014年在华为带领团队开发 HAE(Huawei Application Engine)前端框架,其底层核心是自研的面向对象的 JS 类架构,支持与 AngularJS 相似的数据双向绑定,可灵活配置的系统、页面、组件生命周期,还有支撑华为内部 IT 应用的高性能UI组件库。2017年 HAE 演进成为基于 Vue 的 AUI 框架,并以落实体验一致性规范的要求,在公司各BET领域大规模推行,去年底发布了全新架构的 AUI 3.0版本。

除前端框架开发外,还参与制定公司的前端开发规范,担任信息技术任职的评委、JavaScript 认证考试专家组成员,被评为信息工程部的专业标杆。

议题介绍

演讲:跨端跨框架的前端组件架构探讨

公司各领域 IT 应用的前端技术栈不统一,业务系统体验一致性改造困难,不论是前端技术栈归一,还是前端框架的持续演进,都会造成大量的重复建设,比如同一套业务逻辑要在不同技术栈、不同前端框架里重复实现。此外,以提高复用性为目的卡片,希望开发一次就能在桌面、移动、大屏等应用里展示,且能自适应不同领域应用的不同主题样式,现实和理想差别很大。

2018 年 React 发布颠覆性的 Hook 新特性,2019年 Vue 也相应推出 Composition API,这引起我的关注与思考,再结合 Renderless Components 与函数式编程的理念,我开始构思 AUI 3.0 的组件架构,2019年6月完成 POC 验证,经半年开发实践,架构细节不断完善,发布后获得广泛的认可,已在多个领域项目中试用,初步达成业务逻辑与前端框架分离、卡片自适应多终端与主题样式的设想。

本次演讲内容首先介绍在华为内部 IT 业务变革中遇到的重复建设等问题,再通过对三个前端前沿技术的介绍与思考,探索出跨平台前端组件的架构,接着阐述该架构的设计与开发原则,并以开发一个 TODO 组件为例子,演示如何实现共享相同逻辑的 React 和 Vue 组件,同时支持切换组件的 PC 和 Mobile 状态,还支持自定义组件的 Template 及 Renderless 层,最后总结该架构存在的缺陷,评估在支撑业务变革推行中的影响力。

演讲提纲:

  1. 没有一成不变的前端框架
  2. 多端一致还要像变色龙的卡片
  3. React 钩子带来的新气象
  4. 被低估的无渲染组件
  5. 尝试做一个跨端跨框架的TODO组件
    • 跨平台前端组件的架构
    • 架构的设计与开发原则
    • 共享相同逻辑的 React 和 Vue 组件
    • 切换组件的 PC 和 Mobile 状态
    • 自定义组件的 Template 和 Renderless 层
  6. 架构的缺陷与影响力

听众受益点:

  1. 了解 React Hook 与 Vue Composition API 新技术
  2. 了解 Renderless Components 理念
  3. 了解跨端跨框架、业务与框架分离的前端组件设计方案

InfoQ助你疫后复工,提升战力!全年会议门票最低5折起,立即查看>>

想要批量报名或更多优惠?
立即联系票务小姐姐 Ring
或致电:+86-15600537884