A system and method that enables AI-assisted enterprise front-end development.

Abstract

This invention relates to a system and method (1) that enables the production of front-end code, micro-front-end components and modernization outputs compliant with enterprise standards by combining design artifacts, guidelines belonging to enterprise development frameworks, on-premises component libraries and component metadata resources accessible from the Integrated Development Environment (IDE) in the same pipeline in enterprise front-end development processes.

Description

1 TARIFF AI-POWERED ENTERPRISE FRONT-END DEVELOPMENT A system and method that makes it possible. Technical Area 5 This invention helps to eliminate design artifacts in enterprise front-end development processes. guidelines for corporate development frameworks, in-house components libraries and Integrated Development Environment Component metadata sources accessible from within the Environment (IDE) can be processed in the same way. by combining them in the line, front-end code compliant with corporate standards, A system that enables the production of micro-face components and modernization outputs. and it is related to method. Previous Technique 15 In current state of the art, developers use design files in existing applications. user interface components and pages isolated from the main application an open-source front-end that enables development, testing, and documentation The documentation, which is a development tool and is called "Storybook," 20 component property information, corporate standard documents, and This requires manually establishing links between legacy codebases; also leads to loss of context, use of non-standard components, rework, and conversion. This leads to errors. Furthermore, outdated web component-based structures are becoming increasingly rare in modern times. The transition to corporate patterns usually involves separate tools, separate teams, or intensive 25 It requires manual labor. Solutions used prior to invention generally fall into five categories. The first category is general-purpose front-end design tools like “Figma” or similar. These are design-to-code solutions that generate code from design. The second category is 30 Component features, structures, and stories on "storybook"-like platforms. 2 These are documentation tools that document variations. The third category, scoring compliance with development standards and setting up or below certain thresholds These are governance tools that do not grant publishing permission. The fourth category is micro-front-end. framework migration with architectures and legacy systems These are the tools for modernization (legacy modernization). The fifth category is component 5. or enriching code snippets with metadata or semantically These are the solutions that classify. While significant progress has been made in these categories, the typical shortcoming is institutional. standards in a single process pipeline extending from design to working page 10 It is about not being forced into deterministic constraints. Design and actual component usage. The link between them often remains at the documentation level; the developer still... which component will be used with which feature set, which variant will be used in the project that it fits the context and what its equivalent is within the corporate framework It is searching manually. This manual search, especially the working face 15 (employee-face) and customer-face, depending on the project context. This becomes more apparent in the differentiated component catalogs. Another shortcoming is that quality and performance evaluation is mostly focused on improvement. It is left for later. Design quality score, compliance with corporate standards 20 The need, accessibility, or performance risks stem from code generation in most systems. First of all, it is not determined automatically and measurably. Also, “React” Decomposition of pages into micro-front structure by old cells / network components The modernization of base structures is addressed in an integrated manner within the same tool. It is not taken into account. As a result, the front-end lifecycle; from design to code, from code to 25 From architectural fragmentation to heritage transformation, divided, inter-vehicle Contextual loss is high, and institutional standardization remains difficult. Therefore, considering the studies and shortcomings in the current technique... When this is the case, corporate standards are deterministically applied to the production line. inclusion of component metadata information by the developer in separate portals 3 reducing the need for searching, with a single Integrated Development Environment offering protocol-based integration that is not limited, from design to code and Presenting an integrated transformation extending from code to micro-front-end, inheriting the legacy Corporate naming and modernizing front-end assets with patterns ensuring that each component meets expectations and is semantic usable. 5 It appears that a system is needed to generate these scores. United States Regulation US12079603B2, which is included in the known state of the art. The patent document describes a simplified user interface development process. A universal application is being discussed. The invention in question has a universal application. an application framework, a new framework that can itself be a user interface application. Efficient, user-centric interface (UI) implementation with perspective organizer It provides opportunities for development. Perspective organizers, each with a specific purpose. It can be used to create possible perspectives. UI developed in this way. applications, technical 15 of a front-end server of the universal application framework It can be mapped to the same target mapping that points to the application component. Technical The application component is a type of UI application that is not specific to any particular purpose. It can provide action and navigation information for the section. A perspective, from a table It is tied to logical entities, like a node representing rows. Perspective is a The table has 20 rows in the layout, each with a data view and a perspective type. It's possible. The type of perspective determines which data view can be used within that perspective. He checks. Brief Description of the Invention The aim of this invention is to eliminate design artifacts in enterprise front-end development processes. guidelines for corporate development frameworks, in-house components libraries and Integrated Development Environment Component metadata sources accessible from within the Environment (IDE) undergo the same process. by combining them in the line, the front-end code, compliant with corporate standards, 30 4 To enable the production of micro-face components and modernization outputs. It is about implementing a developed system. Another aim of this invention is to ensure that corporate standards are produced in a deterministic manner. inclusion in the pipeline, component metadata information separately by the developer 5 reducing the need to search across portals, a single Integrated Development Providing protocol-based integration that is not limited by its environment, an integrated transformation extending from design to code and from code to micro-front-end the presentation, the corporate naming of inheritance front-end assets, and Modernization through patterns and semantic adaptation to expectations for each component. 10 a system developed to enable the generation of usability scores to accomplish. Detailed Description of the Invention This invention was developed using "Artificial Intelligence Support" to achieve its purpose. "A System and Method Enabling Enterprise Front-End Development" is attached. This is shown in the figure; Figure 1; Schematic view of the system that is the subject of the invention. 20 Figure 2 shows a schematic view of the invention method. The parts shown in the figures are individually numbered, and these numbers... The corresponding answers are given below. 1. System 2. Database 3. Server Method 30, Number 100 Design artifacts in enterprise front-end development processes, corporate guidelines for development frameworks, on-premises component libraries, and Component metadata sources accessible from within the Integrated Development Environment By being integrated into the same processing pipeline, the front end compliant with corporate standards 5. Enabling the production of code, micro-front end components, and modernization outputs. The system in question, developed for the purpose of invention (1); - enterprise software framework rules, command / prompt instructions, Component usage restrictions, naming convention, and pattern information are recorded. keeping company-specific component library information and project including 10 based variants; employee face and customer face at least one data point structured to represent contextual differences base (2), - design tool outputs, JavaScript Object Representation data, corporate Obtaining guidelines, component catalog, and project context information, Converting input types into a common schema, design JavaScript 15 Purging Object Representation data of unnecessary fields, fields canonicalize in a fixed order and preferentially tokenize and transmit. to reduce costs, Integrated Development Environment or other client providing access to resources, requests, and tools from environments, software developers can isolate user interface components from the main application. allows them to design, test and document in an environment. Storybook is an open-source front-end development tool that recognizes pages, component documentation, feature lists, network components Semantic indexing by collecting inventories and sample usage information. to create, decompose cells and old network component structures, 25 afforestation and a modern institutional approach from leaf to root. at least one server configured to convert into patterns (3) It includes. The database (2) in the system (1) which is the subject of the invention, enterprise software framework 30 rules, prompt instructions, component usage 6 constraints, naming convention and pattern information It is structured to keep records. The database (2) is company-specific. Including component library information and project-based variants; working interface the contextual differences between employee-face and customer-face It is structured to represent 5 The server (3) in the system (1) which is the subject of the invention, design tool outputs, JavaScript Object Notation (JavaScript Object Notation - JSON) data, corporate guidelines, Retrieving component catalog and project context information, and grouping input types in a common format. It is configured to convert to schema. Server (3), design JavaScript 10 Purging Object Representation data of unnecessary fields, arranging fields in a fixed order. canonicalization and preferential reduction of token and transmission costs. It is structured as follows: Server (3), Integrated Development Environment (Integrated Source, request from Development Environment (IDE) or other client environments and is configured to provide vehicle access. Server (3), software 15 developers create user interface components in an environment isolated from the main application. an open-source framework that allows designing, testing, and documenting The “Storybook” page, component documentation, and features are part of the face enhancement tool. (Property) lists, web component inventories, and sample usage. It is structured to create a semantic index by collecting information. 20 Server (3), design elements, organizational components, project context and rules It is structured to generate a tree / graph model that establishes relationships between them. Server (3) presents the design elements to the components within the target corporate framework. It is configured to map and generate the output code. The server (3) is generated or an existing, open-source 25 used to create user interfaces The structure of the JavaScript library "React" can be explained by its module boundaries and routing. to break down according to dependency and shared resource rules It is being configured. The server (3) has cells and legacy network component structures. decomposition, afforestation, and a modern leaf-to-root approach. It is structured to transform into corporate patterns. Server (3), design 30 quality score, organizational alignment score, expectation alignment score, and performance preparation 7 Calculating indicators, generating improvement suggestions in subthreshold situations. It is configured to transform. The server (3), code, manifest, semantic side (sidecar) files, logs, test artifacts, and subsequent software agent. to produce feedback packets that can be used for their studies It is being structured. 5 Design artifacts in enterprise front-end development processes, corporate guidelines for development frameworks, on-premises component libraries, and Component metadata sources accessible from within the Integrated Development Environment By being integrated into the same processing pipeline, the front-end 10 compliant with corporate standards. To enable the production of code, micro-front-end components, and modernization outputs. The subject of the invention developed for this purpose (100); - design tool output, corporate guidelines, component libraries and obtaining the project context, minimizing the design JSON data. and canonicalization (101), 15 - Defining the project context and applicable institutional components selection of the catalog (102), - Storybook, an open-source software development tool, is a component. record, network component inventory and request / instruction resources Reading; feature, event, variant, example usage and restriction information 20 removal (103), - a context graph between design nodes and enterprise components or creating a component tree; target component for each node, required feature set, event model, and design token binding definition (104), 25 - Design quality, performance and corporate compliance before code generation. Implementation of controls; automatic improvement in subthreshold results. generating suggestions or blocking warnings (105), - component calls that are compatible with the target corporate framework structure, file the production of its structure, transfer relations and patterns (106), 30 8 - making the output code compileable / executable and demo, preview initiation of monitoring or testing environment (107), - micro-front end of the output of “React”, an open-source library Separation into modules; module boundaries, routing definitions, 5 including shared dependencies and installation triggers Creating a structured metadata file (108), - parsing old cells or network component inputs into a tree structure. transformation, from leaf to root transformation of each lower node restructuring according to corporate patterns and component names standardization (109), 10 - semantic descriptor, expectation match score and for each component, Generating a corporate compliance score; this information is available in sidecar files or storage in metadata blocks (110), - code, test artifacts, score reports, logs, and feedback The packets are provided as output; then again in subsequent agent cycles 15 (111) steps to keep it on record for use It includes. Industrial application of the invention The invention subject system (1) design tool outputs, JavaScript Object Representation data, Obtaining corporate guidelines, component catalog, and project context information. Converting input types into a common schema, designing JavaScript Object Notation. removing unnecessary fields from the data, arranging fields in a fixed order. canonicalization and preferential reduction of token and transmission costs, Integrated 25 Access to resources, requests, and tools from the development environment or other client environments. to enable software developers to separate user interface components from the main application that allows it to design, test and document in an isolated environment Storybook pages, an open-source front-end development tool, are components documents, feature lists, network component inventories, and sample usage information 30 creating a semantic index by collecting cells and legacy network component structures. 9 decomposition, afforestation, and a modern institutional approach from leaf to root. It is structured to be transformed into patterns. Around these fundamental concepts, the invention's subject is "AI-Powered Enterprise". There are many 5 related to "A System and Method that Enables Front-End Development (1)". It is possible to develop various applications, and the invention described herein It cannot be limited to examples; it is essentially as stated in the requests.

Claims

REQUESTS 1. Design artifacts in corporate front-end development processes, corporate guidelines for development frameworks, on-premises component libraries, and Component metadata 5 accessible from within the Integrated Development Environment. by combining corporate resources in the same processing pipeline Standard compliant front end code, micro-front end components and modernization Developed to enable the production of outputs; - enterprise software framework rules, command / prompt instructions, Component usage restrictions, naming convention, and pattern information are recorded in record 10. keeping company-specific component library information and project to include variants based on; employee face and customer face. at least one data point structured to represent contextual differences including the base (2); - design tool outputs, JavaScript Object Representation data, corporate 15 Obtaining guidelines, component catalog, and project context information, Converting input types into a common schema, design JavaScript Purging Object Representation data of unnecessary fields, fields canonicalize in a fixed order and preferentially tokenize and transmit. to reduce costs, Integrated Development Environment or other client 20 providing access to resources, requests, and tools from environments, software developers isolate user interface components from the main application allows them to design, test and document in an environment. Storybook is an open-source front-end development tool that recognizes pages, component documentation, feature lists, network component 25 Semantic indexing by collecting inventories and sample usage information. to create, decompose cells and old network component structures, afforestation and a modern institutional approach from leaf to root. with at least one server (3) configured to convert into patterns a characterized system (1). 30 11 2. Enterprise software framework rules, command / prompt instructions, Component usage restrictions, naming convention, and pattern information are recorded. characterized by the database structured to keep it under (2) A system like the one in claim 1 (1).

3. Company-specific component library information and project-based variants. to include; to represent contextual differences in the form of employee face and customer face The above is characterized by the database (2) which is structured to do so. a system like any of the requests (1).

4. Design tool outputs, JavaScript Object Representation data, corporate. Obtaining instructions, component catalog, and project context information, input with the server (3) configured to convert the types into a common scheme as in any of the above characterized claims system (1). 15 5. Design JavaScript Object Representation by removing unnecessary fields from data. to purify, canonicalize areas in a fixed order, and preferentially token and server configured to reduce transmission costs. (3) like any of the above-mentioned claims characterized by 20 system (1).

6. Source, request from Integrated Development Environment or other client environments and characterized by the server (3) configured to provide vehicle access. a system like any of the above requests (1). 25 7. Software developers separate user interface components from the main application. It allows them to design, test, and document in an isolated environment. Storybook is an open-source front-end development tool that recognizes pages, component documentation, feature lists, network component inventories and 30 12 to create a semantic index by collecting example usage information from the above requests characterized by the configured server (3) a system like any other (1).

8. Design elements, organizational components, project context and rules are among the 5 Server configured to produce a tree / graph model that establishes relationships (3) as in any of the above claims characterized by system (1).

9. To map design elements to components within the target corporate framework and 10. characterized by the server (3) configured to generate the output code a system like any of the above requests (1).

10. Open-source materials used to create user interfaces, whether manufactured or existing. React, a JavaScript library, has a module limit of 15. according to routing, dependency, and shared resource rules characterized by the server (3) configured to split a system like any of the above requests (1).

11. To separate, tree, and organize cells and legacy network component structures. 20 Transforming from a leaf-to-root approach into modern corporate patterns The above is characterized by the server (3) configured to do so. a system like any of the requests (1).

12. Design quality score, corporate alignment score, expectation fulfillment score and 25 calculating performance readiness indicators in subthreshold situations Server configured to generate improvement suggestions and transform (3) as in any of the above claims characterized by system (1). 13 13. Code, manifest, semantic side files, logs, test artifacts, and subsequent files. feedback packets that can be used for software agent studies The above is characterized by the server (3) configured to produce a system like any of the requests (1).

14. Design artifacts in corporate front-end development processes, corporate guidelines for development frameworks, on-premises component libraries, and Component metadata accessible from within the Integrated Development Environment. by combining corporate resources in the same processing pipeline Standard compliant front end code, micro-front end components and modernization 10 Developed to enable the production of outputs; - design tool output, corporate guidelines, component libraries and obtaining the project context, minimizing the design JSON data. and canonicalization (101), - Defining the project context and applicable institutional component 15 selection of the catalog (102), - Storybook, an open-source software development tool, is a component. record, network component inventory and request / instruction resources reading; feature, event, variant, example usage and restriction information. removal (103), 20 - a context graph between design nodes and enterprise components or creating a component tree; target component for each node, required feature set, event model, and design token binding definition (104), - Design quality, performance and organizational compliance before code generation 25 Implementation of controls; automatic improvement in subthreshold results. generating suggestions or blocking warnings (105), - component calls that are compatible with the target corporate framework structure, file the production of its structure, transfer relations and patterns (106), 14 - making the output code compileable / executable and demo, preview initiation of monitoring or testing environment (107), - micro-front end of the output of “React”, an open-source library Separation into modules; module boundaries, routing definitions, 5 including shared dependencies and installation triggers Creating a structured metadata file (108), - parsing old cells or network component inputs into a tree structure. transformation, from leaf to root transformation of each lower node restructuring according to corporate patterns and component names standardization (109), 10 - semantic descriptor, expectation match score and for each component, Generating a corporate compliance score; this information is available in sidecar files or storage in metadata blocks (110), - code, test artifacts, score reports, logs, and feedback The packets are provided as output; then again in subsequent agent cycles 15 (111) characterized by being kept on record for use a method (100). 25

Images