Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of the principle of APICloud multi-terminal development, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on the principle of APICloud multi-terminal development. Let's take a look at it.

On the basis of compatible and inheriting all API, module, technology stack and user experience of APICloud, APICloud defines a set of new coding standard (DSL): based on the component idea of standard Web Components, compatible with Vue / React syntax characteristics, through one coding, it is compiled into APP and Mini Program code respectively to realize multi-terminal development.

APP code runs using DeepEngine3.0, and the fully translated operation principle provides a completely native experience and performance.

The working principle of the whole multiterminal technology of APICloud

Developers write code in the development tools and form a virtual dom, which is compiled to app, H5 and Mini Program platforms by webpack, rollup and other compilation tools. When compiling to the app platform, run the V8JavaScript-based engine to run, coupled with the joint role of avm.js to render or execute the code written by the developer, based on the browser or the system's own webview, the code is directly rendered to the browser or webview real dom with the help of avm.js. The corresponding Mini Program code is to generate Mini Program syntax directly.

Four core competencies of APICloud in multi-terminal technology: cross-platform engine

After nearly a decade of development, cross-platform technology and ecology now tend to be stable, enterprises and developers have formed a consensus on cross-platform technology, and large-scale application to a variety of business scenarios.

During this period, cross-platform technology has been separated into two main directions:

Mixed direction: that is, HTML5 + Native hybrid, that is, what we usually call hybrid development: the rapid realization of APP's UI layout and business logic through HTML5, and the use of Native module to achieve functions that HTML5 cannot achieve or experience bad in the development process.

The APP engine of this model is based on Webview architecture, is friendly to front-end developers, and relies on the huge JavaScript ecology of front-end. Front-end developers can develop APP without learning new technologies. The representative technologies in this direction are Cordova, AppMobi, Ionic and so on.

Intermediate language (DSL) compilation direction: the development process requires APP code to be written in a specific syntax and compiled into Android / iOS native APP through the compilation environment. Developers do not need to learn the native technology of Android & iOS and complex development languages such as Java, Object-C, and Cplink + to complete APP development.

The APP engine of this mode does not rely on Webview, but relies on Virtual Machine, such as V8 / JSCore engine, to achieve more complex code logic through JS-Runtime to meet interactive processing, communication and state management. At the same time, it extends and improves the communication mechanism of JS / Native, encapsulates perfect components and system capabilities to achieve complete native rendering. This direction not only continues the front-end development system, but also maximizes the performance of rendering. The representative technologies are React Native and Weex.

APICloud DeepEngine 3.0 supports both of the above technical models, allowing developers to freely choose one of the two ways to develop in the same APP.

DeepEngine compiles Javascript to Native API using the principle of full translation, providing a completely native experience and performance for APP.

Cross-end JS architecture

In the field of large front-end technology, when we encounter repetitive problems that need to be solved, we usually consider designing a DSL (Domain-Specific Language) or abstracting a framework layer to solve these similar problems. With DSL, we do not need to write multiple sets of code for specific terminals, and we can also make use of the abstract ability of the host language to ensure consistent rendering effects of each terminal and developer-friendly.

Common DSL includes JSX syntax supported by React, SFC structure defined by Vue and vMel * instruction set, WeChat Mini Programs's WXML/WXS syntax and so on. These DSL are eventually compiled into object code and published directly on the Mini Program platform, or run on APP and Web browsers with the help of JS-Runtime.

The APICloud View Model Framework is a DSL intermediate language programming framework based on the standard H5 subset. It currently has the following capabilities:

Virtual DOM: render to different terminals through virtual DOM, fully respect the system characteristics, and perform differential processing for different terminals to achieve efficient rendering.

Componentization: highly reusable, combinable and maintainable architecture design that hides complex DOM structure and behavior, allowing developers to focus on the function and appearance of the application

Data binding: easily bind the data source to the application user interface, reducing logic complexity and development difficulty

State management and routing: effectively separate the user interface and data processing to realize the engineering management of the project

Vue-like syntax and compatible with React JSX, with both the lightweight of Vue and the flexibility of React.

APICloud DSL can eventually be compiled into standard JS, rendered to APP and Web through DeepEngine, or compiled into WeChat Mini Programs code for WeChat Mini Programs platform release.

Full-process development tool

As the "soul mate" of developers, development tools are accompanied throughout the developer's career. There are many popular and mature tools on the market for multi-side development, such as VSCode, Sublime, WebStorm and so on. Due to the personalization of multi-terminal technology DSL, if you can provide "standardization + commercialization + customization" full-process development tools, including complete coding, debugging, and release functions, you can get twice the result with half the effort. Therefore, Mini Program development processes such as Wechat and Alipay all provide IDE in line with their own business characteristics.

Take the APICloud Studio3 multi-terminal development tool as an example, it is based on the industry's leading code editor-VSCode deep customization, supports running on Windows, Mac and Linux systems, and is compatible with all the capabilities of VSCode:

Provides comfortable highlighting, complete intelligent help prompts and auto-completion, and supports DSL writing defined by APICloud

Provide real-time preview and real-time debugging capabilities, you can debug code and preview effects directly in tools, or use Wi-Fi and USB to link to real mobile phones for debugging and functional verification

Provide simple and efficient code management, support Git-style code management, while built-in SVN, simplify complex Git operations

The cloud is integrated, closely linked with APICloud business, and can be connected with the cloud. You can create / import projects, cloud compilation, custom Loader, and module management locally.

Unified compilation environment

Multi-terminal unified compilation environment is a collection of code parsing, syntax analysis, translation, refactoring and other tools, responsible for compiling DSL to the target programming language, such as Less to CSS. In the field of multi-terminal technology, the multi-terminal compilation environment is responsible for compiling DSL into standard JS and Html code that can be executed in JS engines or Web browsers, and into code that conforms to Mini Program technical standards such as Wechat or Alipay.

The compiled standard JS code runs in a cross-platform APP engine to achieve APP functions; Mini Program code can be directly used to publish to Wechat or Alipay Mini Program platforms to achieve Mini Program functions; and Html code can be released as Web side. As a result, a set of code can be deployed to APP, Mini Program and H5 at the same time.

At present, the common multi-terminal compilation environments are:

Mpvue (Meituan): supports compiling Vue syntax to Mini Program and H5, and supports Wechat, Alipay and other Mini Program

Taro (JD.com): support compiling React syntax to Mini Program and H5, supporting Wechat, Alipay and other Mini Program, as well as generating React Native APP

Hippy (Tencent): supports both Vue and React syntax compilation to WeChat Mini Programs and H5

Chameleon (Didi): supports compiling its CML syntax to Web, Mini Program, Weex APP and other terminals

APICloud multi-terminal compilation environment currently supports the use of Html5-like technology to achieve multi-terminal development, without building a specific terminal compilation environment, one-click cloud compilation can generate high-quality target terminal code, high availability, conducive to secondary development. Support compiling to Android / iOS APP, WeChat Mini Programs and standard H5.

This is the end of the article on "what is the principle of APICloud multiterminal development". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the principle of APICloud multi-terminal development". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.