Speaker
Description
This paper proposes a solution to the problem of automatically generating an efficient front-end layer code based on a provided UI design. With the increasing complexity and scalability requirements of systems, companies, as well as individual developers, are inclined to seek a sufficient and maintainable way to automate some internal processes. One such automation may involve focusing on creating a visual prototype of a graphical user interface, rather than programming skills necessary to implement it. This approach makes full automation achievable in cases where the front-end layer is a secondary concern.
The research described in the paper utilizes Node.js scripts paired with React utilities to transform a hierarchical JSON description of UI design into a basic React application. It then injects it into JSX templates while maintaining the same hierarchy in the generated virtual DOM as provided. The aspect of efficiency is addressed by providing a way to group similar components and reuse them. The resulting application is compared with referential solutions in terms of TypeScript rules compliance, code complexity, and memory allocation during the execution of a simple use case scenario.
keywords: front-end, code generation, UI design, React
