《高德前端基建是如何炼成的-黄金金(青夜).pdf》由会员分享,可在线阅读,更多相关《高德前端基建是如何炼成的-黄金金(青夜).pdf(31页珍藏版)》请在三个皮匠报告上搜索。
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 配置更新ProxyOfflineSDK容器层 重写代理接,重写离线mockSDK能层 语层实现次即可场景
7、化Mock平台(Amcok)Amock Socket Server接SDK 代理、建连、执配置接SDK 代理、建连、执配置接SDK 代理、建连、执配置随着业务发展,德前端业务逐渐变成个代码量100w+的巨应03 拆解巨应依赖复杂,相互耦合 1.开发体验差 2.影响难于评估 3.慢!开发慢、构建慢、测试慢、发布慢五独架构功能完成随时上单体应所有业务打成个bundle发独开发、独构建、独测试、独发布、独运维弱依赖Bundle之间的跳转、服务依赖解耦强依赖Bundle之间件引公共库1公共库2公共库3搜索导航户中美业务bundle公bundle业务Lib3Bundle构建Bundle美业务Lib1物理
8、副本业务Lib2物理副本Bundle搜索Bundle导航Bundle户中业务Lib3物理副本业务Lib1物理副本业务Lib3物理副本引擎Lib业务Lib1物理结构Clone弱依赖通信思考:当业务规模较,bundle构建时业务lib的冗余越来越多怎么办?业务Lib2业务Lib2物理副本04 流量之殇发布周期发布式发布次数按发布整体发布初创期05101520每2周发布整体发布发展期05101520每周窗期发布五独发布规模期050100150200加载式预下载按需加载即效按需加载下次效三 加 载 式对于打开app后即就会到,或是概率要到的bundle,app冷启动的时候提前下载到包。对于访问概率不,
9、也时效要求的bundle,在户访问时触发下载更新,下次访问时最新代码才会效。对于访问概率不,但时效性要求的bundle,允许户访问时随随下。智能发布智能发布错峰下载熔断机制根据CDN 当时的情况进智能发布放量,避开早晚峰。CDN流量过,停放量。热更发布智能放量动态调速把放量过程拉到整天,每个时间段不同速放量。完成上线CDN账单未来展望未来展望跨端如何更好与前端态结合?跨端案业务架构规模、多团队业务开发,如何保持JS代码可维护性?跨端案配套设施监控盘稳定性建设程能端业务层框架层容器层业务逻辑W3C标准集渲染引擎Native UI绘UI容器化通接1.对W3C标准,拥抱Web态2.借鉴webkit思路,跨端容器能抽象(webCore、webProts、容器定制)业务架构从业务出发的开发范式和架构初创期:通过研发框架、具的建设解决了研发身的效率问题 发展期:通过德前端态建设,把设计、研发链路串联,提升了组件的复率规模期:通过bundle化建设、发布能建设解决了快速交付的问题业务爆发期:前端能下钻后,什么解决我们业务沉淀问题?前端业务架构的期缺失:要解决UseCase、Entlties如何抽象在业务架构中的问题解 决 易 变 的 户 终 端 开 发