Multi-Framework Syntax Translation via Abstract Syntax Tree Mapping

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Front-end developers face inefficiencies due to the need to continuously learn various development frameworks, prolonging development periods and reducing usage efficiency.

Innovation Solution

A method and device that generate an abstract syntax tree for HTML templates and JSX blocks, determining and mapping their nodes to the syntax of a designated framework, allowing automatic generation of an abstract syntax tree for the framework, thereby simplifying the development process across multiple frameworks.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If front-end developers continuously learn various development frameworks, then they can support multiple frameworks, but the development period is prolonged and usage efficiency is reduced

Engineering Contradiction:

Improvemulti-framework supportVSAvoiddevelopment period

Core Design Contradiction:

Adaptability or versatilityVSLoss of time

Solution Approach 1:

The patent introduces an intermediary translation layer that converts JSX syntax (written by developers) into framework-specific syntax automatically. This intermediary system includes a parser that generates abstract syntax trees from JSX, and a code generator that transforms these trees into framework-specific code, eliminating the need for developers to learn multiple frameworks while maintaining multi-framework support capability

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent segments the development process into distinct components: JSX authoring, parsing to abstract syntax tree, mapping to framework-specific syntax, and code generation. This segmentation allows the complex multi-framework support problem to be solved by addressing each segment independently, with automatic translation handling the framework-specific details

Inventive Principle:

Principle #1Segmentation

2Adaptability or versatility

If front-end developers continuously learn various development frameworks, then they can support multiple frameworks, but usage efficiency is reduced

Engineering Contradiction:

Improvemulti-framework supportVSAvoidusage efficiency

Core Design Contradiction:

Adaptability or versatilityVSProductivity

Solution Approach 1:

The translation system acts as an intermediary that automatically handles framework-specific syntax transformation, allowing developers to write framework-agnostic JSX code while the system handles the framework-specific implementation details, thereby improving usage efficiency without sacrificing multi-framework adaptability

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent creates a universal JSX representation that can be copied and translated into multiple framework-specific implementations. The abstract syntax tree serves as a framework-agnostic intermediate representation that can be transformed into different target frameworks, enabling efficient code reuse across frameworks

Inventive Principle:

Principle #26Copying

Data Source

PatentUS10564945B2Method and device for supporting multi-framework syntax

Publication Date: 2020.02.18 BEIJING XIAOMI MOBILE SOFTWARE CO LTD

AI summary

The present disclosure relates to a method and a device for supporting multi-framework syntax. The method includes a first abstract syntax tree corresponding to a HTML template and at least one JSX block is generated, a mapping relationship between each node of the first abstract syntax tree and syntax of a designated framework is determined, and the first abstract syntax tree is mapped to an abstract syntax tree of the designated framework according to the mapping relationship.