Quick logistics technology x mpaas | technical framework “improving quality and efficiency” under the support of applet container


Introduction:How does the big front-end team select technology? How to get started quickly? How to collaborate efficiently? Let’s see how kuacheng technology solves this problem.


Since 2017, GMTC’s “mobile technology conference” has been renamed “big front-end technology conference”. So far, the concepts of hybrid development, native development and front-end development are being deeply integrated to form a “big front-end” team.

How does the big front-end team select technology? How to get started quickly? How to collaborate efficiently? Let’s see how kuacheng technology solves this problem.

Origin: two places and three teams

Kuaicheng technology is a leading technology enterprise in the field of network freight transportation. The field ranks among the top three in the market, and the platforms are3w+The bulk commodity owner publishes the order to the platform, and the60w+Truck drivers receive orders for transportation, which is generated every year12 billionFreight transaction amount.

Taking the driver side as an example, it needs to carry a series of businesses with strong correlation and long process chain, such as issuing and grabbing orders, entry and exit management, in transit path monitoring, financial white slip refueling and gas filling. These tasks are jointly completed by three R & D teams in the two places.

7 * 24-hour uninterrupted customer service andIssue version 2-3 times a monthDuring the high-level iteration, the bottleneck of the technical framework has gradually become prominent, including:

  • In terms of system framework,The initial framework is native app + HTML5. The traditional web has white screen startup and poor performance response, which greatly reduces the user experience;
  • In terms of publishing cycle,There are many R & D departments and long product chains. Some enterprises need more personalized and customized services, resulting in inconsistent expectation cycles of distribution. Frequent contract renewal not only reduces the operation efficiency, but also brings the trouble of frequent renewal to customers;
  • In terms of experience consistency,The original development relies on the system framework. Due to the different original characteristics, the differences among manufacturers’ multi-channel platforms are prominent, and the performance and experience of multi-platform are quite different;
  • In terms of multisectoral collaboration,Common development languages and front-end JavaScript frameworks are different, so technicians cannot be flexibly deployed for collaborative development according to demand relaxation and online DDL in time.

In the context of the sustained and rapid development of kuacheng technology business, excellent technical architecture is the guarantee of “improving quality and efficiency”, and system reconstruction is imperative. The fast-growing partners began to look for excellent architecture to solve the scene problems.

Four dimensions of model selection

For the problems found, kuacheng small partners discussed four selection dimensions:

  • Framework maturity:In short, it is whether the new technology is reliable, the business pressure of 10 billion yuan, and there is not much room for trial and error;
  • Migration costs:If we want to get the benefits brought by the new technology, what price do we need to pay, such as the learning cost of the new technology, the transformation cost of the original architecture, etc;
  • Community atmosphere:It mainly depends on whether there are enough people following up this technology, whether the documents are rich, whether they can get help in case of problems, etc;
  • Consideration based onPerformance, cross platform and dynamic

After setting the consideration goal of technology selection, the team conducted a series of research and demo production on common cross platform solutions such as react native, weex, fluent and applet. The horizontal comparison is as follows:

< span class = “lake-fontsize-11” > technology selection</span> < span class = “lake-fontsize-11” > survey results</span>
<span class=”lake-fontsize-11″>React native and weex</span> < UL > < li > < span class = “lake-fontsize-11” > the startup time is slow and the frame rate is not as good as that of native</ Span > < / Li > < li > < span class = “Lake fontsize-11” > the migration cost is large. Developers need to encapsulate a heavy middle layer, which requires high requirements for R & D personnel</ span></li></ul>
<span class=”lake-fontsize-11″>Flutter</span> < span class = “lake-fontsize-11” > performance and efficiency are paramount, but the dynamic ability is very limited</ span>
<span class=”lake-fontsize-11″>Applet</span> < span class = “lake-fontsize-11” > it is not a cross platform development scheme in itself. It can’t use its own app to open it. It pays more attention to the advantages of channels</ span>

When entering the dilemma of technology selection, kuaicheng logistics technology came into contact with mpaas derived from the technical framework of Alipay,By using mpaas applet container, it integrates mpaas framework, offline package and reuse H5 plug-in, and relies on Web rendering engine with strong performance, which perfectly meets our expectations and requirements for technology selection.Try itAfter selecting the technology selection, in the early stage of reconstruction, our colleagues had a fierce brainstorming on the establishment and division of project engineering, and finally selected the scheme of lightweight component-based parallel development of multiple small programs and dynamic distribution under the premise of multi department cooperation.Full playback

### 1. Multi team collaboration

### 2. Real scene testFor real machine preview and debugging, first set the white list. The setting method can refer to the document, and then perform corresponding configuration and code writing on the native end according to the document. Finally, it should be noted that the QR code generated by the IDE needs to be scanned using our app’s code scanning ability (which can be connected to the code scanning component of mpaas). It can’t be opened by scanning with Alipay.`ScanService service = LauncherApplicationAgent. getInstance(). getMicroApplicationContext()`

### 3. Core problem solvingWhen we jump and transfer parameters on different pages of the same applet, we encounter the problem that the transfer of large parameters is truncated.After analysis, the applet restricted the parameter carrying length of the route jump API. Later, we chose to use the cache my Setstorage is used to access a large number of parameters. It should be noted here that the upper limit of the cache of the same applet is 10MB. Use my Clearstorage clearing the cache is particularly important.4. Elegant interactive promotionIn terms of UI development, we hope that the applet page is closer to the native, so we have developed the custom navigation bar of the applet. This part needs to be implemented on the native side. It is recommended to download the official demo and cooperate with the documents for development.By consulting the documents, it is found that this is a compatibility problem. For components that need to start the keyboard, such as input, textarea, etc., the default is the native keyboard.Future expectation
Preview the “quick driver” interface under the mpaas applet container *

> Copyright notice:The content of this article is spontaneously contributed by Alibaba cloud real name registered users, and the copyright belongs to the original author. Alibaba cloud developer community does not own its copyright or bear corresponding legal liabilities. Please refer to Alibaba cloud developer community user service agreement and Alibaba cloud developer community intellectual property protection guidelines for specific rules. If you find any content suspected of plagiarism in the community, fill in the infringement complaint form to report. Once verified, the community will immediately delete the content suspected of infringement.