通过颤动的Realtor.com缩放移动开发

我们的扑振旅程概述以及为什么我们决定在本机移动应用程序中使用抖动。

早期移动成功

realtor.com.移动应用程序于2010年首次发布。用户群年复一年,2020年达到近900万辆独特的用户。

最初使用目标C和Java建立,开发人员在过去几年开始使用Swift和Kotlin。直到2019年中期,我们的移动团队由平台组织,其中一个单独的团队负责Android开发和另一个负责iOS开发的团队。 

这款组织模型很长一段时间,但一些问题开始变得越来越明显:

  • 它变得难以扩展。一旦这些团队中的一个达到了10个人的大小,我们需要拆分团队添加更多的开发人员。 
  • 我们为每个团队提供不同的产品所有者,导致我们的Android和iOS应用程序之间的功能和UI设计有些分歧
  • 两支球队都解决了非常相似的问题,有时没有像他们所拥有的那样合作。这导致了一些效率低下,因为我们有时是两次解决同样的问题。 
  • 这两支移动团队开始成为众多,跨公司的团队想要在移动应用程序上添加他们的功能,开始成为瓶颈:

我们改变了什么?

我们重组我们如何工作,并决定创建由责任领域而不是技术领域组织的新跨平台移动阵容。

我们创建了四个域团队和一个移动启用团队。移动启用团队的章程是通过启用构建移动应用程序所需的工具和框架来促进域团队的工作。

摇晃入门

通过我们的域名团队,现在负责同时在Android和IOS平台上交付,我们重新评估了不同的跨平台开发解决方案,以便更有效地执行我们的路线图。 

这是在谷歌宣布发布Flutter 1.0(2018年12月)之后。我们认识到其优势,并启动了一个快速的概念验证,通过使用浮动实现新的功能请求来测试它的生产Android应用程序。 

为什么扑腾而不是另一个跨平台技术?在我们的情况下,我们对使用新语言完全重写我们的应用程序并不令人兴趣,但是,我们希望通过利用扑动来开始添加新功能和用户体验添加到应用程序机制。

我们用颤音实施的第一个功能是我们的新月成本计算器,这是一个很好的候选人,原因如下: 

  • 它是我们抽屉菜单中提供的独立功能
  • 我们可以随时使用a从抽屉菜单中显示和隐藏链接远程配置
  • 风险很小,因为如果出现问题,我们可以关闭该功能

学习

通过第一次实验,我们能够验证我们的应用程序中的一些颤动屏幕,而不会对性能或用户体验产生任何负面影响。这也证实了巨大的潜在生产力提升能够开发一次功能并在我们的Android和iOS应用中使用它。

然后,我们在我们的应用程序中添加了一些更多的屏幕,以静态页面为我们的新买家现金奖励开始:

在此之后,我们实现了一个新的计划一个旅游功能,允许我们的用户要求约会: 

我们还为洪水风险添加了一个新的详细信息页面。通过使用扑动和我们现有的基础设施,该团队能够在几天内建立和释放到生产:

学习

为了构建具有一些扑波和功能的移动应用程序,我们必须在构建过程中进行更改。必须更新CI,以便在应用程序中包含扑振代码并将其包装在应用程序中。添加一些UI自动化来测试集成也需要我们现有的CI管道中的一些更改。但是一旦完成了这个初始投资,增加了新的简单颤动屏幕和功能就变得简单。

添加更多浮动

当我们创建一个专用于协作功能的新团队时,他们开始工作的第一个功能是在我们现有的Realtor.com应用程序中用户及其代理之间的聊天功能。

该团队中的大多数工程师都是Web完整堆栈工程师(后端+ Web),具有毫无知识的原生移动开发。要自然开发新的聊天功能,我们必须在团队中添加一些本土移动开发人员来实现它。相反,该团队决定在浮动中实现该功能并在我们的本机移动应用程序上发布它。 

学习

除了生产力的增益外,这向我们展示了扑腾还有助于通过允许Web开发人员比以前更容易地向我们的移动应用程序贡献移动发展。

重建我们的列表详细信息页面

我们的房源详细页面浏览量超过400万元,我们的列表详细信息页面是我们的移动应用程序的核心。此页面上显示的数据来自我们的后端API,它正在从REST架构迁移到GraphQL API。当在上市详细信息页面上工作的团队开始工作时,讨论了两种策略:

  • 重用我们现有的本机页面UI并将转换器从新的GraphQL写入现有模型。此解决方案要求我们为iOS和Android执行两次工作
  • 重建扑波中的页面,并在iOS和Android之间共享逻辑和代码。

在评估两个解决方案并基于我们之前的扑振经历后,该团队决定使用扑腾来重建我们的上市页面。 

realtor.com.有许多不同类型的列表。这四个主要类别是出售,租赁,偏离市场和新房。  

我们将这些新页面重建为可重用窗口小部件的集合,并利用振动小部件组成。

我们决定为页面的不同部分使用MVVM模式,允许我们添加 不同组件的自动化测试覆盖。

利用颤动组成方法使我们能够通过使用不同的小部件和重用组件的不同块来快速构建不同类型的列表的页面。 

学习:

该团队设定了在类似的时间帧中释放所有这些更改,就像在本机IOS和Android中完成,但使用开发人员数量的一半。 

由于现在在Android和iOS之间共享相同的代码,因此生产力的增益变得更加明显,因为团队不必实现类似的逻辑两次来重建这些页面。 

列出详细信息页重新设计

迁移我们的列表详细信息页面以扑发,我们选择了使UI保持尽可能接近本地。目标是使我们正在做的技术更改(从REST API迁移到GraphQL,UI内置的UI,v函数等…)对于我们的用户来说,不可见的用户,以验证我们的任何技术变革是否受到影响的核心指标。 

通过完成的第一步完成,我们已准备好在重新设计我们的列表详细信息页面上。新设计具有更复杂的动画,但该团队在几周内设法释放它。

我们如何发布?

通过我们以前的工作方式,我们的iOS和Android团队独立地定义了自己的发布时间表,并且只要下一个版本准备就绪就会发布。   

现在,有五个不同的团队在我们的Android和iOS应用中制作代码贡献,我们很快就开始使用2周的发布列车。 

凭借2周的释放列车,概念很简单:如果特征在火车出发中错过了,该团队将不得不在未来2周后才能接受。为了确定特征是否已准备好包含在释放中,而不是,团队使用特色标志在我们的移动应用程序中。

我们也不得不适应我们的git流量,我们慢慢地离开了特征分支模型到A.基于行李箱的模型短期特征分支。

我们如何限制风险?

我们使用此迁移执行了许多重大变化。我们在重写扑除的代码时,我们将从REST API从REST API转移到GraphQL API。要限制风险,我们将保留我们现有页面并开始释放Firebase Remote Config背后的新扑振屏幕。远程配置允许我们将流量的一部分远程指向新的颤动屏幕,并在必要时恢复到本机屏幕。 

扑波加入应用程序限制

我们在此描述的局限性只是在使用颤动时发生的添加到应用程序设置我们在现有本机应用程序中添加新的颤动屏幕。如果您从扑发中从头开始启动新的应用程序,这将不适用于您。

对于我们所有的原因,扑除对我们来说非常棒’在上面列出。但是,我们一次获得一个屏幕的这些好处,我们需要使用颤动’S添加到应用技术。这很好,因为它允许我们无缝地在我们现有的Android和iOS应用中添加和替换屏幕,但现在我们’Re Juggling三种不同的UI技术—android,ios和flutter—与此有一些额外的复杂性和局限性。

要了解在现有本机应用程序中使用扑波的主要限制之一,我们需要查看导航堆栈。添加可以导致多页的扑振活动时,您将最终有两个导航堆栈:您的本地和抖动导航栈。 

当扑波导航堆栈上的最后一个页面打开新的本机活动时,事情会变得更加复杂:本机1 =>飘飘1 =>原生2.

这仍然可以,但如果最后一个本机活动有一条可以打开另一个颤动屏幕的路径,您现在必须通过以下任一处理它: 

  • 为此新的颤动活动创建一个新的颤动引擎,这是内存密集型的,并且不允许两个浮动引擎之间的数据交换
  • 删除以前的扑振活动并从您的本机导航堆栈中删除它,以便您可以重用新的扑热引擎以为新的启动器。这是我们几乎有限用例的方法:

通过这样做,当用户按下设备上的后退按钮时,您可能会在导航堆栈中结束某些不一致。

阿里巴巴对这些问题进行了解决方法这个博客帖子。扑腾团队也在努力改进 支持多个颤动实例在一个应该有助于消除一些现有限制的应用程序。

不必处理那种问题,我们大多避免了使用应用程序从本地切换到原始的使用情况。我们的解决方案是将颤动屏幕保持在导航树的一侧。一旦用户切换到颤动侧,用户只能导航到其他颤动屏幕,除非它们击中后按钮。这意味着在此阶段和我们当前的架构上,并非每个屏幕或新功能都可以在颤振。

结论

在现有中添加颤动安卓iOS. 具有数百万用户的应用程序具有挑战,但选择扑腾向Realtor.com带来了许多好处。

  • 它帮助我们通过允许Web开发人员为我们的移动应用程序提供贡献而无需学习两种新语言和框架,帮助我们民主化。 
  • 在通过为我们的技术堆栈带来新技术所需的原始投资时,我们实现了一系列主要生产力提升,能够为我们的Android和IOS应用程序开发一次,而不会影响应用程序的性能或用户体验。在我们的经验中,释放功能和执行变化需要大约与此类此类相同的时间,但随着开发人员数量的一半。

我们正在招聘!!如果我们引发了您的兴趣,并且您有一些移动体验(iOS,Android,摇动或反应本地),请向我们发送您的简历地址!!我们正在为我们的温哥华,圣克拉拉和奥斯汀办公室招聘,但也对遥远的工作开放!