![图片](https://static.doc-tr.net/mp-images/70/708445bb877bb7d1e230774e0974ba51.jpg?&wxfrom=5&wx_lazy=1&wx_co=1)
阿里妹导读:2015 年 - 2020 年,历经 5 年发展,高德地图应用开发前端团队在业务快速发展中不断成长。一路走来,从小团队主要负责短期运营活动开发的散兵游勇,到现在团队规模 100人+、覆盖高德 5 大业务线、上百个模块的坚甲利兵。本文将分享随着业务增长高德前端的技术发展历程,总结动态化技术的实践落地,以及高德前端未来的发展方向。
文末福利:免费下载《高德技术 2019 年刊合辑》。
高德(应用开发)前端技术的发展按照时间线来看,大致可以分为 4 个阶段:
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
2014 年底,高德地图提出专注用户需求,专注做地图导航产品和导航产品的技术研发,未来三年无商业化目标的新战略。没有了商业化的压力,一心专注产品和用户体验的高德地图,技术就此踏上了高速发展的轨道。
围绕促进日活和留存的战略, 大量运营活动的开发需求应运而生,这个阶段的活动特点是“短平快”,开发周期短,一周内交付验证,活动时效期过后即可下线,完全不需要维护。对于代码的可维护性、技术上的创新要求不高,目标是快速响应热点事件,完成活动开发。这种模式给当时人员稀少的前端团队带来了非常大的考验,因为很多运营活动搭建需要在前端完成。而此时的前端团队在技术沉淀上较为薄弱,重复劳动明显。基于此,我们首先要完成的是效率上的提升,主要工作包括:
正是在基础能力上的耕耘,在之后多个热点事件时,我们才能游刃有余,在短时间内完成业务开发、上线。
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
时间回到 2015 年 10 月 1 日,为了配合“十一全民出行节”,第一个大型运营活动“十一挖宝”就此诞生,也拉开了每年出行高峰必有大型活动的序幕。我们通过开发更加简单、有趣的交互设计提升用户的游戏体验,强烈的社交属性例如 PK,排行榜等促进用户之间传播。
这一年的活动在公司内外进行了大范围的运营推广,“寻宝嘉年华,十六台 Smart 汽车送不停”,“斗鱼主播全场直播挖宝” 小伙伴们应该还有印象, 当时直播间非常火热,我们却战战兢兢,如履薄冰,特别担心直播时出现卡顿、白屏等问题,把火热的“全网挖宝”变成全网大型吐槽节目,运气比较好,我们担心的事情没有发生。
尽管如此,后背发凉的回忆使我们意识到,技术上如何完善复杂游戏的性能体验必将成为日后的课题,基于此我们又完成了基础技术(体验、性能)能力上的沉淀,包括:音频语音交互解决方案,大型游戏性能的最佳实践。
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
到 2015 年底整个前端团队初具雏形,团队开始建立规范化,标准化,体系化的思维,在技术上也积攒了不少家底。为了应对可预见的考验,前端团队也招入了很多有能力的新人。正是这些人才,使我们在接下来的多线作战中游刃有余。
随着高德地图业务沿着扩品类、在垂直品类做精做细,景区、酒店、银行商铺、充电桩等个性化定制需求凸显,对前端展现提出了更高的要求,对“快速应变”要求也越来越高,这段时间主要面临以下痛点:
-
业务要求快速发版试错。
-
研发资源越来越无法满足业务的快速增长。
这些问题也在不断地督促我们去反思,到底有没有一种架构既能象 H5 一样快速的开发、发布又能保持原生 Native 的体验?实际上,在 2015 年,我们就开始做动态化了,那时候业内有 React Native, 团队做了技术调研,发现不能完全满足业务上的需要,尤其是性能方面,因此我们决定自研一套动态化技术。在项目伊始就有一些难点摆在我们面前:
经过团队内部多次思想上的碰撞、激烈的讨论, 最终确定以下核心设计思想。
核心
核心处理尽量下沉动态化引擎层,双端尽量做薄,动态化引擎(C++)以 Webkit、Node 为参考,即可以通过 HTML、CSS、JavaScript 编写原生应用,又可以像 Nodejs 一样使用文件操作等与原生应用的交互能力。这样的设计在上层对接前端生态时更加灵活,在处理复杂、频繁交互的大型页面时也会有更好的性能。
除常规动画外,还设计了关联动画解决高频联动动画,关联动画本质上并非是一种播放类型的动效,是基于观察者模式设计的,被观察者的属性变化会影响观察者的属性变化,它将关联关系提前绑定好,一次性由 JS 线程传递给 UI 线程,这样能够很好的保证交互性能。
在方案明确后,整个团队也投入到能力建设中来,尽管每周都在发现问题、解决问题中艰难前行,但大家仍然乐此不疲,对于这种打怪升级的过程乐在其中。在基础能力、辅助工具齐备的背景下,我们开始着手动态化业务的落地实践,最终我们选择了 POI 业务。POI 即(Point ofInterest)兴趣点,如学校、酒店、饭店、加油站、超市等,高德地图上有数千万的 POI。
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
-
UI 复杂,多品类,多种多样的展现形式。
-
与地图有存在交互。
-
性能要求高,长列表,数据量大。
-
富交互,大量手势交互,关联动画。
为了快速验证能力,项目的排期非常紧张,为此前端同学 All in,业务上看尽管 POI 只有一个页面,但是却有多个行业,而行业是由多个模块拼接而成,每个模块在不同行业展现形式也不尽相同,如何解决协作问题就成为项目成败的关键之一。
为此我们完成了 Framework 框架开发,可以用 JSX 语法实现基本组件化,在组件这个级别进行 CURD 解决了模块化开发的问题
在项目之初我们并不存在完备的调试方式,甚至可以说不存在调试能力,只是通过 print 将 log 输出到手机端展现。这在开发 POI 时遇到了极大的问题,业务场景复杂大量实时日志无法查看,导致效率极低。
为此我们完成了 websdk,mock 能力,在浏览器端完成了 POI 页面的预览,调试。
尽管 POI 落地过程中,遇到了各种各样的问题,但结果是美好的,动态化技术也经受住了业务的考验,新的 POI 不仅完全覆盖了之前 H5 的功能,在手势动画、List 展现上还体现了更加卓越的交互体验和性能。伴随着业务上线,基建一期也基本完成,这个阶段以满足业务为中心,主要围绕支撑能力的设计和基本的开发体验。
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
POI 的圆满落地也标志着前端技术有能力在高德地图中承担更复杂、更核心、更大的业务场景,前端开发也即将迎来春天。
POI 业务上的成功落地,标志着动态化技术解决方案趋于稳定,可以应对各种各样的复杂业务,随之而来的是大量业务的考验。随着动态化技术应用的深入、主要业务模块的全面接入,支撑能力不完善、动态化技术开发人员缺乏导致改造压力越来越大。
人员的问题主要从内外两方面解决,外部启动招聘,大量吸纳有相关背景的前端同学。内部 Native 同学加强技术培训,转向动态化技术开发也正式提上日程。
不少同学一定有这样的经历,如果让其去调研一门新的技术大家一定非常乐意,充满干劲,对未知领域的探索,求知渴望是研发的共同点。不过如果让其持续朝着这门技术发展就会有非常多的疑虑。
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
通过培训等方式,解决大家对于技术不确定性和前景的担忧,大量同学开始转向动态化技术,到 2019 年初整个动态化“大前端”团队得到快速增加。
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
业务增长,“横跨 5 大业务线,高德核心业务全覆盖”
富有战斗力的团队、渐渐完善的基建使业务从小步慢走到大步快跑,从用户的核心诉求我在哪(主图,定位),我去哪(搜索,POI),怎么去(规划,导航) 到用户的延伸诉求怎么去(打车) 怎么玩(景区)高德 5 大业务线 60 多个模块全面接入动态化技术。
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
这个阶段动态化业务发展迅猛,“前端团队”不断壮大,由“小前端”转变为“大前端”,基建方面也是围绕业务全面展开,不断完善。有了稳定的开发环境, 2017 年 - 2018 年,不到 2 年的时间我们完成代码量从 3W 到 60W,模块数量从 1 到 60+,开发人员井喷式增长。业务发版频次渐渐加快、加密,从单月版→快迭双周版。
面对着越来越复杂的业务,仍有不少细节问题需要进一步解决, 如何更好的为业务赋能再次成为重点,阿里前端大咖玉伯之前的分享中有句话给我们印象颇深:
愿等花开,坚持长期主义,要快,但不能急。
回到自身来说,前面几年都是保证业务赢在当下, 支撑上都是大刀阔斧快速建设,完成 0 到 1 的过程。接下来应该帮助业务更好的活在未来,在当前基础能力具备的情况下,需要闭关审视自身,从功能的完整性,延展性等方面做到精细化。
未来,我们也将从研发生态、工程中台、智能化 3 大方向上以精细化、标准化、差异化为基础要求,不断补足能力,逐渐完成中台化、智能化的基础建设工作,围绕 IDE 打造更好的一站式场景化开发体验。
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
-
工具链路稳定性、延展性持续优化。
-
平台能力中台化。
-
全链路监控:快速分析、定位问题。
-
物料:缩短开发到资源路径,沉淀更多基础能力。
-
智能化:低代码、零代码。
以上是 5 年来高德地图前端技术的发展历程,过程中有失有得,我们还在路上,未来会更加努力,让出行更美好。
福利来了
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
这本书作为 2019 年高德技术的结晶,集合了全年度的重要技术文章,总计 45 篇 ,涵盖了人工智能、前端移动、汽车工程、架构、数据、质量技术 6 个篇章约 400 页,全面揭晓高德技术实践成果,和大家共同成长。
识别下方二维码,或点击文末“阅读原文”,立即下载吧:
![图片](data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)
文章评论