Linux 之父出席、干货分享、圆桌讨论,精彩尽在 OpenCloudOS 社区开放日,报名戳 了解详情
写点什么

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

  • 2020 年 5 月 20 日
  • 本文字数:4171 字

    阅读完需:约 14 分钟

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

前言

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:061795

评论

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

Hanoi 塔问题(Java实现)

若尘

数据结构 java编程 6月日更

带你遨游银河系的十种分布式数据库

悟空聊架构

数据库 分布式 分布式数据库 6月日更

老同学突然升到了阿里P7,只因偷偷掌握了JVM的奥秘?

Java架构师迁哥

为什么开发5年的同事,还在学习23种设计模式?是他太菜?

Java架构师迁哥

每日优鲜:AI 技术驱动下的社区新零售

蚂蚁集团移动开发平台 mPaaS

人工智能 算法 图像识别 codehub

网络攻防学习笔记 Day39

穿过生命散发芬芳

网络攻防 6月日更

解读革命性容器集群CCE Turbo:计算、网络、调度全方位加速

华为云开发者联盟

容器 华为云 CCE Turbo 集群服务器

视频监控系统供电方式及选择方法

不脱发的程序猿

视频监控系统 供电方式 智能监控

学历不够,技术来凑,8年开发经验,逆袭拿到阿里P7岗

Java架构师迁哥

博客

vincentjia

云图说|OLAP开源引擎的一匹黑马,MRS集群组件之ClickHouse

华为云开发者联盟

Clickhouse MRS 华为云 云图说 OLAP开源引擎

深度分享丨如何使用微细分仪打造金融场景下的战术级客户分群

索信达控股

大数据 金融科技 用户细分 客户数据平台 客户画像

5.7w字?GitHub标星120K的Java面试知识点总结,真就物超所值了

Java 编程 程序员 面试 计算机

【译】JavaScript 代码整洁之道-重构篇

KooFE

JavaScript 大前端 代码重构 6月日更 整洁代码

java中的NIO和IO到底是什么区别?20个问题告诉你答案

华为云开发者联盟

Java io nio buffer channel

普通二本,吃透这份阿里高级专家的《Java面试手册21版》成功拿下腾讯offer

Java架构师迁哥

2021版最新!字节跳动3面+腾讯6面一次过,谈谈我的大厂面经

Java架构之路

Java 程序员 架构 面试 编程语言

Linux Shell 自动交互人机交互的 3 种方法

学神来啦

Linux 运维 Shell 虚拟机 linux运维

京东T8Java架构师呕心沥血总结整理的《15w字的Java面试手册》免费开放分享给大家复习。

Java架构之路

Java 程序员 架构 面试 编程语言

入职美团定级P7,总结2021年最新180道高级岗面试题及答案

Java架构师迁哥

上新!H3C Magic NX54双频5400M Wi-Fi 6路由器:549元

科技热闻

公安警情研判分析系统搭建,警情可视化指挥调度

如何看懂常用原理图符号、如何阅读原理图

不脱发的程序猿

电路设计 原理图符号 阅读原理图

数仓发生数据倾斜不要慌,教你轻松获取表倾斜率

华为云开发者联盟

GaussDB MPP GaussDB(DWS) 数据倾斜 并行架构

真香!SpringBoot+SpringCloud Alibaba全套脑图+学习笔记+大厂面试题

Java架构追梦

Java 架构 微服务 springboot SpringCloud

Mybatis缓存机制详解

北游学Java

Java mybatis

花了三个小时把一份GitHub上标星115k的《Java超全进阶教程》整理成了PDF文档。

Java架构之路

Java 程序员 架构 面试 编程语言

阿里云,让「服务」成为一种先进生产力

ToB行业头条

云计算 阿里云

智能家居弱电布线设计注意事项

不脱发的程序猿

智能家居 弱点布线

AI缘起——达特茅斯会议

行者AI

人工智能

揭秘Spring家族之——AOP和IOC

Java架构师迁哥

GPU容器虚拟化:用户态和内核态的技术和实践详解

GPU容器虚拟化:用户态和内核态的技术和实践详解

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