Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

APICloud multi-ended development principles


May 29, 2021 Article blog



Based on compatibility and inheritance of all APIs, modules, technology stacks, and user experiences of APICloud, APICloud defines a new set of code writing standards (DSLs): based on the standard Web Components componentization idea, compatible with Vue/React syntax features, compiled into APP, small program code, and multi-ended development in one encoding.


App code runs with DeepEngine 3.0, a fully translated operating principle that provides a fully native experience and performance.


How APICloud works across the multi-ended technology

Developers write code in development tools and form a virtual dom that compiles into apps, H5s, and small program platforms using compilation tools such as webpack and rollup. R un the entire V8JavaScript-based engine when compiled to the app platform, plus the combination of avm .js to render or execute developer-written code, browser-based or system-owned webview, with the help of avm.js render directly to the browser or webview real dom. The corresponding program code is to generate the small program syntax directly.


 APICloud multi-ended development principles1


APICloud's 4 core competencies in multi-ended technology:

Cross-platform engine

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

During this time, cross-platform technologies separate two main directions:


  1. Mixed direction: That is, HTML5 plus Native hybrid, which is what we commonly call hybrid development: quickly implement the UI layout, business logic of the APP through HTML5, involving features that HTML5 cannot implement or experience badly during development, with the help of the Natry module.
    The model's APP engine is based on a Webview architecture as a whole, is front-end developer-friendly, back-to-back with a huge JavaScript ecosystem on the front end, where developers can develop apps without having to learn new technologies. This direction represents technologies such as Cordova, AppMobi, Ionic, and more.
  2. Intermediate Language (DSL) Compilation Direction: The development process requires that APP code be written using specific syntax and compiled into Android/iOS native APPS through a compilation environment. Developers don't need to learn android and iOS native technologies and complex development languages such as Java, Object-C, C/C.

Instead of relying on Webview, this pattern's APP engine enables fully native rendering with more complex code logic from JS-Runtime, such as the V8/JSCore engine, while extending and refining JS/Native's communication mechanisms, well-packaged components, and system capabilities. This direction not only continues the front-end development system, but also maximizes rendering performance, representing the technology for React Native, Weex.


APICloud DeepEngine 3.0 supports both technology models, allowing developers to freely choose one of these methods for development in the same APP.


DeepEngine uses a fully translated principle to compile Javascript into the Native API, providing a fully native experience and performance for the APP.


 APICloud multi-ended development principles2


Cross-end JS architecture

In the big front-end technology world, when we encounter problems that need to be addressed repetitively, we often consider designing a Domain-Specific Language or abstracting a framework layer specifically to address these similar issues. With DSL, we don't need to write multiple sets of code for a particular terminal, but we can also take advantage of the abstraction of the host language to ensure consistency and developer-friendly rendering of each terminal.


Common DSLs are: react-supported JSX syntax, Vue-defined SFC structure and v-* set, WeChat applet WXML/WXS syntax, and more. These DSLs are eventually compiled into target code, published directly on the small program platform, or run on apps and web browsers with JS-Runtime.


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


  • Virtual DOM: through virtual DOM, rendering to different terminals, fully respect the characteristics of the system, for different terminals to perform differential processing, to achieve efficient rendering;
  • Componentization: High reusability, composability, and maintainability of architectural design that hides complex DOM structures and behaviors and allows developers to focus on the functionality and appearance of the application;
  • Data binding: easily bind data sources to the application user interface, reducing logical complexity and development difficulty;
  • State management and routing: effective separation of user interface and data processing, to achieve the project's engineering management;
  • Class Vue syntax and react-compatible JSX combine Vue's lightness with React's flexibility.

APICloud DSLs can eventually be compiled into standard JS, rendered via DeepEngine to the app and web, or compiled into WeChat small program code for WeChat small program platform publishing.


Full process development tools

Development tools are the "soul mates" of developers throughout their careers. T here are many popular and proven tools on the market for multi-faceted development, such as VSCode, Sublime, WebStorm, and more. Because of the personalization of multi-ended technology DSL, if you can provide "standardization, industry and customization" of the full process development tools, including complete coding, debugging, and publishing capabilities, multi-ended development work can be done with less, so such as WeChat and Alipay's small program development process, are provided in line with their own business characteristics of the IDE.


Take the APICloud Studio3 multi-ended development tool, which is based on industry-leading code editor -VSCode Deep Customization, which supports running on Windows, Mac, and Linux systems, building on all the capabilities of VSCode:


  • Provides comfortable highlights, complete with intelligent help tips and autocomplete capabilities to support APICloud-defined DSL writing;
  • Provides real-time preview and real-machine debugging capabilities to debug code and preview effects directly in the tool, or use Wi-Fi, USB link real phone for debugging and functional verification;
  • Provides simple and efficient code management that supports Git-style code management, while built-in SVN simplifies complex Git operations;
  • Cloud-integrated, tightly connected to APICloud, maintained and connected to the cloud, enabling on-premises creation/import projects, cloud compilation, custom Loader, and module management.


A unified compilation environment

A multi-terminal unified compilation environment is a collection of tools such as code analysis, syntax analysis, translation, and refactoring, which compiles DSLs into the target programming language, such as Less as CSS. In the field of multi-ended technology, a multi-ended compilation environment is responsible for compiling DSLs into standard JS and Html code that can be executed in a JS engine or web browser, as well as code that complies with the technical standards of small programs such as WeChat or Alipay.

The successfully compiled standard JS code runs in a cross-platform APP engine to implement app-side functionality; This results in a set of code that can be deployed simultaneously to the app, the small program, and the H5 side.

The common multi-terminal compilation environments are:

  • Mpvue: Supports the compilation of Vue syntax into small programs and H5, supports WeChat, Alipay and other small programs
  • Taro: Supports compiling React syntax into small programs and H5, wechat, Alipay and other small programs, and generating React Native APP
  • Hippy (Tencent): It also supports compiling Vue and React syntax into WeChat mini-programs and H5
  • Chameleon: Supports compiling its CML syntax to a variety of terminals, including the Web, applets, weex APP, and more

APICloud multi-terminal compilation environment currently supports the use of class Html5 technology to achieve multi-terminal development, without the need to build a specific terminal compilation environment, one-click cloud compilation can generate high-quality target terminal code, high availability, conducive to secondary development. Supports compilation as Android/iOS APP, WeChat apple app, and standard H5.


The above is provided by APICloud, a low-code development platform, who would like to learn more about the recommended Learning Programming Lion (w3cschool.cn) free course, APICloud (3.0)-APP-App-Small Program Live Development Training.