Trockene Informationen | Verbesserung der Front-End-Entwicklungseffizienz, Praxis des Ctrip-Ticket-Anpassungscodegenerators

Über den Autor

Zilin Wang, ein leitender Front-End-Entwicklungsingenieur, ist gut in Front-End-Aufgaben und konzentriert sich auf Remix, Radix UI, Haskell und andere Bereiche.

Sheila Dai, eine leitende Front-End-Entwicklungsingenieurin, konzentriert sich auf Front-End-Leistungsoptimierung und Front-End-Intelligenz.

In der täglichen Forschungs- und Entwicklungsarbeit nimmt das Schreiben der Front-End-Schnittstellenstruktur einen Teil der Arbeitsbelastung ein. Viele UI-Komponenten weisen gemeinsame Funktionen auf. Wie die Entwicklungszeit für das Schreiben von UI-Schnittstellen verkürzt und gemeinsame Front-End-Komponenten extrahiert werden können, um die Forschungs- und Entwicklungseffizienz zu verbessern, ist für uns ein wichtiges Thema.

In „Front-End Intelligent Exploration, Skeleton Screen Low Code Automatic Generation Solution Practice“ haben wir einmal eine Lösung zum automatischen Generieren von Skelettbildschirmcode untersucht. Auf dieser Grundlage haben wir eine Reihe von Anpassungsprozessen für den Codegenerator entworfen, um dies zu erreichen Der Effekt von Jeder Code kann angepasst werden. Dieser Artikel konzentriert sich auf die Generierung von beliebigem Code aus visuellen Entwürfen, erörtert die Prinzipien und Details des Codegenerators und zeigt schließlich den Implementierungseffekt.

1. Hintergrund

Der Skelett-Bildschirmcode wird automatisch generiert. Als Minimum MVP (Minimum Viable Product) überprüft es die Machbarkeit und Praktikabilität der automatischen Generierung von Code aus dem visuellen Entwurf.

Welche anderen gemeinsamen Komponenten können also neben der stark repetitiven Natur des Skelettbildschirms implementiert werden? Ist es überhaupt möglich, die Business-Komponenten der Anwendung zu implementieren?

Die Abbildung zeigt die groben Schritte zum Generieren von Code aus einem visuellen Entwurf. Wir können sehen, dass wir nach dem Extrahieren der visuellen Entwurfsinformationen und der Verwendung eines allgemeinen Algorithmus nach Erhalt des Zwischencodes unseren Zielcode generieren können. In diesem Schritt können wir durch Bearbeiten des Zwischencodes automatisch verschiedene Zielcodes generieren.

Wir gehen davon aus, dass wir diesen Schritt der Forschung und Entwicklung des Unternehmens selbst überlassen und durch das Einfügen verschiedener Codegeneratoren in die D2C-Plattform der erforderliche Zielcode automatisch in Echtzeit generiert werden kann.

Bei den Konvertierungsergebnissen der gesamten Seite kann jede Komponente auf der Seite durch Auswahl eines anderen Codegenerators entsprechende Ergebnisse erzielen.

2. Problemanalyse

Dieser Plan ist ein erweitertes Design, das auf den Ergebnissen der Skeleton-Screen-Exploration basiert. Die Hauptprobleme, mit denen wir konfrontiert sind, sind die folgenden drei:

1) Plattformperspektive: Wie kann der Generator hochgradig anpassbar gemacht werden?

Das erste Problem, das wir lösen müssen, besteht darin, der Geschäftsentwicklung die Definition eines eigenen Codegenerators zu ermöglichen. Dann müssen wir die Zwischencodeschicht von der geschlossenen Plattform trennen und sie in einen offenen Plug-In-Eingang umwandeln.

2) Aus der Sicht des Generatorautors: Wie kann man schnell mit dem Schreiben beginnen?

Obwohl der Generator für ein bestimmtes Zielcodeergebnis den Zwischencode nur einmal schreiben muss, kann er als öffentliches Plug-in auf der Plattform für andere F&E-Benutzer bereitgestellt werden. Beim Schreiben dieses Zwischencodes gibt es jedoch immer noch eine gewisse Schwelle, die Personen abschreckt, die ihn verwenden möchten. Wir müssen diesen Schwellenwert senken, damit die Unternehmensforschung und -entwicklung jederzeit ihren eigenen Codegenerator veröffentlichen oder anpassen kann.

3) Aus der Sicht normaler Benutzer: Wie können vorhandene Generatoren kostenlos genutzt werden?

Wenn der auf der Plattform bereitgestellte Generator bereits die Bedürfnisse des Benutzers erfüllt, kann er mit einem Klick Code generieren, ohne sich entsprechende Kenntnisse anzueignen. Darüber hinaus müssen wir der Plattform einige neue Funktionen hinzufügen, damit Benutzer die erwartete automatische Codegenerierung während des Prozesses reibungsloser durchführen können.

3. Lösung

Um die drei oben genannten Probleme zu lösen, lösen wir diese Probleme aus drei Richtungen:

Zwischencode-Plug-in
Generator-Schreibvorlagen
Optimierung der D2C-Plattform

3.1 Zwischencode-Plug-in

Bei der automatischen Generierung von Code müssen wir den Generatorteil von der geschlossenen Plattform trennen und ihn der Unternehmensforschung und -entwicklung zur Selbstforschung zur Verfügung stellen. Wir verlassen uns hauptsächlich auf die UIDL-Struktur (Universal Interface Definition Language) und analysieren die Datenstruktur auf UI-Ebene, um den Zielcodeinhalt zu erhalten, den wir benötigen.

1) Einführung in UIDL

UIDL, die Universal Interface Definition Language, ist eine universelle Sprache zur Beschreibung der Benutzeroberfläche von Web-, Mobil- und Desktop-Anwendungen. Es handelt sich um eine Definitionsspezifikation für die UI-Beschreibung durch Teleport. UIDL ist eine Teilmenge von DSL (Domain Specific Language, eine Sprache, die Probleme in bestimmten Bereichen löst). Es ist plattformunabhängig und kann auf jede Plattform oder Anwendung angewendet werden.

Der Hauptzweck der Verwendung von UIDL besteht darin, die Benutzeroberfläche in einem maschinenlesbaren Format zu beschreiben, um Entwicklern dabei zu helfen, Benutzeroberflächen effizienter zu erstellen, zu testen und zu warten. Die spezifische Definition von UIDL finden Sie in der offiziellen Dokumentation . Hier ist ein einfaches Beispiel:

{
  "name": "Badge",
  "propDefinitions": {
    "count": {
      "type": "number"
    }
  },
  "node": {
    "type": "element",
    "content": {
      "elementType": "container",
      "attrs": {
        "class": "badge"
      },
      "children": [
        {
          "type": "element",
          "content": {
            "elementType": "text",
            "attrs": {
              "class": "badge-text"
            },
            "children": [
              {
                "type": "dynamic",
                "content": {
                  "referenceType": "prop",
                  "id": "count"
                }
              }
            ]
          }
        }
      ]
    }
  }

Die obige UIDL beschreibt eine Badge-Komponente, die eine Attributanzahl vom Typ „Zahl“ akzeptiert und unsere gemeinsame UI-Struktur für Badge-Komponenten ausgibt. Durch die Verwendung des von teleport bereitgestellten React-Codegenerators können wir die folgenden Ergebnisse erzielen:

import React from 'react'
import PropTypes from 'prop-types'
const Badge = (props) => {
  return (
    <div className="badge">
      <span className="badge-text">{props.count}</span>
    </div>
  )
}




Badge.propTypes = {
  count: PropTypes.number,
}
export default Badge

UIDL liefert eine allgemeine Beschreibung des UI-Schnittstellenknotens, und der Generator kann den angegebenen Framework-Code rendern, den wir benötigen.

2) Generatoranalyse

Wenn der vorhandene Generator den Anforderungen der Unternehmensforschung und -entwicklung entspricht, kann er direkt verwendet werden. Wenn dies nicht der Fall ist, kann die Unternehmensforschung und -entwicklung durch Bearbeiten der Vorlage einen neuen Generator erhalten und ihn dann über die Plattformforschung in der vorhandenen Generatorliste veröffentlichen und Entwicklungsüberprüfung, offen für alle Forschungs- und Entwicklungsabteilungen, die eine automatische Codegenerierung durchführen.

Beim Plug-in der Zwischencodeschicht verlassen wir uns hauptsächlich auf die Definitionsstruktur von UIDL und verwenden die durch Teleport definierte Generatorstruktur, um eine Codekonvertierung durchzuführen, die Mappings (UI-Komponentenzuordnung) und Plugins (Plug-in-Verarbeitungslogik) umfasst ) und Postprozessoren (Postprozessor).

- Zuordnungen: Gibt Komponentenzuordnungsbeziehungen an;
- Plugins: verarbeiten komplexe entsprechende Logik;
- Postprozessoren: Verschönern Sie das Codeformat usw.

Der Codegenerator analysiert tatsächlich den Zwischencode, und unterschiedliche Analysen führen zu unterschiedlichen Ergebnissen.

3) Generatorsteckplatz

Wir bieten einen Zugang zur Auswahl verschiedener Generatoren auf der Plattform und generieren automatisch den entsprechenden Code in Echtzeit entsprechend der Art der Sofortauswahl.

Nachdem die Forschung und Entwicklung des Unternehmens das Schreiben des neuen Generators abgeschlossen hat, wird er in einem npm-Paket veröffentlicht und der Forschung und Entwicklung der Plattform zur Überprüfung mitgeteilt. Nach erfolgreicher Überprüfung wird die entsprechende Generatorversion am Generatoreingang der Plattform angezeigt.

Andere Geschäftsentwickler können aus dieser öffentlichen Generatorliste den Generator auswählen, der zu ihren Geschäftsszenarien passt, und mit einem Klick automatisch Code generieren.

3.2 Schreiben des Vorlagengenerators

Um die Lernkosten für neue Generatorschreiber zu senken, stellen wir Codevorlagen bereit, die lokal in der Vorschau angezeigt werden können, und kapseln gängige Front-End-Framework-Generatoren und einige gängige Methoden.

1) Entwicklungsprozess

Die Unternehmensforschung und -entwicklung klont das Vorlagenlager lokal. Es gibt zwei Hauptrichtungen für das Schreiben von Vorlagen:

a. Schreiben Sie gemeinsame Komponenten unter einem bestimmten Front-End-Framework: Konvertieren Sie den visuellen DSL-Entwurf in die erforderliche UIDL-Struktur (passen Sie Ebenen, Komponentennamen usw. an) und rufen Sie dann den entsprechenden Framework-Generator auf, um Code zu generieren.

b. Schreiben Sie eine bestimmte Datenstruktur: Rufen Sie die Knotendaten im DSL ab und bauen Sie sie in eine neue Datenstruktur ein.

Zeigen Sie dann lokal eine Vorschau des Effekts an und veröffentlichen Sie ihn schließlich als unabhängiges npm-Paket. Benachrichtigen Sie die Forschungs- und Entwicklungsabteilung der Plattform, um ihn zu überprüfen und in den Slot einzufügen.

2) Lokale Entwicklung und Vorschau

Die Unternehmensforschung und -entwicklung kann die Ausgabe basierend auf den von uns bereitgestellten Vorlagen anpassen, oder Sie können zum Schreiben auf andere öffentliche Generatoren zurückgreifen.

Im Folgenden ist die bereitgestellte Vorlagenstruktur aufgeführt:

custom-generator-template
  |----package.json         // 发布的 npm 包信息
  |----README.md        
  |----src                            
  |      |----index.ts      // 编写的自定义 DSL
  |----test                 // 本地测试输入与输出
  |      |----files        // 输出的文件结构
  |      |----dsl.json     // 输入的dsl结构
  |      |----index.ts
  |----tsconfig.json       // 默认配置源文件为 ts
  |---- dist               // 输出的 dist 目录

Die Vorlage verfügt über integrierte, praktische lokale Tests der Ein- und Ausgabe: Führen Sie nach dem Bearbeiten der Datei src/index.ts den Befehl npm run test aus, um den Ausgabeinhalt im Verzeichnis test/ anzuzeigen.

Die folgende Abbildung zeigt ein Beispiel einer lokalen Vorschau, mit der DSL-Struktur links und dem vom Generator konvertierten Code rechts:

Die für lokale Tests verwendete DSL-Struktur kann schnell auf der Plattform nachgebildet werden.

3) Gemeinsame API-Kapselung

Um den Lernaufwand für Generatorschreiber zu senken, kümmern wir uns um die Vor- und Nachbestellungsschritte, die bei der tatsächlichen Verwendung optional sind:

Vorwort: Der ursprüngliche visuelle Entwurf der DSL wird in eine UIDL-Struktur umgewandelt;
Nachfolge: Rufen Sie die API auf, um den entsprechenden Framework-Code zu generieren.

Das übliche DSL-Codegenerierungsmodell lautet wie folgt:

export type GenerateCustomFiles = (dsl: DSL) => Promise<CompiledComponent>
// CompiledComponent 是定义好的输出结构，包含代码依赖和代码文件

Für DSL auf Seitenebene werden die Konzepte von Design-Token und gemeinsam genutzten Stilen eingeführt, und einige Attribute werden zum normalen DSL hinzugefügt:

export type GenerateCustomFiles = (rootDSL: RootDSL, options: GenerateCustomOptions) => Promise<CompiledComponent>;
// options 是传入的生成文件参数，当前有样式参数(CSS Module、Inline Style等)、布局参数(Pixel、Rem)等

Wenn Sie die von der Plattform entwickelte API aufrufen, können Sie ganz einfach geschäftsspezifischen Code generieren:

const generateFiles: GenerateCustomFiles = async (rootDSL, options) => {


const rootUIDL = rootDSLToRootUIDL(rootDSL, {
  layoutUnit: options.layoutUnit,
  uidlAdjust,
})  // 前序：使用uidlAdjust进行DSL转成UIDL过程中属性的修改


    // 核心逻辑：UIDL 结构修改
    // ...


  const cc = await generateReactFiles(rootUIDL, { layoutUnit: options.layoutUnit, style: options.style })
    // 后序：调用前端框架生成API


  return cc
}

In den folgenden Schritten lautet die von Ctrip Design To Code unterstützte Framework-API wie folgt:

generierenHtmlFiles
generierenVueFiles
generierenReactFiles
generierenReactNativeFiles

Durch diese Verarbeitung müssen sich Autoren nicht um den komplexen automatischen Generierungsprozess des Front-End-Frameworks kümmern und können ihre eigenen Anpassungszwecke nur durch Ändern der DSL-Strukturebene oder des Namens erreichen.

3.3 D2C-Plattformoptimierung

Um es normalen Benutzern zu ermöglichen, mit einem Klick auf der D2C-Plattform automatisch und kostenlos Codes zu generieren, haben wir einige Optimierungen an der Plattform vorgenommen. Als nächstes stellen wir drei wichtige Funktionen vor:

Knotenbezeichnung
Lokale automatische Generierung
Sandbox-Vorschaumodus

1) Knotenbezeichnung

Klicken Sie auf das Beschriftungssymbol des DSL-Knotens auf der linken Seite der Schnittstelle, um die schwebende Ebene aufzurufen, und Sie können dem aktuellen Knoten manuell einen semantischen Beschriftungsnamen hinzufügen.

Durch die manuelle Beschriftung wird dem DSL-Knoten ein neues Attribut hinzugefügt. Anhand dieses Attributs können im Generator unterschiedliche Effekte erzielt werden.

Beispielsweise wurden bei der automatischen Generierung von Testfällen für den Implementierungsplan Flybirds drei spezifische Label-Erkennungen für verschiedene Copywriting-Teile im visuellen Entwurf vorgenommen: Rendern, Existieren und Klicken, die jeweils den folgenden Ausführungsanweisungen entsprachen:

rendern: Das Element [ticket] erscheint, nachdem das Rendern der Seite abgeschlossen ist
exist: Die Kopie von [Ticket] existiert
klicken: klicken Sie auf [text=ticket]

Aus Sicht der visuellen Manuskriptinformationen sind diese Strukturen alle Textknoten, und es gibt keinen Unterschied. Durch die manuelle Markierung kann die automatische Generierung um zusätzliche Informationen ergänzt werden.

2) Lokale automatische Generierung

In der folgenden Abbildung ist die linke Seite der DSL-Knoten und die rechte Seite die visuelle Anmerkung. Durch Klicken auf den linken Knoten wird der Inhalt im visuellen Entwurf hervorgehoben. Ebenso wird durch Klicken auf den rechten Teil des visuellen Entwurfs gleichzeitig der entsprechende Knoten im linken Knoten hervorgehoben.

Gleichzeitig wird am unteren Ende der vom Generator automatisch generierte Codeinhalt der aktuell ausgewählten Teilzeichenfläche in Echtzeit angezeigt. Das Bild zeigt den React Native-Code, der nach dem Klicken auf die Schaltfläche „Nur Direktflüge anzeigen“ generiert wird.

Unter der Voraussetzung, dass der Generator den Forschungs- und Entwicklungsanforderungen des Unternehmens entspricht, können Sie auf ein Teil klicken und den folgenden Code zur Anwendung direkt in das Lager kopieren.

Wenn Sie zum ersten Mal das Zeichenbrett betreten oder auf den Wurzelknoten des DSL klicken, rendert das untere Ende den Code der gesamten Seite in Echtzeit über den ausgewählten Generator.

3) Sandbox-Vorschaumodus

Für eine realistischere Vorschau des automatisch generierten Codes bieten wir einen Sandbox-Modus. Codes wie React/Vue können direkt auf der Webseite in der Vorschau angezeigt werden. Bei React Native react-native-webkönnen wir ihn auch in Echtzeit bearbeiten und die entsprechenden Effekte anzeigen, indem wir ihn in den Webseitencode konvertieren.

Darüber hinaus bietet der Sandbox-Modus Funktionen zum Packen und Herunterladen mit einem Klick, sodass Projekte schnell bereitgestellt und freigegeben werden können.

4. Landeeffekt

Die Landeeffekte werden alle durch Flugtickets generiert und können mit einem Klick automatisch in der Plattform generiert werden. Wir zeigen die Auswirkungen benutzerdefinierter Generatoren aus drei verschiedenen Dimensionen.

4.1 Generieren Sie automatisch den angegebenen Framework-Code

1) Wirkungsdemonstration

Die Legende wird automatisch aus React Native-Code generiert.

2) Interne Umsetzung

Die Anwendung des Sprachframeworks dient als grundlegender zugrunde liegender Codeinhalt für die automatisierte Transkodierung. Auf dieser Basis können wir eine komponentenbasierte automatische Codegenerierung erhalten. Die Transkodierung des Sprachrahmens ist jedoch komplizierter als die Komponentisierung. Man kann sagen, dass die Transkodierung des Sprachrahmens eine Obermenge der Komponentisierungstranskodierung ist.

In diesem Prozess haben wir uns auf die durch den zuvor erwähnten Teleport definierte Generatorstruktur verlassen, in der Zuordnungen, Plugins und Postprozessoren angepasst werden müssen, um die erwartete Framework-Codestruktur zu erhalten. Der spezifische Inhalt, der verarbeitet werden muss, ist wie folgt:

Identifizieren Sie abstrakte DSL-Knoten : Der erste Schritt bei der Einrichtung unseres benutzerdefinierten Sprachframeworks besteht darin, das abstrakte DSL grundlegenden HTML-Knoten zuzuordnen und den elementType als den korrekten entsprechenden Komponentennamen zu identifizieren.
Komponenten zuordnen : Unterstützt die Zuordnung von React Native-Komponenten und entsprechenden Referenzpaketen und liest Ressourcendateien, um React Native-Komponenten zu generieren. Die endgültige Mapping-Vorschaudatei basiert hier auf React-Native-Web.
Prozessabhängigkeiten : Behandeln Sie Abhängigkeiten zwischen Dateien und laden Sie Komponenten, um korrekte Dateien auszugeben.
Stylesheet-Stilisierung : Der erste Schritt besteht darin, das CSS-Stylesheet in React Native StyleSheet zu konvertieren. Der zweite Schritt besteht darin, die Bildschirmanpassung durchzuführen.
Passen Sie die DSL-Struktur an : Verarbeiten Sie das Zwischen-DSL, reduzieren Sie Redundanz und korrigieren Sie Konvertierungsfehler. Nachdem der allgemeine Strukturinhalt vor und nach der Konvertierung vorliegt, müssen einige Redundanzen im Konvertierungsprozess noch weiter repariert werden, um die Codegröße zu verringern oder den Unterschied zu verringern in generierten Stilen zwischen verschiedenen Fehlermöglichkeiten am Modell.

Am Beispiel von React Native müssen wir hauptsächlich Folgendes tun:

(i). Redundanz löschen : Löschen Sie unnötige Stilknoten wie „fontFamily“, „letterSpacing“ und die Breite/Höhe von Textknoten; (ii). Code
zusammenführen : Zusammenführen von Knoten wie „paddingTop“ und „paddingBottom“ müssen in „paddingVertical“ zusammengeführt werden. (iii). Kompatible Stile : Löschen oder ändern Sie Knoten, die zu Stilkompatibilitätsproblemen für verschiedene Modelle führen können, z. B. lineHeight und fontWeight.

Verschönern Sie den Code : Der generierte Typoskript-Code muss formatiert werden.
Unterstützt die Online-Vorschau des automatisch generierten React Native-Codes : Wir benötigen Echtzeitbearbeitung und Vorschau auf der Webseite, damit react-native-webBenutzer in Echtzeit debuggen können.

4.2 Generieren Sie automatisch den angegebenen Komponentencode

1) Wirkungsdemonstration

Die Legende wird automatisch aus dem React Native Label-Komponentencode generiert.

2) Interne Umsetzung

Wir können den Zwischencode bearbeiten, um den erwarteten Funktionscode der Geschäftskomponente zu erhalten, einschließlich Animationseffekten, Interaktionslogik usw. Ziel ist es, eine Reihe von Komponenten zu generieren, die in einer Produktionsumgebung hochverfügbar und wiederverwendbar sind. Nehmen Sie die Etikettenkomponente als Beispiel, um zu demonstrieren, wie der erwartete Komponentencode generiert wird.

In diesem Prozess müssen mehrere visuelle Entwürfe realer Szenen für das Code-Rendering, die Online-Vorschau von Effekten, das Code-Debugging und das Testen der Benutzerfreundlichkeit verwendet werden. Nach mehreren Tests dieses Szenarios müssen wir zwei Konvertierungsszenarien mit unterschiedlichen Strukturen abdecken:

Etikettenverarbeitung mit Hintergrund mit Farbverlauf
Regelmäßiges Copywriting.

Der Konvertierungskerncode lautet wie folgt (ergreifen Sie die entsprechenden Knoteninformationen und bauen Sie sie in unsere erwartete Codestruktur ein:

Abhängig vom Typ des aktuellen Knotens werden unterschiedliche Verarbeitungsstufen durchgeführt. Die Vorher- und Nachher-Vorschau des ursprünglichen DSL- und Zielcodes sieht wie folgt aus:

4.3 Testfallcode automatisch generieren

1) Demonstrationseffekt

Die Legende wird automatisch aus dem Flybirds-Testfallcode generiert.

2) Interne Umsetzung

Wir verwenden die Anwendungsfallstruktur von Flybirds, Ctrips Open-Source-Cross-End- und Cross-Framework-Lösung für automatisierte BDD-UI-Tests, um den Zweck des Generators zu entwickeln.

Da die Struktur von Textknoten konsistent ist, müssen wir verschiedenen Textknoten manuell unterschiedliche Satzbedeutungen zuweisen. Hier tun wir dies, indem wir die visuelle Entwurfsebene auf der Plattform beschriften.

Bei der Implementierung werden die Textknoten in der rekursiven DSL-Struktur zur Suche und Ausgabe des Kopierinhalts verwendet. Der Konvertierungscode lautet wie folgt:

Führen Sie diesen Code aus, führen Sie ihn lokal aus npm run testund vergleichen Sie den Ausgabeinhalt davor und danach:

Als experimentelle Praxis verdeutlicht die Testfallgenerierung vollständig die Freiheit der automatischen Transkodierung – mit der ursprünglichen Informationsstruktur des visuellen Entwurfs können Sie die benötigten Datenknoten analysieren und sie an den erforderlichen Zweck anpassen.

5. Zukunftsplanung

Bei der anschließenden Entwicklungsplanung konzentrieren wir uns auf die Verbesserung der Details des Prozesses, die Verbesserung der Praktikabilität des automatischen D2C-Codeinhalts anhand unserer offiziellen Beispiele, die weitere Einführung weiterer Sprachframeworks und die Anpassung an mehr Anwendungsplattformen wie Miniprogramme usw.

Neben der Verbesserung der Details der Plattform schlagen wir hier vor allem Pläne für die Zukunft in zwei Richtungen vor:

5.1 Künstliche Intelligenz: Die Zukunft kombiniert mit Copilot

Die aktuelle D2C-Lösung hat einen offensichtlichen Nachteil: Sie kann kein komplexes logisches Feedback verarbeiten. Obwohl die von uns bereitgestellte benutzerdefinierte Generatorfunktion die generierten Komponenten stark anpassen kann, enthält der für die Entwicklung verwendete Inhalt immer noch keinen relevanten Logikcodeinhalt.

Das Aufkommen künstlicher Intelligenz kann dieses Manko ausgleichen. Derzeit verfügt die künstliche Intelligenz noch nicht über eine vollständige Funktion zum Schreiben von Code, sie kann jedoch auf der Grundlage der eingegebenen Beschreibung oder Umgebung in natürlicher Sprache die für die Entwicklung erforderlichen Codefragmente ableiten. Copilot kann Entwickler dabei unterstützen, während des Entwicklungsprozesses automatisch einige komplexe Codes zu generieren, wodurch die Belastung für Entwickler verringert und Effizienz und Qualität verbessert werden.

5.2 Umfassende Anpassung: Skin-Änderung mit einem Klick, Design-Tokens + benutzerdefiniertes DSL

Design-Tokens sind eine Sammlung grundlegender visueller und Markenattribute, die in einem Designsystem verwendet werden. Zu diesen Eigenschaften gehören Farbe, Schriftart, Abstand, Eckenradius usw. Durch Design-Markup können wir visuelle Attribute abstrahieren, um eine einheitliche Designsprache zu erreichen.

Tatsächlich unterstützt die aktuelle Plattform bereits die abstrakte Extraktion von Token und der entsprechenden Themenzuordnungstabelle. Zusätzlich zur Anpassung einiger Designelemente können wir auch verschiedene Komponenten in verschiedenen Umgebungen für eine kompatible Anzeige verwenden. In React Native können wir beispielsweise die erforderlichen interaktiven Komponenten durch Ändern der Zuordnung erhalten.

Diese tiefgreifend angepasste Lösung kann den Benutzern nicht nur ein besseres Erlebnis bieten, sondern auch die Entwicklungseffizienz erheblich verbessern.

6. Fazit

Ctrip Air Tickets öffnet den Generatoreingang im visuellen Code-Entwurfsgenerierungsprozess. Indem die Unternehmensforschung und -entwicklung an der Veröffentlichung und Aktualisierung des Generators beteiligt werden kann, werden mehr Komponenten/Datenstrukturen abstrahiert, die für Geschäftsszenarien geeignet sind.

Gleichzeitig wurden Flugtickets als Beispiele für Generatoren in drei Dimensionen implementiert, was die Machbarkeit und Praktikabilität der Lösung immer wieder bestätigte. Es verbessert nicht nur die Effizienz der Projektproduktion und die Qualität der Wiederherstellung von Entwurfsentwürfen, sondern gewährleistet auch die Konsistenz und Wartbarkeit des Codes.

Der visuelle Entwurf generiert automatisch Code, der die Effizienz des Teams erheblich verbessern, menschliche Fehler und Doppelarbeit reduzieren und so den Fokus stärker auf Kreativität und Innovation legen kann. Wir glauben, dass die zukünftige Entwicklung uns eine effizientere und bequemere Arbeitserfahrung bringen wird.

[Literatur-Empfehlungen]

Öffentliches Konto „Ctrip Technology“.

Teilen, kommunizieren, wachsen