写点什么

高德前端这五年:动态化技术的研发历程和全面落地实践

2020 年 5 月 20 日

高德前端这五年:动态化技术的研发历程和全面落地实践

前言


2015 年-2020 年,历经 5 年发展,高德地图应用开发前端团队在业务快速发展中不断成长。一路走来,从小团队主要负责短期运营活动开发的散兵游勇,到现在团队规模 100 人+,覆盖高德 5 大业务线,上百个模块的坚甲利兵。本文将分享随着业务快速增长高德前端的技术发展历程,总结动态化技术的落地实践,以及高德前端未来的发展方向。


高德(应用开发)前端技术的发展按照时间线来看,大致可以分为 4 个阶段:


  • 2015 年 ,业务上大量拉新的诉求,活动需求暴增,应用前端开始登上高德技术大舞台。

  • 2016 年 - 2017 年,业务高速发展,对于效率以及双端一致性的诉求,带来了前端发展的契机,动态化技术开始落地。

  • 2017 年 - 2019 年,动态化在高德全面落地,前端开发的角色越来越重要,业务半径不断延展。

  • 2019 年 - 至今,这是目前的发展阶段,更加关注支撑的稳定性和延展性,让业务更好的活在未来。


一言蔽之就是“顺势而为,乘风破浪”。



2015 年:小荷才露尖尖角


2014 年底,高德地图提出专注用户需求,专注做地图导航产品和导航产品的技术研发,未来三年无商业化目标的新战略。没有了商业化的压力,一心专注产品和用户体验的高德地图,技术就此踏上了高速发展的轨道。


运营活动开发需求暴增,“工程、效率”解题


围绕促进日活和留存的战略, 大量运营活动的开发需求应运而生,这个阶段的活动特点是“短平快”,开发周期短,一周内交付验证,活动时效期过后即可下线,完全不需要维护。对于代码的可维护性、技术上的创新要求不高,目标是快速响应热点事件,完成活动开发。这种模式给当时人员稀少的前端团队带来了非常大的考验,因为很多运营活动搭建需要在前端完成。而此时的前端团队在技术沉淀上较为薄弱,重复劳动明显。基于此,我们首先要完成的是效率上的提升,主要工作包括:


  • 组件化 :和运营同学一起规范、建设活动常用组件。

  • 模版化 :拼图,通过模版化解决简单页面的搭建问题。

  • 流程化 :CLI 加速工作流。


正是在基础能力上的耕耘,在之后多个热点事件时,我们才能游刃有余,在短时间内完成业务开发、上线。



十一全民出行节,“性能、体验”沉淀


时间回到 2015 年 10 月 1 日,为了配合“十一全民出行节”,第一个大型运营活动“十一挖宝”就此诞生,也拉开了每年出行高峰必有大型活动的序幕。我们通过开发更加简单、有趣的交互设计提升用户的游戏体验,强烈的社交属性例如 PK,排行榜等促进用户之间传播。


这一年的活动在公司内外进行了大范围的运营推广,“寻宝嘉年华,十六台 Smart 汽车送不停”,“斗鱼主播全场直播挖宝” 小伙伴们应该还有印象, 当时直播间非常火热,我们却战战兢兢,如履薄冰,特别担心直播时出现卡顿、白屏等问题,把火热的“全网挖宝”变成全网大型吐槽节目,运气比较好,我们担心的事情没有发生。


尽管如此,后背发凉的回忆使我们意识到,技术上如何完善复杂游戏的性能体验必将成为日后的课题,基于此我们又完成了基础技术(体验、性能)能力上的沉淀,包括:音频语音交互解决方案,大型游戏性能的最佳实践。



到 2015 年底整个前端团队初具雏形,团队开始建立规范化,标准化,体系化的思维,在技术上也积攒了不少家底。为了应对可预见的考验,前端团队也招入了很多有能力的新人。正是这些人才,使我们在接下来的多线作战中游刃有余。


2016 年 - 2017 年:忽如一夜春风来


随着高德地图业务沿着扩品类、在垂直品类做精做细,景区、酒店、银行商铺、充电桩等个性化定制需求凸显,对前端展现提出了更高的要求,对“快速应变”要求也越来越高,这段时间主要面临以下痛点:


  • 业务要求快速发版试错。

  • 研发资源越来越无法满足业务的快速增长。


契机,高德动态化技术诞生


这些问题也在不断地督促我们去反思,到底有没有一种架构既能象 H5 一样快速的开发、发布又能保持原生 Native 的体验?实际上,在 2015 年,我们就开始做动态化了,那时候业内有 React Native, 团队做了技术调研,发现不能完全满足业务上的需要,尤其是性能方面,因此我们决定自研一套动态化技术。在项目伊始就有一些难点摆在我们面前:


  • 布局怎么做?RN 的 yoga、iOS 的绝对布局还是 Android 的 RelativeLayout?

  • Runtime framework 放在哪里?C++ 、JS 谁来承载?

  • 模块化的机制是什么样的?Node Require、Webpack Require?

  • 通信、动画怎么做等诸多问题需要我们探索,抉择。


经过团队内部多次思想上的碰撞、激烈的讨论, 最终确定以下核心设计思想。


核心


核心处理尽量下沉动态化引擎层,双端尽量做薄,动态化引擎(C++)以 Webkit、Node 为参考,即可以通过 HTML、CSS、JavaScript 编写原生应用,又可以像 Nodejs 一样使用文件操作等与原生应用的交互能力。这样的设计在上层对接前端生态时更加灵活,在处理复杂、频繁交互的大型页面时也会有更好的性能。


优化


除常规动画外,还设计了关联动画解决高频联动动画,关联动画本质上并非是一种播放类型的动效,是基于观察者模式设计的,被观察者的属性变化会影响观察者的属性变化,它将关联关系提前绑定好,一次性由 JS 线程传递给 UI 线程,这样能够很好的保证交互性能。


在方案明确后,整个团队也投入到能力建设中来,尽管每周都在发现问题、解决问题中艰难前行,但大家仍然乐此不疲,对于这种打怪升级的过程乐在其中。在基础能力、辅助工具齐备的背景下,我们开始着手动态化业务的落地实践,最终我们选择了 POI 业务。POI 即(Point ofInterest)兴趣点,如学校、酒店、饭店、加油站、超市等,高德地图上有数千万的 POI。


起航,动态化技术落地 POI



首先看一看 POI 业务的特点:


  • UI 复杂,多品类,多种多样的展现形式。

  • 与地图有存在交互。

  • 性能要求高,长列表,数据量大。

  • 富交互,大量手势交互,关联动画。


多人协作开发问题


为了快速验证能力,项目的排期非常紧张,为此前端同学 All in,业务上看尽管 POI 只有一个页面,但是却有多个行业,而行业是由多个模块拼接而成,每个模块在不同行业展现形式也不尽相同,如何解决协作问题就成为项目成败的关键之一。


为此我们完成了 Framework 框架开发,可以用 JSX 语法实现基本组件化,在组件这个级别进行 CURD 解决了模块化开发的问题。


调试问题


在项目之初我们并不存在完备的调试方式,甚至可以说不存在调试能力,只是通过 print 将 log 输出到手机端展现。这在开发 POI 时遇到了极大的问题,业务场景复杂大量实时日志无法查看,导致效率极低。


为此我们完成了 websdk,mock 能力,在浏览器端完成了 POI 页面的预览,调试。


尽管 POI 落地过程中,遇到了各种各样的问题,但结果是美好的,动态化技术也经受住了业务的考验,新的 POI 不仅完全覆盖了之前 H5 的功能,在手势动画、List 展现上还体现了更加卓越的交互体验和性能。伴随着业务上线,基建一期也基本完成,这个阶段以满足业务为中心,主要围绕支撑能力的设计和基本的开发体验。



POI 的圆满落地也标志着前端技术有能力在高德地图中承担更复杂、更核心、更大的业务场景,前端开发也即将迎来春天。


2017 年 - 2019 年:千树万树梨花开


POI 业务上的成功落地,标志着动态化技术解决方案趋于稳定,可以应对各种各样的复杂业务,随之而来的是大量业务的考验。随着动态化技术应用的深入、主要业务模块的全面接入,支撑能力不完善、动态化技术开发人员缺乏导致改造压力越来越大。


团队壮大,“小前端”到 “大前端”


人员的问题主要从内外两方面解决,外部启动招聘,大量吸纳有相关背景的前端同学。内部 Native 同学加强技术培训,转向动态化技术开发也正式提上日程。


不少同学一定有这样的经历,如果让其去调研一门新的技术大家一定非常乐意,充满干劲,对未知领域的探索,求知渴望是研发的共同点。不过如果让其持续朝着这门技术发展就会有非常多的疑虑。



通过培训等方式,解决大家对于技术不确定性和前景的担忧,大量同学开始转向动态化技术,到 2019 年初整个动态化“大前端”团队得到快速增加。


基建完善,“研发闭环,逐个突破”



  • 通过 IDE 将开发、调试能力打通。

  • 通过工程平台进行发布、回滚、更新、监控、分析操作。



业务增长,“横跨 5 大业务线,高德核心业务全覆盖”


富有战斗力的团队、渐渐完善的基建使业务从小步慢走到大步快跑,从用户的核心诉求我在哪(主图,定位),我去哪(搜索,POI),怎么去(规划,导航) 到用户的延伸诉求怎么去(打车) 怎么玩(景区)高德 5 大业务线 60 多个模块全面接入动态化技术。



这个阶段动态化业务发展迅猛,“前端团队”不断壮大,由“小前端”转变为“大前端”,基建方面也是围绕业务全面展开,不断完善。有了稳定的开发环境, 2017 年 - 2018 年,不到 2 年的时间我们完成代码量从 3W 到 60W,模块数量从 1 到 60+,开发人员井喷式增长。业务发版频次渐渐加快、加密,从单月版→快迭双周版。


2019 年 - 至今:九层之台,起于垒土


面对着越来越复杂的业务,仍有不少细节问题需要进一步解决, 如何更好的为业务赋能再次成为重点,阿里前端大咖玉伯之前的分享中有句话给我们印象颇深:


愿等花开,坚持长期主义,要快,但不能急。


回到自身来说,前面几年都是保证业务赢在当下, 支撑上都是大刀阔斧快速建设,完成 0 到 1 的过程。接下来应该帮助业务更好的活在未来,在当前基础能力具备的情况下,需要闭关审视自身,从功能的完整性,延展性等方面做到精细化。


未来,我们也将从研发生态、工程中台、智能化 3 大方向上以精细化、标准化、差异化为基础要求,不断补足能力,逐渐完成中台化、智能化的基础建设工作,围绕 IDE 打造更好的一站式场景化开发体验。


五化基建方针


  • 精细化:切中痛点,系统解题。

  • 标准化:集团生态、业界标准。

  • 差异化:标准化基础上,提供 Amap 能力扩展。

  • 智能化:低代码,物料复用,UI 自动生成。

  • 中台化:前台通用能力下沉到中台,不再局限高德。


技术大图



接下来的重点方向


  • 工具链路稳定性、延展性持续优化。

  • 平台能力中台化。

  • 全链路监控:快速分析、定位问题。

  • 物料:缩短开发到资源路径,沉淀更多基础能力。

  • 智能化:低代码、零代码。


以上是 5 年来高德地图前端技术的发展历程,过程中有失有得,我们还在路上,未来会更加努力,让出行更美好。


本文转载自公众号高德技术(ID:amap_tech)。


原文链接


https://mp.weixin.qq.com/s?__biz=Mzg4MzIwMDM5Ng==&mid=2247484936&idx=1&sn=9d54a1a0bc0f76ac4cd9aeca6a8417d2&chksm=cf4a5eebf83dd7fdbb3d956ef293cba30f9714c6944f47b3e30f49d7d10cdc3ae9dd282faf44&scene=27#wechat_redirect


2020 年 5 月 20 日 10:061500

评论

发布
暂无评论
发现更多内容

第6周 作业/学习总结

JUN

【架构训练 Week06 作业】

Rex

week06-作业

seki

第六期总结

AIK

week6 学习总结

桔子

week06-学习总结

seki

第六周·学习总结

刘璐

你的成功为你带来好运,而你的运气与努力产生让人惊喜的变化。

叶小鍵

成功学 心理学 罗伯特·弗兰克 運氣

小白如何学习操作系统?

cxuan

操作系统

架构师训练营week06 作业

GunShotPanda

简单的了解一下K8S,并搭建自己的集群

detectiveHLH

Kubernetes 微服务

架构师训练营 - 总结 6

进击的炮灰

架构师训练营第六周作业

架构师训练营第六周总结

布隆过滤器你值得拥有的开发利器

阿宝哥

缓存穿透 布隆过滤器

JVM详解之:运行时常量池

程序那些事

Java JVM class JIT GC

架构学习第六周总结

乐天

第六期作业

AIK

如何做一次完美的 ABTest?

vivo互联网技术

数据分析 AB testing实战

架构师第六周 命题作业

冯凯

单例模式

Leetao

Python 设计模式 单例模式

《架构师训练营》第六周总结

架构师第六周 总结

冯凯

企业架构框架之Zachman框架

Winfield

企业架构

Java HashMap 的那么多为什么

多选参数

Java Java源码

架构师培训 -06 学习总结 分布式数据库、NOSQL 和 ZK

刘敏

分布式数据库、分布式一致性算法

dony.zhang

分布式数据库

Java8——Stream流

Java旅途

架构师训练营week06 学习总结

GunShotPanda

第六周作业

田振宇

[架构师训练营] Week03 - 学习总结

谭方敏

高德前端这五年:动态化技术的研发历程和全面落地实践-InfoQ