高德前端这五年:业务、技术和团队

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

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

  • 2015 年 ,业务上大量拉新的诉求,活动需求暴增,应用前端开始登上高德技术大舞台。
  • 2016 年 - 2017 年,业务高速发展,对于效率以及双端一致性的诉求,带来了前端发展的契机,动态化技术开始落地。
  • 2017 年 - 2019 年,动态化在高德全面落地,前端开发的角色越来越重要,业务半径不断延展。
  • 2019 年 - 至今,这是目前的发展阶段,更加关注支撑的稳定性和延展性,让业务更好的活在未来。

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

2015 年:小荷才露尖尖角

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

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

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

  • 组件化:和运营同学一起规范、建设活动常用组件。
  • 模版化:拼图,通过模版化解决简单页面的搭建问题。
  • 流程化:CLI 加速工作流。

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

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

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

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

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

image.png

到 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

image.png

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

  • UI 复杂,多品类,多种多样的展现形式。
  • 与地图有存在交互。
  • 性能要求高,长列表,数据量大。
  • 富交互,大量手势交互,关联动画。

多人协作开发问题

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

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

调试问题

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

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

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

image.png

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

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

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

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

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

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

image.png

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

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

image.png

  • 通过 IDE 将开发、调试能力打通。
  • 通过工程平台进行发布、回滚、更新、监控、分析操作。

image.png

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

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

image.png

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

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

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

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

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

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

五化基建方针

  • 精细化:切中痛点,系统解题。
  • 标准化:集团生态、业界标准。
  • 差异化:在标准化的基础上,提供 Amap 能力扩展。
  • 智能化:低代码,物料复用,UI 自动生成。
  • 中台化:前台通用能力下沉到中台,不再局限高德。

技术大图

image.png

接下来的重点方向

  • 工具链路稳定性、延展性持续优化。
  • 平台能力中台化。
  • 全链路监控:快速分析、定位问题。
  • 物料:缩短开发到资源路径,沉淀更多基础能力。
  • 智能化:低代码、零代码。

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

《高德技术 2019 年刊合辑》:点击这里
image.png

目录
相关文章
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
25天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
1月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
43 5
|
1月前
|
前端开发 JavaScript UED
不可思议!前端小白如何靠这些技巧逆袭,成为团队中的闪耀之星?
前端开发对初学者来说充满挑战,但通过正确的方法和技巧,你可以从新手蜕变为高手。本文分享前端小白逆袭的秘诀,包括夯实HTML、CSS与JavaScript基础,掌握前端框架与库,提升性能优化技巧,以及持续学习与分享。示例代码展示了简单的HTML+CSS+JavaScript页面和Vue组件,帮助你逐步进阶。
24 4
|
1月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
32 3
|
1月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
1月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
43 3
|
1月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
30 2
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
42 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效