In the world of big front-end technology, when we have to solve repetitive problems, we often think about designing a Domain-specific Language (DSL) or abstracting a framework layer to solve similar problems. With DSLS you don’t need to write multiple sets of code for a particular terminal, and you can take advantage of the abstraction capabilities of the host language to ensure consistent and developer-friendly rendering across terminals.

At present, popular DSLS include JSX syntax supported by React, SFC structure and V -* instruction set defined by Vue, WXML/WXS syntax of wechat applets, etc. These DSLS are eventually compiled into object code, published directly on the applets platform, or run in apps and Web browsers with jS-Runtime.

**React is a practice of functional programming. Its biggest feature is the invention of JSX syntax, which allows developers to declare UI in JS using XML, and efficiently define interfaces through component-based and more semantic code rather than templates, providing maximum flexibility and responsiveness. React only exposes the basic life cycle and process to developers. More implementation and logic details are left to users to customize flexibly. The entire development process can be completed by using JS language alone, and developers with client development experience will be more easily able to learn React.
! [](https://mmbiz.qpic.cn/mmbiz_jpg/FR6Tz3rLxibqib2KCibfUibD64UkAwBlSd1iaOoxn2Sx3S8FelM4UwCV2YDBnFg0l0dTSvbaIZ3O8DbpicX1i bV0OYEzQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)
Vue, on the other hand, wants to achieve reactive data binding and UI component composition and management through the simplest API possible, so it shields a lot of operation details by default, which provides great convenience for beginners. Its single-file component template syntax is also closer to native Html5, and developers with a Web front-end foundation will be able to make a smooth transition to Vue development.
** The virtual DOM and data-driven view updates are both designed to reduce the complexity of Web development, improve the coding experience and the efficiency of development and maintenance, and keep developers focused on the business. **
With the rapid development of mobile Internet, the category of ** front-end technology has expanded from Web front-end to mobile TERMINAL H5, Android& iOS App, small programs and other terminals, and the business focus has also shifted to mobile terminal **. React and Vue, after years of development, have become bloated and difficult to adapt to the multi-terminal background, more personalized and lower-level application scenarios. We urgently need to extract the essence from existing technologies and build simpler and lighter capabilities that can optimize and process the features of different terminals.
** New APICloud product frontier spy **

AVM (APICloud View Model) is a DSL intermediate language programming framework designed by APICloud based on standard H5 subsets. It has the following capabilities:

  • Virtual DOM: Render to different terminals through Virtual DOM, fully respect system characteristics, perform differential processing for different terminals, and achieve efficient rendering;

  • Componentization: Highly reusable, composable, and maintainable architectural design hides the complex DOM structure and behavior, allowing developers to focus on the functionality and appearance of the application;

  • Data binding: Easily bind data sources to the application user interface, reducing logic complexity and development difficulty;

  • Status management and routing: effectively separate user interface and data processing to achieve engineering management of the project;

  • Vue-like syntax and React JSX compatibility, combining the agility of Vue with the flexibility of React.

**APICloud DSL can eventually be compiled into standard JS, rendered to app and Web by DeepEngine, or compiled into wechat applet code for release on wechat applet platform. **
APICloud DSL uses Vue to define components or pages:

APICloud DSL defines components or pages in a React JSX-compatible manner:

! [](https://mmbiz.qpic.cn/mmbiz_png/FR6Tz3rLxibqfvVZJWpiaHJBxFpwiaA1FSiaVVyyQoPoey99ialNnDAwSDxPVed4qvUQt8iawibhUjPiaEa5i ceCsrklTRQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)