Hybrid App development mode
Hhybrid App, as the name suggests, is a combination of native App and Web App. Its shell is a native app, but inside it is a web page. It can be understood that a browser is hidden in the hybrid app, and what the user sees is actually the web page rendered by the hidden browser.
The native shell of a hybrid app is called a “container”, and the hidden browser inside usually uses the web page rendering control (ie WebView control) provided by the system, or it can also have a built-in browser kernel. Structurally, the hybrid app is divided into three layers from top to bottom: HTML5 web page layer, web page engine layer (essentially an isolated browser instance), and container layer.
Hybrid apps have the advantages of both native apps and web apps while avoiding some of their disadvantages. Specifically, it can be summarized in three points.
Web technology is cross-platform. Developers only need to write a page once to support multiple platforms. In other words, a hybrid app only needs one team, and the development cost is lower.
Hybrid Apps are flexible and easily integrate multiple functions. On the one hand, the hybrid App can easily load external H5 pages to realize the plug-in structure of the App; on the other hand, the Web pages can easily call external Web services.
(3) Easy to develop
The debugging and construction of Web pages is far simpler and time-saving than native controls. It is also easy to update the page, as long as the new version is released on the server and the update in the container is triggered. In addition, web developers are also relatively easy to recruit, and traditional front-end programmers can undertake development tasks.
There are mainly three types of hybrid schemes that are more popular now, mainly because of the differences in the UI rendering mechanism:
Based on the basic solution of WebView UI, most mainstream apps on the market have adopted it, such as WeChat JS-SDK and Cordova, and complete the two-way communication between H5 and Native through JSBridge, thus endowing H5 with a certain degree of native capabilities.
Solutions based on Native UI, such as React-Native, Weex. On the basis of endowing H5 with native API capabilities, the virtual node tree (Virtual DOM) parsed by JS is further passed to Native through JSBridge and used for native rendering.
Here is a special emphasis on the third solution – based on the applet solution, which also uses a more customized JSBridge and uses a dual WebView dual thread mode to isolate JS logic and UI rendering, forming a special development mode and strengthening H5 The degree of mixing with Native improves page performance and development experience.
On the basis of JS-SDK, the applet further opens and expands the native capabilities to be called by the front end of the web. On the other hand, the UI layer and logic layer of the page rendering (Webview Render) use two independent threads. As shown below:
When the applet is running, it is essentially a virtual machine that handles web page rendering and data logic interaction. This virtual machine provides a wealth of native capabilities for the applet to call (API, components, AI capabilities, etc.), which greatly expands web applications. Capability boundaries, especially in the provision of components such as scroll view (scrool-view), navigation (navigator), picture preview (cover-image), etc., enable front-end developers to use existing web front-end technologies to develop Apps that are close to the native experience.
The selection of any technical solution should actually be based on usage scenarios and existing conditions. Based on several considerations of the company’s existing situation, we further optimized the first option, which is more suitable for our needs.
Business functions can be quickly iterated, developed flexibly, and support online hot update mechanisms.
In terms of the company’s business, there is no very complicated UI rendering requirement, and the company already has a complete front-end framework and is very mature, so we do not strongly need a solution like RN.
The core capability of the product is the need to invoke system permissions. Therefore, the pure H5 technology can do very limited things and cannot meet the needs. It needs to be strengthened by Hybrid technology, such as the “Native+ applet” technical framework
How to transform your App with the help of “Mini Program Runtime Engine”?
In the past, when the business department wanted to release some new functions, users had to take the initiative to update the app, and any change or upgrade of a partial function required going to the application market to operate again, which was very costly. Since not all users update, the IT team needs to spend a lot of effort to maintain multiple different versions. This method causes a huge waste of resources and inconvenience to the user experience.
If you use a small program, this problem will be easily solved. First of all, applets can be updated independently. As a carrier, App does not need to be updated frequently for a long period of time. Secondly, each applet can release its own version independently according to the specific needs of the business, and the updates and upgrades between different applets are independent of each other and do not interfere with each other. Finally, due to the sandbox mechanism of the small program, it is guaranteed that no matter which small program has bugs, crashes, etc., it will not drag the application itself.
At present, there are also general solutions for small programs on the market. Today I will introduce to you-FinClip. Its biggest feature is that it can run applets in any App.
You only need to import its SDK in your App to load and run external applets. In addition to the SDK, it also provides a background management system to uniformly manage the listing and removal of applets, as well as collect and analyze applet data.
Moreover, FinClip fully follows the development standards and specifications of WeChat Mini Programs. In other words, the existing WeChat applets can be directly put into your App without changing a single line of code, and the running effect remains unchanged, without additional secondary development and transformation, which greatly saves labor costs.
Not only that, but FinClip also supports a variety of terminals other than mobile phones, including Linux, Windows, MacOS, Kirin and other operating systems. This means that small programs can be used on PCs, in-vehicle devices, and smart TVs, realizing the “one-time development, running everywhere” of small programs, and reaching many traffic platforms at the same time, not just limited to the WeChat ecosystem.
FinClip also provides an IDE development tool for small programs. The interface is similar to the development tools for WeChat small programs. It comes with debugging and real-device preview, which is easy to use. In this IDE, you can carry out secondary development on existing projects, extend functions and interfaces, or write a small program from scratch.
Currently,FinClipIt has been recognized by many large companies and has hundreds of customers, including securities companies, joint-stock banks, airlines, vehicle equipment service providers, provincial mobile police platforms and other important enterprises. The number of developers exceeds 30,000, and the number of service users reaches 25 million. It has withstood the test of millions of concurrent pressures in the real production environment.