TGStat
TGStat
Type to search
Advanced channel search
  • flag English
    Site language
    flag Russian flag English flag Uzbek
  • Sign In
  • Catalog
    Channels and groups catalog Search for channels
    Add a channel/group
  • Ratings
    Rating of channels Rating of groups Posts rating
    Ratings of brands and people
  • Analytics
  • Search by posts
  • Telegram monitoring
Levix 空间站

28 Apr, 16:55

Open in Telegram Share Report

线上传输 JSX

Dan Abramov 深入探讨了如何通过后端直接返回 JSX 数据来优化前端组件的数据获取方式,提出了一种将数据加载逻辑与组件紧密绑定的解决方案,旨在解决传统 REST API 在数据获取和组件渲染之间的脱节问题。

Dan 通过一个示例展示了传统前端组件获取数据的流程:前端组件通过 API 请求获取 JSON 数据,然后将这些数据作为 props 传递给子组件。然而,这种方式存在一些问题,例如数据获取逻辑分散在多个组件中,难以维护,且可能导致多次网络请求。Dan 提出了一种新的思路,即让后端 API 直接返回 JSX 数据,而不是传统的 JSON 数据。这样,后端就成为了前端组件的“父组件”,直接将数据以 JSX 的形式传递给前端组件,从而减少了前端的数据处理逻辑,提高了开发效率。

Dan 还讨论了 Model、View 和 ViewModel 的概念。Model 是数据的原始形态,View 是用户界面,而 ViewModel 是连接 Model 和 View 的中间层,它根据 View 的需求对 Model 进行转换和封装。在传统的 REST API 中,ViewModel 的概念往往被忽视,导致后端返回的数据与前端的需求不匹配。而通过后端返回 JSX 的方式,可以更好地将 ViewModel 的概念融入到开发流程中,使后端能够根据前端组件的需求直接生成 ViewModel。

Dan 进一步阐述了这种开发模式的优势。首先,它能够减少前端和后端之间的通信次数,因为后端可以直接返回完整的 JSX 数据,而不是让前端多次请求不同的资源。其次,这种方式使得后端能够更好地理解前端组件的需求,从而生成更加精准的 ViewModel。此外,它还能够提高代码的可维护性,因为数据加载逻辑和组件渲染逻辑紧密结合在一起,便于开发者进行调试和优化。

Dan 提到了 Backend For Frontend(BFF)的概念,这是一种在前端和后端之间添加的中间层,用于将后端的 REST API 转换为前端所需的 ViewModel。通过 BFF,开发者可以更好地控制数据的加载和转换过程,同时避免了对现有后端架构的大规模改动。BFF 可以根据前端的需求动态生成 ViewModel,并将其作为 JSON 数据返回给前端。这种方式不仅提高了开发效率,还能够更好地适应前端界面的变化。

在讨论如何实现后端返回 JSX 的过程中,Dan 提出了将后端逻辑封装为可复用的 ViewModel 函数的想法。这些函数可以根据前端组件的需求加载数据,并生成相应的 JSX 数据。通过这种方式,开发者可以构建一个树状的 ViewModel 结构,其中每个 ViewModel 函数都负责加载一部分数据,并将其传递给对应的前端组件。这种结构类似于 React 组件树,使得开发者可以在后端以类似编写 React 组件的方式编写数据加载逻辑。

Dan 还探讨了如何将后端的 ViewModel 函数与前端组件进行绑定。通过将 ViewModel 函数返回的 JSX 数据直接传递给前端组件,可以实现数据的自动绑定。这种方式不仅简化了前端的数据处理逻辑,还使得后端逻辑与前端组件之间的关系更加紧密。开发者可以通过直接在后端编写 JSX 来生成前端所需的组件树,从而实现前后端的无缝对接。

此外,Dan 提到了 React Server Components(RSC)的概念,这是一种将后端逻辑和前端组件紧密结合起来的技术。在 RSC 中,后端组件可以像前端组件一样编写,并且可以直接返回 JSX 数据。这些数据在传输到前端时会被序列化为 JSON 格式,然后在前端被反序列化并渲染为实际的组件。这种方式不仅提高了开发效率,还能够更好地利用服务器的计算能力,同时保持了前端的交互性。

最后,Dan 总结了这种开发模式的优点,包括减少了前端和后端之间的通信次数、提高了代码的可维护性、更好地适应前端界面的变化等。同时,Dan 也指出这种模式可能会带来一些挑战,例如需要开发者同时掌握前端和后端的开发技能,以及需要解决前后端模块系统之间的连接问题。尽管如此,Dan 认为这种开发模式具有很大的潜力,能够为现代 Web 开发带来新的思路和方法。

通过深入探讨后端返回 JSX 的开发模式,Dan 展示了如何通过将数据加载逻辑与前端组件紧密结合,提高开发效率和代码可维护性。这种模式不仅能够减少前端和后端之间的通信次数,还能够更好地适应前端界面的变化,为现代 Web 开发提供了一种新的思路和方法。

#JSX #性能 #BFF

https://overreacted.io/jsx-over-the-wire/
JSX Over The Wire — overreacted
Turning your API inside-out.

136 0 2 1
Catalog
Channels and groups catalog Channels compilations Search for channels Add a channel/group
Ratings
Rating of Telegram channels Rating of Telegram groups Posts rating Ratings of brands and people
API
API statistics Search API of posts API Callback
Our channels
@TGStat @TGStat_Chat @telepulse @TGStatAPI
Read
Академия TGStat Telegram Research 2019 Telegram Research 2021 Telegram Research 2023
Contacts
Справочный центр Support Email Jobs
Miscellaneous
Terms and conditions Privacy policy Public offer
Our bots
@TGStat_Bot @SearcheeBot @TGAlertsBot @tg_analytics_bot @TGStatChatBot