Cross platform development technology year end inventory

Time:2020-11-30

Cross platform development technology year end inventory

Efficiency has always been the lifeline of Internet enterprises. and“Through technology upgrading, three people can do five people’s work and earn four people’s wages”It is a win-win situation that enterprises and individuals have been eager to achieve.

With the fierce competition in the industry, in order to further improve the development efficiency, cross platform development has gradually become the rigid demand of the Internet industry.

Under such a trend, some head Internet companies have launched different types of cross platform solutions based on their own technical background and technical conditions at that time.

According to the type of technology, it can be divided into the following categories:

JS + web view rendering

Representative: phonegap (Adobe)

The UI rendering of this technology is completely handed over to web view, and the functions of camera, GPS and address book are added to web view through bridge.

Advantages: complete web experience, high development efficiency of front-end students.
Disadvantages: performance is quite different from native.

JS + native UI rendering

Class representatives: react native (Facebook), weex (ALI)
GitHub address:
https://github.com/facebook/r…

Development technology still uses JS and other web elements, but UI rendering, animation, network and so on are all implemented by native. JS to native calls are implemented through the JS bridge.

advantage:
1. The experience is consistent with the original, and the threshold for web development is slightly lower.
2. The performance is improved to a certain extent.

Disadvantages:
1. Android and IOS native developers have high learning costs.
2. Due to JS virtual machine and JS bridge, there is still a big gap with native performance.

Rendering based on graphics engine (discarding native UI)

Class representative: fluent (Google)
GitHub address:
https://github.com/flutter/fl…

The famous cocos2d-x is also in this camp. The framework no longer relies on Web technology, nor does it rely on the native UI framework. Through the graphics engine to achieve their own rendering.

advantage:
1. Get rid of the system UI constraints, easy to achieve code consistency of different platforms.
2. The design is innovative.

Disadvantages:
1. From dart learning cost to the complexity of UI layout, the development efficiency is obviously reduced.
2. Hot update is not supported.

Rendering based on native UI

Class representative: mln
GitHub address:
https://github.com/momotech/MLN

Mln has just been open-source in GitHub, and its name sounds strange. Development language used in the field of game Lua (developed you are familiar with Warcraft, angry birds), with the characteristics of fast, easy to use. Page layout uses the familiar FrameLayout and LinearLayout developed by client.

advantage:
1. Client development is very fast.
2. Good performance, close to the original effect.

Disadvantages:
The new product is mainly used in Momo, lacking of third-party verification.

How to choose cross platform technology?

The birth of these cross platform frameworks has its own technical background. Only by choosing the right scene can they exert their true power.

1. Make short-term operation activity page

This kind of page is more like FMCG, which will be offline two or three days after the event. Operation and product students pay more attention to the display effect and online on schedule. At this time, the web technology of phonegap class is a very pragmatic choice. Because of the low threshold, many companies have their own technical framework.

2. A team based on web programmers

It is suggested that strong teams choose react native and weex frameworks. This kind of product can reuse the development experience of web programmer to a great extent, but it also needs the support of client development with strong technical strength. Such as performance optimization, customized development.

3. A team mainly composed of client programmers

1) React native and weex are excluded here. JS, Vue and other web technologies usually require client programmers to spend about a week to get started. In addition, the change of thinking mode of writing code will continue to slow down the development efficiency for a period of time.

The serious performance consumption of JS virtual machine and JS bridge also makes the performance of this kind of technology lag behind the native one.

2) Flutter also failed to carry the banner of high performance and high efficiency. Moreover, it does not support hot update, which is unacceptable to many Internet enterprises that focus on iterative efficiency.

Not to mention the cost of dart language learning and the complexity of UI layout, in online search and my own performance evaluation, flutter has not been able to fulfill its claimed high performance.

3) In contrast, mln is extremely friendly to client developers. Lua’s concise C-like syntax will not cause any obstacles to the client developers.

Linear layout and frame layout make client developers feel that using mln is just a naming rule for the UI framework that they are familiar with. The original development experience can be transferred directly.

infoView = LinearLayout(LinearType.VERTICAL)
infoView:setGravity(Gravity.CENTER_VERTICAL)
contentView:addView(infoView)

The hot overload function is convenient and practical. It is helpful to improve UI development efficiency to see the code execution effect at any time. Through the performance test done by the official demo, mln is also the most close to the native performance of all the frameworks.

Based on the real needs of the first-line Internet companies and developers, mln solves a series of performance and efficiency problems in the development. It is worth recommending.

Performance comparison

It’s time for performance comparison to hurt each other

Cross platform development technology year end inventory

Cross platform development technology year end inventory

Cross platform development technology year end inventory

Cross platform development technology year end inventory

As can be seen from the above data, mln has significant performance advantages compared with other mainstream products. On the one hand, it benefits from the high performance of lua virtual machine. In addition, the design of mln lazy loading and MMAP based cache also played an important role.

It takes more than 60 milliseconds to call Lua bridge 1000 times on the low-end Android mobile phone oppo A3, while the 1000 times JS bridge usually takes about 1400 Ms. Lua’s high performance gives mln more design space.

At the same time, the lazy loading mode of mln is very practical. Many functions may have only a few K codes in the UI display part, but there are dozens or hundreds of K codes behind the control state switching, user information merge, data acquisition and other complex business logic. If the code structure is not handled well, it is easy to slow down the page display speed.

Mln lazy loading function, in a separate loop loop loop priority processing let users see the content. No matter how complex the business logic is, the page can be displayed quickly.

In addition, mln kV storage module mlnkv is also independently open source(https://github.com/momotech/M…)。 Mlnkv realizes the coexistence of high performance and low memory consumption through MMAP, double cache strategy and value storage of record offset. From a number of performance indicators, mlnkv is the most efficient kV storage module in the industry.

Technology selection and careful design create high performance of mln.

Future technology planning of mln

Mln is just open source, and there are still some deficiencies in the tool chain support and function richness compared with some old cross platform frameworks. However, from the planning and design of mln on GitHub, many functions are under development. We can see from many plans that the manufacturers are sincere.

1. Continue to maintain performance leadership

1) Support non intrusive asynchronous measure (in progress)
2) List control adds non intrusive intelligent preloading (backlog)
3) Recently added declarative UI to give developers more choices (in progress)

After all this, mln performance may exceed that of most native applications.

2. Rich functions can really improve the development efficiency

Providing rich class library support can really help business development and improve development efficiency, otherwise cross platform framework is likely to become a few geek’s toys. Official support of mln program:

Network, SVGA animation, sharing, asynchronous loading of images and other business development commonly used class library bridge, will gradually add more functions in the future.

Toolchain support (the following functions will be integrated into the plug-in)

1) Simulator (in progress)
2) Code test coverage (in progress)
3) Performance testing
4) Upgrade breakpoint debugging (in progress)

3. The technology that supports in place has vitality

Mln is moving Momo’s internal community to GitHub to provide consistent support for internal and external issues.

summary

The above is the year-end inventory of cross platform development technology. On the industry level, on the one hand, the competition in the domestic Internet industry is fierce, and enterprises need to constantly innovate, try and error quickly, and respond to the changes and demands of the market; on the other hand, the integration of the end has become a more and more obvious trend, and a unified development mode and development experience has become a clear direction for the development of large front-end.

Because of the special market environment in our country, it also gives us an opportunity to overtake on the curve. Whether we can grasp this opportunity depends on the participation of each developer and the investment and contribution of each technology manufacturer.

As a new generation of technology community in China, segmentfault hopes to work with domestic developers and technology manufacturers to create a best era for Chinese developers.


Click the link to experience mln first:https://github.com/momotech/MLN

Cross platform development technology year end inventory