大前端规模化实践和思考——妙峰
如果无法正常显示,请先停止浏览器的去广告插件。
1. 大前端规模化实践与思考
高德-妙峰
2. 自我介绍
花 名:妙峰
来自哪:阿里巴巴-高德-工程技术中心
从事啥:自主出行前端研发工作
3. 没错!连导航都是用前端 JS 写的!
4. 大前端未来的挑战
大前端工程视⻆实践与思考
大前端技术视⻆实践与思考
多设备、多行业、多个性化的挑战
规模化对协作流的挑战
更好、更快交付的挑战
平台期
规模期
破局期
5. 大前端技术视⻆实践和思考
大前端工程视⻆实践和思考
大前端产品视⻆
6. 高德大前端开端
开发体验
业务形态稳到快的转变
业务量增⻓的投入产出比
动态性
开发效能
用户体验
性能
技术沉默成本
跨端:基本的跨平台能力
动态化:发布不受限
高性能:精简CSS实现,减少渲染管线损耗
ROI:最广泛易得的生态
7. 面向容器编程
大前端:为用户提供各种产品形态交互能力的链接者
端容器
DSL
服务容器
渲染能力
网关
桥能力
FaaS
设备能力
业务动态库
线程模型
8. 高德大前端架构
业
务
业务层
地图DSL
原生JS/TS
JS Service Thread
Rax
JS Thread
JS Thread
业务域
Node Process
JS-Native 桥
JavascriptCore/V8
端
容
器
AJX
DOM
Yoga
Layout
Tree
AJX Renderer
AJX DOMOM
Engine Thread
AJX CSSOM
高德跨端容器AJX
服
务
容
器
Render
Tree
布局
Css
UI Events Queue
其他
Css
FaaS
JNI/OC-C++桥
Hybrid Stack
Android/IOS Render Adapter
UI Thread
地图渲染 Business
Foundation
GL Thread Device API
9. 落地和思考
前端眼中以为的大前端
1个前端工程师
排查问题链路的⻓ 编程思维差别大
业务收益 招聘难度大
! ! !
实际上
Fe&iOS&Android&C++
基础能力投入
但仍有其业务价值
找到业务价值、坚持技术定位、⻓期投入、标准化
10. 面向未来的容器
大前端:为用户提供各种产品形态交互能力的链接者
跨端容器
DSL
同构容器
渲染能力
网关
桥能力
FaaS
设备能力
业务动态库
线程模型
11. 面向未来的容器
Rax
抽象容器
渲染能力
提供渲染的标准规格
Vue
提供交互的标准规格
设备能力
提供能力接入的标准规格
FaaS
业务能力
BaaS
…
更有弹性的容器
12. 大前端技术视⻆实践与思考
大前端工程视⻆实践与思考
大前端未来的挑战
13. 规模化后的问题
重复开发,人效利用
质和效
低水平能力建设,个人技能成⻓
个人技能不同,产出质量
低水平能力无法复用,迭代速度
观察titlebar
14. 协作流
缺少标准交付抽象,每个交付环节丢失的亿点点细节,最后都是产品质量的下降
需求定义
体验设计
收集需求 → 提出方案 → 原型图 → 视觉方案 → 标注交付
Alibaba Design
前端开发 测试走查 发布
前端开发 QA / 设计走查 上线
Alibaba Design
15. 协作流
研发资产
==
设计资产
一体化协作
业务交付
16. 协作流:前端
素 材
即
设计师
研
「物料」
工程师
组件
即
设
计
素
17. 协作流:后端
18. 思考
标准真的是标准吗?
Low-code、No-code的业务价值是否有想象的那么大?
19. 大前端技术视⻆实践与思考
大前端工程视⻆实践与思考
大前端未来的挑战
20. 大前端未来的挑战
Rax-Dom
View-Phon
Rax-Wear Rax-Car Rax-Sound
View-Wea View-Ca NO-Vie
Mode Mode
FaaS-Phone FaaS-Wear
BaaS
Mode
BaaS
DBaaS
FaaS-Car
BaaS
DBaaS
Mode
FaaS-Sound
21. 大前端未来的挑战
一云多端
容器的动态化表达
低代码
大前端:以多态产品为视⻆从前至后的弹性架构
多端DevOps
22. 谢谢您的聆听!
??
如果您对导航和下一代跨端容器感兴趣