武汉的开发者们注意啦!AI技术战略、框架以及最佳实战尽在Azure OpenAI Day 了解详情
写点什么

Lyft 如何将 100+ 前端微服务迁移到 Next.js

Andrew Hao,Josh Callender

  • 2021-03-06
  • 本文字数:2755 字

    阅读完需:约 9 分钟

Lyft如何将100+前端微服务迁移到Next.js

介绍

在 2019 年,Lyft 的前端架构需要一次梳理。我们的公司快速增长,新的团队每天都在开发新软件系统。那时,我们从一个服务生成模板来生成新的前端服务——用一个我们定制的零配置的前端构建平台。拥有这样一种简单的服务创建方法导致了新服务的爆炸性增长,这些服务使用基于 React 的前端框架构建的各种各样的代码。

 

与此同时,我们在尝试维护自己的前端平台(一组内部的 Webpack 配置、ESLint 库和框架代码)时遇到了一些不利因素,我们发现自己陷入了对隐藏的构建错误进行故障排除的困境,并且普遍发现我们的生产效率被此类支持请求所削弱。由于代码库开始分化(就像它们在微服务架构中一样),我们的开发人员发现升级到我们的前端平台的新版本的任务非常耗时且令人沮丧。

 

有 100 多个前端服务和几乎同样多的前端工程师,为了 Lyft 的增长,很明显我们需要做一些事情来确保我们的平台是可维护的。

我们存在哪些问题?


图片来源:ray rui on Unsplash

 

我们坐下来列举了我们面临的一些核心问题:

  • 分化的基础设施:新的平台版本并没有被统一应用。随着时间的推移,我们的前端基础设施开始分化,导致可维护性和代码复杂度问题。

  • 使整个服务群保持最新是非常难的:升级每项服务的责任落在我们的产品工程团队身上,他们通常很忙且超负荷运转。这导致服务在安全性和性能更新方面落后。

  • 基础设施的激增(和分化):每个服务根据自己的需求和团队偏好,以自己特殊的方式实现前端基础设施(如 Redux,或服务端渲染),导致通用应用程序模式的各种各样的实现。

  • 性能瓶颈:随着动态导入和其它打包大小优化等技术的推出,尚未升级到我们最新平台的前端服务,没有我们新的平台更新所带来的性能提升,会在性能方面落后。

  • 通用任务很难大规模应用:通常简单的任何很难大规模应用。例如,如果我们想要将styled-components引入到我们的包中,我们需要手动进入每个服务,根据每个服务的实现方法以其独特的方法来添加它。

  • 缺乏标准化:由于我们各种各样的代码库,共享代码是非常困难的。我们的工程师在实现模式和模块时必须重新发明轮子,而不是利用共享的代码和库。

迈向 Next.js


图片来源:https://github.com/vercel/next.js

 

我们决定转向开源社区来寻找一个内生的框架来解决这些令我们头疼的问题。在评估了不同的平台后,我们决定使用Next.js!我们喜欢:

  • 其内生的固执己见的理念,将有助于我们统一我们平台的不同架构。

  • 其可执行包装器,允许我们将所有中心应用程序关注点转移到模块接口后面,消除了我们维护自己的构建系统架构的需要。

  • 其强大的开源生态系统、友好的社区和可靠的文档,向我们展示了平台的未来发展和轨迹。

 

我们本可以直接拿来 Next.js,让每个人都按原样使用它,但我们还需要解决几个问题。

添加一点儿 Lyft 秘料…


图片来源:CHUTTERSNAP on Unsplash

 

开箱即用的 Next.js 存在两个问题没有解决。

首先,我们需要自动化未来平台迁移。

我们需要能够编写易于运行且稳固的服务升级,并能够大规模应用这些功能。为了解决这个问题,我们用jscodeshift设计了一个迁移服务,允许我们发布和运行迁移,在运行升级时自动更新服务代码。

 

这意味着,我们平台中任何未来的突破性变化都将伴随着自动化的代码模块,从而升级宿主应用程序中的代码。这也意味着,我们可以打开拉取请求来升级整个服务群,而无需产品工程的干预。

我们需要一种代码共享的方法。

我们希望构建一个可扩展的应用程序体系结构,允许开发人员编写插件,以尽可能少的配置或粘合代码,来引入不同的状态管理器和包。我们围绕Webpack Tapable设计了一个插件服务,允许我们的任何开发人员将共享的 Lyft 包注入到服务中间件和客户端 React 应用程序来实现我们生态系统中的不同任务——从 GraphQL 客户端、Mirage 模拟支持、UI 组件库到围绕规范和日志的共享库。

开发人员沟通是关键



一个人不能仅仅靠自己去升级 100 个服务——我们需要验证和了解我们产品工程团队的痛点,然后再致力于我们的设计。我们采访了公司各个部门的工程师,来了解他们在当前平台上的挑战和痛点,并收集有关我们的新设计能否解决这些问题的反馈。在我们的内部前端公会全体人员会议上,我们不断向团队更新新技术栈的进度。整个过程从头到尾都是透明的且以开发人员为中心的。

 

我们将我们的新平台命名为 @lyft/service,并确定了一小部分开发人员将参与平台里程碑发布的 alpha 测试。随着我们的平台不断成熟,我们将受众扩大到更大的团队,他们会聚在一起参加为期半天的迁移研讨会。做这些会议真的帮助我们建立了一个社区,团队协作来学习 Next.js 架构,相互帮助修复问题,并了解更多关于我们为什么做出设计决策的上下文。

Beta 测试以及一些与 React Router 相关的问题

我们遇到了一些障碍,这些障碍是在我们开始在 beta 阶段迁移服务之后才出现的。例如,我们假设可以将所有应用程序从React Router迁移到Next.js默认的基于文件系统的路由。然而,由于 React Router 在我们的服务中实现的非常具体的方式,我们发现几乎不可能轻松地对这些路由进行模块编码。我们没有从 React-Router 迁移,而是构建了一个功能来允许我们的工程师保留他们现有的 React Router 路由并每次一个路由地分次迁移到 Next.js 路由。

迁移工作如何进行?

到 @lyft/service 的迁移非常容易运行。服务所有者只需要调用一个命令:

$ npx lyftsrv upgrade

我们的代码模块开始工作并安全地升级代码。一旦迁移完成,大部分繁重的工作已经完成!

 

当然,每个服务所有者也必须解决一些零散的问题,比如:

  • 修复单元测试

  • 与新的 Next.js 路由集成(或者使用我们的 React Router 实现)

  • 升级可能需要手工干预的包(例如 mobx 或 Redux 的使用)

 

平均来说,从运行迁移脚本到结束零散的问题需要几天的时间。

结果

如今,@lyft/service 运行着我们近 40%的前端服务,而且我们正在加速采用它。

 

我们看到了这个新平台令人难以置信的反馈,包括以下优势:

  • 将开发反馈循环(从代码更改到浏览器更新的时间)减少了 350ms。

  • 将打包大小减少了 845kb(在我们的样本应用程序中)。

  • 从每个服务中删除了 10000 行基础设施代码

 

迁移到这个新平台将在未来继续得到回报,因为:

  • 新的升级与 NPM 模块升级 @lyft/service 并运行迁移 CLI 命令一样简单。因为基础设施代码完全封装在一个包(和一套插件)后面,所以迁移所涉及的面比过去少得多。

  • 迁移可以通过在整个服务群中自动打开的拉取请求自动完成,所需的产品团队干预要少得多,而且所有服务都可以接收到 Next.js 社区所提供的最新最全的更新。

 

有关迁移的更多详细信息,请观看Josh在Next.js 2020大会上关于我们的迁移过程的演讲

作者介绍

Andrew Hao lyft 和 carbonfive almni 工程师,Wejoinin 联合创始人,喜欢跑步,酷爱咖啡。

 

Josh Callender lyft 的 Web 工程师,酷爱电影,美食家,技术迷。

 

英文原文链接:

 

Changing Lanes: How Lyft is Migrating 100+ Frontend Microservices to Next.js

2021-03-06 12:002453

评论

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

徐烨:这20年,我与应用系统的“云化”之路

华为云开发者联盟

架构 服务器 华为云 企业上云 应用系统

呀,又是一个谣言「Day 12」

道伟

28天写作

死磕归并排序算法

Silently9527

算法 排序算法 快速排序

git 教程 --git reset命令

生之欢愉,时间同行

git git reset

有图有真相:带你实现现流行的权限验证

华为云开发者联盟

安全 session 权限 JWT 认证

LeetCode题解:190. 颠倒二进制位,使用遮罩,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

B站专栏内页数据如何抓取,Web Scraper 学习在进一步,无编码学爬虫之五

梦想橡皮擦

Python 28天写作 3月日更

大话 Python:python 操作 excel 系列 -- 数据清洗

老王说编程

Python Excel 数据清洗

DevOps敏捷60问,一定有你想了解的问题

华为云开发者联盟

DevOps 运维 敏捷 工具链 华为云

话说 wait、notify 、 notifyAll

木子的昼夜

Java 通信 Wait notify notifyAll

上过云么?一行代码秒上云体验过么?

华为云开发者联盟

华为云 云服务器 devcloud 代码托管

为什么你停滞不前

ES_her0

28天写作 3月日更

互联网信贷风险与大数据 个人信贷业务互联网化

张老蔫

28天写作

基于pandas

rainbow

大话 Python:python 操作 excel 系列 -- 怎样读取 excel 文件?

老王说编程

Python Excel 数据读取

通过AWS EMR降低集群计算成本

行者AI

AWS 计算

不用代码趣讲 ZooKeeper 集群

HelloGitHub

Java zookeeper ZooKeeper原理

大话 Python:python 操作 excel 系列 -- excel 数据分析

老王说编程

Python 数据分析 Excel

Redis最佳实践:7个维度+43条使用规范,带你彻底玩转Redis | 附最佳实践清单

Kaito

数据库 redis 后端

浪潮肖雪:用工业互联网解决企业痛点问题

浪潮云

工业互联网

区块链培训哪家专业,引领区块链技术创新

CECBC

区块链

职场中吃力不讨好?从根因上去破解

一笑

28天写作

Mybatis系列全解(八):Mybatis的9大动态SQL标签你知道几个?提前致女神!

潘大壮

Java 后端 mybatis 后台 mybatis源码

大话 Python:python 操作 excel 系列 -- 数据处理

老王说编程

数据处理 python excel

大话 Python:python 操作 excel 系列 -- 数据的提取与筛选

老王说编程

Python Excel 数据提取与筛选

架构学习2021年03月03日(002)

张小胖

linux使用udev配置U盘自动挂载

happlyfox

Linux 28天写作 udev 自动挂载

据说很多女性看不懂地图——视觉表象

Justin

心理学 28天写作 游戏设计

大话 Python:python 操作 excel 系列 -- pandas 读取、分析、保存

老王说编程

Python Excel pandas

大话 Python:python 操作 excel 系列 -- 数据汇总与统计

老王说编程

Python Excel 数据统计

简述Electron的发展和应用

anyRTC开发者

WebRTC 跨平台 Electron RTC sdk

Lyft如何将100+前端微服务迁移到Next.js_语言 & 开发_InfoQ精选文章