数据驱动ui_探索服务器驱动的ui

最新推荐文章于 2024-05-25 16:12:45 发布

weixin_26727575

最新推荐文章于 2024-05-25 16:12:45 发布

阅读量399

点赞数

文章标签： python

原文链接：https://medium.com/better-programming/exploring-server-driven-ui-cf67b3da919

版权

本文深入探讨了数据驱动UI的概念，通过介绍如何利用服务器数据动态构建用户界面，阐述了这种技术的优势和应用场景。文章以Python为例，讨论了实现数据驱动UI的方法，帮助读者理解如何将后端数据实时反映在前端展示上。

摘要由CSDN通过智能技术生成

数据驱动ui

Native apps are still the first choice for businesses that want to expand at scale and reach out to millions based on their UI and performance. This statement might be controversial for many of the people out there, but we’re not going to discuss which platform is best. Instead, we’re going to learn how to grab more control over what you’re showing in the app using server-driven UI.

对于希望大规模扩展并根据用户界面和性能扩展到数百万的企业，本地应用程序仍然是首选。对于许多人来说，这个说法可能会引起争议，但是我们不会讨论哪个平台最好。相反，我们将学习如何使用服务器驱动的UI来更好地控制您在应用程序中显示的内容。

I always wonder how apps like Airbnb, Flipkart, and Swiggy update their UI on the fly. Even if I didn’t update the app, Flipkart shows different UIs during festivals, while Swiggy always changes its UI based on the device location. Do you wonder how they do it?

我一直想知道Airbnb，Flipkart和Swiggy之类的应用程序如何即时更新其用户界面。即使我没有更新应用程序，Flipkart 在节日期间显示不同的UI，而Swiggy 始终根据设备位置更改其UI。您想知道他们是如何做到的吗？

Image for post — Changes in the Swiggy UI based on location.

什么是服务器驱动的UI？ (What Is Server-Driven UI?)

Server-driven UI is when the API tells the client what components to render and with what content. This can be implemented in all three major platforms: Android, iOS, and the web. In my opinion, this type of development makes native apps more reactive and controllable.

服务器驱动的UI是指API告诉客户端要渲染的组件以及内容的内容。这可以在所有三个主要平台上实现：Android，iOS和Web。我认为，这种类型的开发使本机应用程序更具响应性和可控性。

服务器如何控制UI？ (How Can a Server Control UI?)

Theoretically, it’s simple: We make a request to a server and then we receive a JSON response in which there will be logic for what to inflate on the screen. Based on the logic, we have to render natively developed UI components on the view. This results in a high-quality user experience and allows more control for the companies over what users can see. Look at the image below to have a high-level view of how the response from a server can render views:

从理论上讲，这很简单：我们向服务器发出请求，然后我们收到一个JSON响应，其中将显示在屏幕上膨胀的逻辑。基于逻辑，我们必须在视图上呈现本机开发的UI组件。这样可以带来高质量的用户体验，并允许公司对用户所看到的内容进行更多控制。查看下面的图像，以高角度查看服务器响应如何呈现视图：

If we want to change the order in UI, like the actions row below the image and then the title, we just need to change the response:

如果我们要更改UI中的顺序，例如图像下方的操作行，然后是标题，则只需要更改响应即可：

Similarly, if we want to include a totally different component (e.g. a full-length button below the title) and remove the action row, again we just have to change the response:

同样，如果我们要包括一个完全不同的组件(例如，标题下方的一个全长按钮)并删除操作行，则只需更改响应即可：

With this approach, we can change anything in the UI based on user location, subscription, or literally anything.

使用这种方法，我们可以根据用户位置，订阅或任何字面上的内容来更改UI中的任何内容。

优点 (Advantages)

Businesses no longer need to depend on users to update the app to show specific UI or to change the order of the UI (at least for the most part).
企业不再需要依赖用户来更新应用程序以显示特定的UI或更改UI的顺序(至少大部分情况下)。
We can run tests on specific features on the fly.
我们可以即时对特定功能进行测试。
It’s easy to ship new features and create more reusable components.
易于交付新功能并创建更多可重用的组件。
Native experience for users and reactive for companies.
用户的本机体验，公司的被动响应。

I think it’s a win-win process.

我认为这是一个双赢的过程。

深入了解SDUI (A Deeper Look at SDUI)

It’s impossible for individual developers to create an SDUI system, so I would like to use Lona (an SDUI library) by Airbnb to explain SDUI.

个人开发人员不可能创建SDUI系统，因此我想使用Airbnb的Lona (SDUI库)来解释SDUI。

There are many libraries out there:

有很多图书馆：

Epoxy from Airbnb
来自Airbnb的环氧树脂
Litho from Facebook
来自Facebook的光刻
Proteus from Flipkart
来自Flipkart的Proteus
Graywater from Tumblr
灰水起Tumblr

Back to the point, Airbnb uses a component-based UI, like Jetpack Compose. When a JSON format is received from the server, app developers inflate components based on the row types in the JSON.

回到重点，Airbnb使用了基于组件的UI，例如Jetpack Compose 。从服务器收到JSON格式后，应用程序开发人员将根据JSON中的行类型为组件充气。

JSON格式 (JSON format)

Let’s consider a very basic JSON to keep things simple. Have a look:

让我们考虑一个非常基本的JSON，以使事情保持简单。看一看：

The node type defines which type of component should be inflated on the view, such as Title Row, Action Row, and more (as we see above). The Content node provides the contents to be shown in the inflated view. For example, if my component is Title Row, then the title and subtitle contain the contents to be shown in the title and subtitle fields. The Action node is used to inflate actionable components like click and content navigation should happen based on the onPress node.

节点type定义了应在视图上放大的组件类型，例如标题行，操作行等等(如上所述)。 “ Content节点提供要在展开视图中显示的内容。例如，如果我的组件是“标题行”，则标题和副标题包含要在title和subtitle字段中显示的内容。 “ Action节点用于为可点击操作等可操作组件充气，内容导航应基于onPress节点进行。

SDUI的版本控制挑战 (Versioning Challenges With SDUI)

Let’s say you’ve released your app recently with SDUI, and after a few days, you pushed an update to the Play Store and enabled new API changes that include new components to be inflated in the view. The problem here is that not all users update to the latest version, and some might even stay in very old versions.

假设您最近使用SDUI发布了您的应用，几天后，您将更新推送到Play商店，并启用了新的API更改，其中包括在视图中添加的新组件。这里的问题是，并非所有用户都更新到最新版本，甚至有些用户可能仍旧使用旧版本。

When an old version of the app accesses new API responses, the consequences will be direct, so we should be very careful to ensure the API responses and client-side code should be backward-compatible.

当旧版本的应用访问新的API响应时，后果将是直接的，因此我们应该非常小心以确保API响应和客户端代码应向后兼容。

Let’s see the solution provided by Airbnb for versioning problems. Below is the JSON format for the header component in Version 1 that was already published.

让我们看看Airbnb提供的解决方案用于版本问题。以下是版本1中已发布的标头组件的JSON格式。

As we already published the app, we need a new version to make any changes. To integrate new changes, we need to include new variable minVersion enclosed with the version number. Under that variable, we can include any number of components and styles. Have a look:

由于我们已经发布了该应用程序，因此我们需要一个新版本来进行任何更改。为了集成新的更改，我们需要包括新的变量minVersion随附在版本号中。在该变量下，我们可以包括任意数量的组件和样式。看一看：

As we don’t access minVersion in the previous version of the app, there will be no problem.

由于我们不在该应用的先前版本中访问minVersion ，因此不会有问题。

Jetpack与SDUI结合(未来) (Jetpack Compose With SDUI (Future))

Jetpack Compose is a new library from the Android team that is in its very early stages. It’s ultimately going to change how we design UI in Android.

Jetpack Compose是Android团队的一个新库，该库尚处于早期阶段。最终将改变我们在Android中设计UI的方式。

JetPack Compose combines a reactive programming model with conciseness and simple coding using Kotlin programming language. Plus, it is fully declarative, meaning you describe your UI by calling a series of functions that transform data into a UI hierarchy, which is more convenient for building layouts with SDUI than using traditional XML formats.

JetPack Compose将React式编程模型与简洁，使用Kotlin编程语言的简单编码相结合。另外，它是完全声明性的，这意味着您可以通过调用一系列将数据转换为UI层次结构的函数来描述UI，与使用传统XML格式相比，使用SDUI构建布局更方便。

Though we’ve advanced libraries like Litho, Epoxy, and more from big tech companies, having a native solution is more convenient. That’s the reason Jetpack Compose is going to shine in the near future.

尽管我们拥有先进的库，例如Litho，Epoxy等，以及来自大型科技公司的更多库，但是拥有本机解决方案更为方便。这就是Jetpack Compose将在不久的将来大放异彩的原因。

To know more about JetPack Compose, read the following articles:

要了解有关JetPack Compose的更多信息，请阅读以下文章：

结论 (Conclusion)

Before we wrap up, I would like to thank Laura Kelly and Nathanael Silverman. I’ve learned many of the concepts that I mentioned here from the talk that they gave at KotlinConfig 2019. If you’re interested, have a look:

在结束之前，我要感谢劳拉·凯利和纳塔奈尔·西尔弗曼。我从在KotlinConfig 2019上的演讲中学到了很多我在这里提到的概念。如果您有兴趣，请看一下：

Thank you for reading.

感谢您的阅读。