Xianyu front-end is a multi-terminal development solution based on serverless

The development of front-end is too fast, and the development of front-end frameworks and technologies is also endless, including the emergence of different smart devices, which is a big jump for front-end development students. Here is a brief list:

p>

This has caused some problems. For example, if I want to develop a universal page that is compatible with different terminals and applets, it is obviously not possible at the moment. We can only develop multiple sets of pages to adapt to different scenario, the cost would be too high.

Many students are trying to solve this problem, which has also given rise to multi-terminal unified development frameworks like taro. This is a good solution, but it is relatively passive and lacks certain scalability.

What we want to discuss in this article is to see if we can solve this problem from another angle and improve development efficiency.

ViewModel

When we develop a page, no matter which framework we use, we usually abstract a viewmodel layer, which mainly has two functions

p>

From the picture above, we can see that viewmodel is an independent piece of general code logic, which plays a role in connecting the past and the future. It is more closely related to the view layer, so it is usually placed in front-end testing.

Since the viewmodel is independent, can we put it on the backend? The biggest advantage of this is that the viewmodel can be reused, there is no need to rewrite it, and only one viewmodel needs to be changed for it to take full effect.

It seems to be a very good idea, but who will develop this part of the code? It is impossible to place hope on the back-end classmates. Of course, it can only be ourselves, and thanks to the emergence of the serverless architecture , made this possible.

Some students may ask, since the viewmodel has been moved back, what about the view? In the future, we will consider combining it with our ui2code technology, which will be really perfect.

What is serverless

Architecturally, we can divide serverless into FaaS and BaaS.

FaaS is a computing platform used to create, run, and manage function services. It supports multiple development languages, such as java, nodejs, dart, etc., which is conducive to the involvement of development students from different terminals. FaaS is based on the idea of ??event-driven. Only when a function is triggered by an event, it will occupy server resources for execution. Otherwise, there is no need to occupy server resources.

BaaS provides third-party basic services for function calls, such as identity verification, logs, databases, etc. It is provided directly by the service provider. Developers do not need to implement it and can just call it directly.

Business implementation

We develop the back-end interface through the gaia platform, which can be understood as the FaaS platform mentioned above.

There is such a requirement in daily development. The following is a page of this requirement.

Because there is a lot of data on this page, we first divide it into small modules. When the background returns data, it also returns data according to the module.

We design the interface based on the viewmodel. First of all, there must be a first-screen data interface; then there is the interaction on the page, such as switching cards and switching Sesame Credit buttons. Switching will cause page data changes, and we can unify Encapsulates a page update interface; the last is an enabled interface.

Back-end interface

For the design of the most important data structure for front-end and back-end interaction, we omit the intermediate business logic processing and look at the data structure of the interface.

The data returned by the first-screen interface mainly has several characteristics:

The return data structure of the update interface is similar to that of the first-screen interface, but the input parameters are different and mainly include 2 fields. :

Front-end processing

You can see from the data returned from the back-end that the data is extremely detailed. We do not need to do any business logic processing and can be mapped directly to the page. In this way, the front end has become a very thin layer of data, without task business logic processing, and it has become very simple. When you need to migrate to other ends, you only need to migrate the view layer. When there are any business changes, you only need to modify the backend interface to take effect.

Benefits and Summary

Through specific practice, we found that for front-end development students, it has become simpler and development efficiency has been greatly improved. Front-end students do not even You need to understand the specific business logic to complete the development of the page. Moreover, the extracted viewmodel can be reused on different terminals, and the settings also include the native terminal. We can also split the viewmodel into smaller-granularity viewmodels to facilitate reuse in different page interfaces. Some of our classmates also encapsulated a general state management framework based on redux ideas on the FaaS side, standardizing the interaction between the front and back ends.

Later, there are still some problems for us to solve, such as development costs, logical splitting of viewmodel, and positioning of specific interface problems.

The Xianyu team is the industry leader in the new technology of Flutter Dart FaaS front-end and back-end integration, now! Client/server Java/Architecture/Front-end/Quality Engineer Recruitment for the society, based in Alibaba Xixi Park, Hangzhou, let’s make community products with creative space, make in-depth and top-level open source projects, and expand the boundaries of technology to achieve the ultimate goal!

*Send your resume to Xiaoxianyu→ guicai.gxy@alibaba-inc .com

Open source projects, summit coverage, key insights, and in-depth interpretations

Please look for Xianyu Technology