2015年至2020年，经过5年的发展，高德地图应用开发前端团队在业务快速发展中不断壮大。一路走来，小团队主要负责短期运营活动的开发，如今团队规模100+，涵盖高德5大业务线，拥有数百个模块的强大军队。本文将随着业务的增长分享高德前端的技术发展历程，总结动态技术的实践，以及未来高德前端的发展方向。按照时间线，高德前端技术（应用开发）的发展大致可以分为四个阶段：2015年大量招新业务，活动需求猛增，应用前端开始进入高德技术阶段。2016-2017年，随着业务的快速发展，对效率和双端一致性的需求为前端开发带来了契机，动态技术开始落地。2017-2019年，高德全面推进动态化，前端开发的作用越来越重要，业务半径不断扩大。2019年到现在，这是目前的发展阶段，更加注重支撑的稳定性和扩展性，让业务在未来能够活得更好。一言以蔽之，就是“顺势而为，乘风破浪”。2015年：小禾初出茅庐。2014年底，高德提出新战略，以用户需求为中心，专注于地图导航产品和导航产品的技术研发，未来三年没有商业化目标。没有了商业化的压力，高德专注于产品和用户体验，技术走上了快速发展的轨道。运营活动的发展需求暴涨，“工程与效率”的问题解决围绕着促进日常活跃与留存的策略展开。一大批业务活动的发展需求应运而生。该阶段活动的特点是“短、平、快”，开发周期短，一周内交付验证，时效期满活动即可下线，完全无需维护。代码可维护性和技术创新性要求不高，目标是快速响应热点事件，完成事件开发。这种模式给当时人手不多的前端团队带来了很大的挑战，因为很多运营活动都需要在前端完成。这时候前端团队在技术积累上比较薄弱，重复劳动明显。基于此，我们首先要做的就是提高效率。主要任务包括：组件化：为操作学生的活动标准化和构建通用组件。Templating：jigsawpuzzle，解决通过模板构建简单页面的问题。简化：CLI加速工作流程。正是基础能力的培养，才能让我们在未来热点事件多的时候，能够在短时间内完成业务的开发和上线。第十一届全国旅游节，“演出与体验”的沉淀时间回到2015年10月1日。为配合“第十一届全国旅游节”，首个大型运营活动“第十一全国旅游节”诞生并打开。是每年旅游高峰期必须举办的大型活动的前奏。我们通过开发更简单、更有趣的交互设计来提升用户的游戏体验，PK、排行榜等强大的社交属性促进用户之间的交流。今年的活动在公司内外进行了大规模的运营和推广，“寻宝嘉年华，16辆智能车直送”，“斗鱼主播直播挖宝”小伙伴们应该还有印象，当时的直播时间很火热，但我们却如履薄冰，战战兢兢，特别担心直播过程中出现卡顿、白屏等问题。我们把火爆的“全网挖宝”变成了全网大规模的投诉节目。幸运的是，我们担心的事情并没有发生。.尽管如此，不寒而栗的回忆让我们意识到，如何从技术上提升复杂游戏的性能体验，将成为未来的课题。基于此，我们完成了基础技术（体验、性能）能力的沉淀，包括：音频和语音交互解决方案，大型游戏性能的最佳实践。到2015年底，整个前端团队初具规模，团队开始建立规范化、规范化、系统化的思维，积累了大量的技术财富。为了应对可以预见的考验，前端团队也招募了很多有能力的新人。正是这些人才，让我们在接下来的多线作战中游刃有余。2016-2017：一夜春风骤至。随着高德地图业务做大品类、细化垂直品类，景区、酒店、银行商铺、充电桩等个性化定制需求凸显，前端展示提升。对“快速反应”的要求也越来越高。这期间，我们主要面临以下痛点：业务需要快速试错发布。研发资源越来越不能满足业务的快速增长。契机，高德动态技术的诞生，这些问题都在不断地催促着我们去反思，是否有一个框架既能像H5一样快速开发发布，又能保持原生Native体验？其实2015年，我们就开始做动态化。当时业界有ReactNative。团队做了技术研究，发现不能完全满足业务的需求，尤其是性能方面，于是决定自己开发一套动态化技术。立项之初，有一些困难摆在我们面前：如何布局？RN的瑜伽，iOS的绝对布局，还是Android的RelativeLayout？运行时框架放在哪里？谁将主持C++和JS？模块化机制是什么样的？?节点要求，Webpack要求？沟通、动画怎么做等等很多问题都需要我们去探索和选择。经过团队内部的多次思想碰撞和激烈讨论，最终确定了以下核心设计思路。核心核心处理尽量下放到动态引擎层，双端尽量做薄。动态引擎（C++）以Webkit和Node为参考，即可以通过HTML、CSS、JavaScript编写原生应用，可以像Nodejs一样使用文件操作等与原生应用的交互能力。这样的设计在上层接入前端生态时更加灵活，在处理复杂、交互频繁的大页面时也会有更好的表现。优化除了常规动画，还设计了关联动画，解决高频联动动画。关联动画本质上不是播放类型的动画。它是基于观察者模式设计的，被观察者属性的变化会影响到观察者。属性变化，提前绑定关系，一次性从JS线程传给UI线程，可以很好的保证交互性能。方案明确后，整个团队也投入到能力建设中。虽然每周都很难发现和解决问题，但大家还是乐在其中，享受着打怪升级的过程。有了基础能力和辅助工具，我们开始实现动态业务，最终我们选择了POI业务。POI是（PointofInterest）兴趣点，如学校、酒店、饭店、加油站、超市等，高德地图上有数千万个POI。扬帆起航，实现动态技术POI先来看看POI业务的特点：UI复杂、品类多、展示形式多样。存在与地图的存在交互。性能要求高，列表长，数据量大。交互丰富，大量手势交互，关联动画。多人协同开发问题为了快速验证能力，项目进度非常紧张。为此，前端的同学们都中招了。从业务上看，POI虽然只有一个页面，但是却有多个行业，行业是由多个模块拼接的，各个模块在不同的行业都有不同的表现形式，如何解决协同问题成为项目成败的关键之一。为此，我们完成了框架开发，可以使用JSX语法实现基本的组件化。组件级别的CURD解决了模块化开发的问题。调试问题在项目之初，我们并没有完整的调试方法，甚至可以说没有。有调试能力，但是日志是通过print输出到手机显示的。这在开发POI时遇到了一个巨大的问题。业务场景复杂，大量实时日志无法查看，导致效率极低。为此，我们完成了websdk、mock能力，并完成了浏览器端的POI页面预览和调试。POI落地过程中虽然遇到了各种问题，但效果还是不错的，动感技术也经受住了业务的考验。新的POI不仅完全覆盖了之前H5的功能，还以手势动画和List的形式展现。也体现了更优秀的交互体验和性能。随着业务的开展，一期基础设施建设基本完成。该阶段以满足业务为中心，主要围绕支撑能力和基础开发体验的设计。POI的成功落地，也标志着高德前端技术有能力承接更复杂、更核心、更大的业务场景，前端开发即将迎来春天。2017-2019年：千树梨花POI业务的成功落地，标志着动态技术方案趋于稳定，能够应对各种复杂业务，随后经过大量业务的考验。随着动态技术的深入应用和主要业务模块的全面接入，缺乏支撑能力和缺乏动态技术开发人员导致转型压力越来越大。团队壮大，“小前端”到“大前端”人员问题，主要从内外部两方面解决。启动对外招聘，吸纳大量具有相关背景的前端同学。内部本土学生加强技术培训，动态技术的开发也正式提上日程。想必很多同学都有过这样的经历。如果让他们去研究一项新技术，大家都会非常高兴，精神抖擞。对未知领域的探索和对知识的渴望是研发的共同点。但是，如果任由其继续朝着这种技术发展，就会有很多质疑。通过培训等方式解决大家对技术不确定性和前景的担忧，大量学员开始转向动态技术，到2019年初，整个动态“大前端”团队迅速壮大。基础设施完善，通过IDE开发调试能力，“研发闭环，一一突破”。通过工程平台发布、回滚、更新、监控、分析操作。业务增长，“横跨5大业务线，全覆盖高德核心业务”，富有战斗力的团队，逐步完善的基础设施，让业务从小步迈向大步，从用户核心需求出发，我在哪里（主图）、定位）、我去哪里（搜索、POI）、怎么去（规划、导航）用户扩展需求，怎么去（打车）、怎么玩（景区）等60多个模块高德的5大业务线中有5%与动能科技全面对接。这一阶段，动态业务快速发展，“前端团队”不断壮大，从“小前端”向“大前端”转变。基础设施也围绕业务全面发展，不断完善。有了稳定的开发环境，从2017年到2018年，不到2年的时间，我们完成了代码量从3W到60W，模块数量从1个到60+，开发者成长井喷。商业版的频率逐渐加快并加密，从月刊到双周刊。2019年至今：九层平台，从地面开始。面对越来越复杂的业务，还有很多细节需要进一步解决。如何更好地为业务赋能，再次成为焦点。阿里巴巴的前端高手宇博之前的分享中有一句话让我们印象深刻：愿静待花开，坚持长线主义，快而不急。回头看自己，这几年，我们确保业务赢在当下，支持大刀阔斧快速建设，完成了0到1的过程。接下来，我们应该帮助企业在未来更好地生存。在当前基础能力具备的情况下，我们需要静下心来审视自己，在功能的完整性和扩展性上做到精细化。未来，我们将继续从研发生态、工程中台、智能化三大方向补足精细化、标准化、差异化的基本要求，逐步完成中台基础建设工作和智能化，专注IDE打造更好的一站式场景化开发体验。五基建政策细化：直击痛点，系统解决问题。标准化：集团生态，行业标准。差异化：在标准化的基础上，提供高德地图的能力扩展。智能化：低代码、材料复用、自动生成UI。集中化：前台的通用能力下放到中台，不再局限于高德。技术大局下一个重点方向持续优化工具链接稳定性和可扩展性。平台能力集中化。全链路监控：快速分析定位问题。材料：缩短从开发到资源的路径，积累更多的基础能力。智能化：低代码，零代码。以上就是近5年来高德地图前端技术的发展历程。过程中有失也有得。我们还在路上，未来会更加努力，让出行更美好。
