高德前端基建是如何炼成的-黄金金（青夜）.pdf

1、（夜）德地图信息业务中 前端架构师德前端基建是如何炼成录业务与技术的演进 德基建是如何炼成 规划、展望业务与技术的演进出具到出服务平台升级驾骑步公交地铁酒店搜索景区美加油充电桩聊天室房产防疫出保停机票票打组队DIY作地图迹旅游AR导航道级新能源跨端-给德地图插上翅膀AJX（Amap JavaScript XML）是套基于JS引擎实现的移动端跨平台原应开发案。具体来说，就是通过个核C+引擎，把两端业务套JavaScript代码解决，实现双端归，iOS、Android实现业务动态化发布。性能 达到原应级的流畅感受可扩展 可定制扩展原组件和功能热更新 快速更新发布500+500+开发员700W+70

2、0W+AJX代码全部100+全部业务线100+业务模块AJX研发员已达500+使AJX开发的业务总代码量已达700万全部业务线已接AJX前已有100多个bundle在使AJX开发跨端-给德地图插上翅膀德基建如何炼成00 基建矩阵思考初创期：解决基础保障 发展期：提升研发效率 规模期：提升交付效率 满业务各个发展阶段的不同诉求 Fox设计研发协同档协同集成开发具FaaS前后协同前后协同智能流量管控titan 2程平台调试具德搭投平台前端框架程平台智能流量管控前后协同设计研发协同程平台01 借前端态前端框架基于跨容器前端框架 Rax扩展 AJX 前端框架调试具IDE基于 Chrome DevToo

3、ls 构建AJX 调试能基于开源 IDE VSCode 定制AJX 专 IDE初创期-站在巨的肩膀上前在 AJX 跨端容器之上，借 Web 前端的繁荣态，快速补研技术栈在框架、具链上的短板，保障开发效率和开发体验AJX 前端框架：两套框架满两类业务场景Rax 跨容器能Rax-CoreWeex DriverBrowser DriverServer DriverAJX DriverFox（类 React 框架）VMap DSL/VMap 组件reduxredux-saga数据管理层DvaModel程约束层FoxPageFoxApp组件具层Vmap ComponentAUXBusiness Comp

4、onentUI 框架地图框架前端框架AJX 调试：基于 CDP(Chrome DevTools Protocol)对接 AJX 容器，建调试通道，打造远程调试能JS 引擎层(C+)Native 适配层(Java,OC)前端框架层(JavaScript)AJX容器（机/机）调试通道（络/离线 USB）业务层(JavaScript)Chrome DevTools frontend（桌 IDE/Web 平台）调试具调试能CDP调试能调试能从DevTools到AJX调试套件DOM调试JS断点调试Console志络请求本地存储基础调试能前端框架调试屏性能调试包内资源管理UI事件调试导航动态事件调试虚拟地

5、图调试机调试通能持业务场景拓展德语调试调试持完成了从保障基础能到向通场景提供解决案的全升级，并在满通场景的基础上，向场景扩展AJXIDE：基于开源 IDE 次开发，定制 AJX 专 IDE 满对通 IDE 的基础诉求VSCode 内核 满定制化业务功能扩展诉求VSCode 插件Electron 满插件机制法满的扩展诉求开发具前端态延展如何继续提效？研发流程设计师端开发发布联调测试开发服务开发测试基础保障开发具调试具前端框架组件库脚架。视图流程数据难于构建，难于共享识别可复组件 识别难，重复建设环境不稳定 mock数据难于构建 数据流程02 前端态延展研发流程优化场景化 mockQA提供数据提供

6、数据场景化Mock项（视图流程）设计研发体化项（视图流程）测试 平台提供数据提供核的场景化Mock能，让业务同学快速的成、管理、共享Mock数据，减少研发联调及排查问题耗时场景化Mock平台Amock管理平台 设备、场景、操作管理MySQL 数据库创建/修改/场景数据读取数据Socket打开 建连接扫码 建连接Config 配置更新ConfigMockerSDK多平台持 规范化的接协议 代理模式业务侵WebSocket双向通道 承接全部数据传输Web平台侧 设备/场景/接管理等Config 配置更新ProxyOff