In the field of large front-end technology, when we encounter 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. Using DSL, we do not need to write multiple sets of code for specific terminals. We can also use the abstract ability of the host language to ensure the consistency of rendering effects of each terminal and be friendly to developers.
Currently popular DSLs include:JSX syntax supported by react, SFC structure and v-* instruction set defined by Vue, wxml / WXS syntax of wechat applet, etc. These DSLs are eventually compiled into object code and published directly on the applet platform, or run in app and web browser with the help of JS runtime.
AVM (application view model) is a DSL intermediate language programming framework designed by apiccloud based on the standard H5 subset. It provides a programming framework avm.js including virtual Dom and runtime and a multi terminal unified compilation tool. It is fully compatible with the web components standard and the coding of Vue and react syntax. The compilation tool compiles and converts the syntax related to Vue and react into avm.js code.
AVM core library only focuses on terminal differences, virtual DOM, componentization and data binding. Unlike other heavyweight frameworks, AVM does not need too many external dependencies, but only needs the capabilities of more modern frameworks such as componentization and data driving. It can have the following capabilities:
1. 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;
2. Componentization:The architecture design with high reusability, composability and maintainability hides the complex DOM structure and behavior, allowing developers to focus on the function and appearance of the application;
3. Data binding:Easily bind the data source to the application user interface to reduce the logical complexity and development difficulty;
4. Status management and routing:Effectively separate the user interface and data processing to realize the engineering management of the project;
5. Light and flexible:Vue like syntax and compatible with react JSX combine the lightness of Vue and the flexibility of react.
Apiccloud DSL can finally be compiled into standard JS, rendered to app and web through deepnengine, or compiled into wechat applet code for wechat applet platform publishing.
Apiccloud DSL uses Vue to define components or pages:
Apiccloud DSL defines components or pages in a way compatible with react JSX: