1. Hintergrundeinführung
Die Webmaster-Workbench ist bestrebt, eine effiziente Arbeitsplattform für alle Webmaster und Betriebsleiter von JD Logistics mit vielfältigen Geschäftsformen bereitzustellen. Wir sind bestrebt , die F&E-Effizienz des Teams zu verbessern und eine agile Geschäftsabwicklung zu erreichen , um ein agiles Team mit Flexibilität, hoher Zusammenarbeit und starker Anpassungsfähigkeit zu schaffen.
2. Beschreibung von Fällen zur Effizienzsteigerung
2.1. Schmerzpunktanalyse
Die meisten Berichtsseiten und Aufgabenkartenseiten der Webmaster-Workbench weisen denselben UI-Stil und dieselben Interaktionsmethoden auf. Angesichts neuer Geschäftsanforderungen ist es für Entwickler schwierig, Doppelarbeit zu vermeiden, was zu einer verringerten Teamentwicklungseffizienz und Schwierigkeiten bei der Steuerung führt Codequalität und Projektprobleme. Wartungsschwierigkeiten und viele andere Probleme.
2.2. Lösung
Basierend auf dem Geschäftsszenario wird eine Low-Code-Toolkette aufgebaut, die Code-Editor, Versionsverwaltung, Parser, Fähigkeitskoordinierung usw. umfasst und visuelle Entwicklungsfunktionen, voreingestellte Komponenten, integrierte Bereitstellung und andere Funktionen bereitstellt. Mithilfe grafischer Schnittstellen und Komponenten können Entwickler den Anwendungsentwicklungsprozess beschleunigen, schnell auf Geschäftsanforderungen reagieren und zeitnah liefern.
3. Schritte zur Fallpraxis
3.1. Wichtige Design- und Übungsmethoden
Die Low-Code-Toolkette basiert auf formulargesteuerten Daten und führt Geschäftsanalysen über eine schnittstellenbasierte, kostengünstige Interaktionsmethode und eine kleine Menge Klebercode durch, um Entwicklungsanforderungen zu erfüllen und eine effiziente, flexible und wartbare Nachfrageentwicklungserfahrung bereitzustellen . Seine Hauptarchitektur besteht aus angepasstem DSL, Seiteneditor, Komponentenbibliothek, Attributverwaltung, Renderer, Bereitstellung und Freigabe, Materialverwaltung und anderen Modulen.
Die Hauptaufgaben jedes Moduls sind wie folgt:
1. DSL : Als Kern der Low-Code-Toolkette umfasst DSL Komponentenbeschreibungsprotokolle, Seitenbeschreibungsprotokolle, Feldlogikprotokolle usw. mit dem Ziel, die Toolkette einzuschränken und zu erweitern. Beim Erweitern von Materialien müssen die entsprechenden DSL-Spezifikationen befolgt werden. In der Vorschau- und Veröffentlichungsphase wird JSON über DSL generiert. Gleichzeitig sind Editor und Parser für die Kommunikation ebenfalls auf DSL angewiesen.
2. Seiteneditor : Der Seiteneditor enthält eine Fülle atomarer Komponenten. Wählen Sie Komponenten oder Seitenvorlagen mithilfe visueller Methoden aus und ordnen Sie die Seiten auf dem Zeichenbrett an. Nach dem Zusammenbau wird der Seiteneditor basierend auf den DOM-Elementen, -Stilen usw. generiert. Methoden und andere auf der Seite enthaltene Informationen. DSL im JSON-Format.
3. Attributverwaltung : Die Attributverwaltung bietet drei Grundeinstellungen: Stile, Datenbindung sowie Auslöser und Ereignisse. Die Stilfunktion wird verwendet, um das Erscheinungsbild und Verhalten der Seite oder Komponente festzulegen; die Datenbindungsfunktion kann Seitenelemente an Felder im Datenmodell binden, um die Anzeige und den Betrieb von Daten zu realisieren; Trigger- und Ereigniseinstellungen können an bestimmte Methoden gebunden werden unter Auflagen ausgeführt.
4. Renderer : Der Toolketteneditor und der Renderer folgen der Idee der datengesteuerten Ansicht und analysieren die gespeicherte JSON-Datei rekursiv, um Seiten gemäß dem DSL-Protokoll dynamisch zu generieren. Bei der Bearbeitung der Seite können aktuelle Betriebseffekte in Echtzeit simuliert werden, wodurch die Konfiguration zeitnah angepasst werden kann, um das Niveau zu erreichen, das den Geschäftsanforderungen am besten entspricht.
5. Bereitstellung und Freigabe : Bei der Bereitstellung und Freigabe wird die endgültig generierte DSL im OSS gespeichert und die URL-Adresse der neuen Seite generiert. Die DSL kann entsprechend der Adresse der neuen Seite abgerufen, vom Parser analysiert und bereitgestellt werden Der Benutzer kann Seitenelemente bei Bedarf laden.
6. Materialverwaltung : Die Toolkette bietet Materialverwaltungsfunktionen für die Verwaltung verschiedener Ressourcen und Komponenten, die bei der Anwendungsentwicklung verwendet werden, sodass Entwickler verschiedene Versionen von Komponenten und Anwendungen verfolgen und verwalten können, um Konsistenz und Konsistenz während der Teamzusammenarbeit sicherzustellen. Rückverfolgbarkeit. Es bietet außerdem wiederverwendbare Formulare und Vorlagen, sodass Entwickler schnell Schnittstellen für die Dateneingabe und Berichtsanzeige erstellen können.
Das übergeordnete Ziel der Low-Code-Toolkette ist die Verbesserung der Effizienz, daher haben wir beim Lösungsdesign auch besonderes Augenmerk auf die Benutzerfreundlichkeit und Skalierbarkeit der Tools gelegt. Gleichzeitig haben wir auch dafür gesorgt, dass die Einführung der Die ursprüngliche hohe Leistung der Werkbank wird durch die Werkzeugkette nicht beeinträchtigt. Verfügbarkeit.
3.1.1. Kernfunktionen
Die Kernfunktionalität der Low-Code-Toolkette besteht aus einer Reihe von Schlüsselkomponenten, die für die Handhabung aller Aspekte des Anwendungsdesigns, der Entwicklung, Bereitstellung und des Betriebs verantwortlich sind, einschließlich Kommunikationsprotokollen, visuellen Editoren, Datenmodellen, Geschäftslogik, Renderern, Bereitstellung, Versionskontrolle und andere Funktionen. Im Folgenden finden Sie nur eine kurze Einführung in die wichtigsten Module:
1. Seitenbeschreibungsprotokoll DSL-Design
Wir haben JSON als Seitenbeschreibungsprotokoll anstelle von XML gewählt, das über stärkere Beschreibungsfähigkeiten zu verfügen scheint, hauptsächlich weil die Verwendung von JSON als Seitenbeschreibungsprotokoll nicht nur zur Verbesserung der Lesbarkeit, Flexibilität und Skalierbarkeit beiträgt, sondern auch die natürliche Integration von JSON mit JavaScript und Kompatibilität mit RESTful-APIs. Dies bietet Entwicklern eine intuitivere, bequemere und plattformübergreifende Entwicklungserfahrung. Der JSON-Baum der Seiten-UI-Komponenten kann als SchemaNodeTree betrachtet werden, und jede SchemaNode-Struktur behandelt Komponenteneigenschaften und -ereignisse separat.
1. Visueller Editor
Von Komponentenbibliotheken, Informationssätzen, Funktionen bis hin zur Benutzeroberfläche bietet es einen benutzerfreundlichen visuellen Editor, der keine Codierung erfordert und alle Konfigurationen für den UI-Betrieb integriert. Entwickler müssen nur kurz die relevanten Konzepte beherrschen und durch einfache Vorgänge schnell Seiten erstellen. Die spezifischen Funktionen sind wie folgt:
• Komponentenbibliothek : Enthält einen umfangreichen Satz voreingestellter Komponenten: z. B. Schaltflächen, Tabellen, Formulare, Visitenkarten usw. Benutzer können geeignete Komponenten aus der Komponentenbibliothek auswählen, um Seiten zu erstellen.
• Echtzeitvorschau : Mit dieser Funktion können Sie das Design schnell anpassen und optimieren, um den Effekt zu erzielen, den Sie sehen.
• Layout-Tools : Unterstützt Layout-Tools, mit denen Entwickler die Struktur und Anordnung von Seiten konfigurieren können, z. B. das Rasterlayout.
• Dynamische Datenbindung : Ermöglicht Entwicklern die Bindung von Benutzeroberflächenelementen an Felder im Datenmodell durch einfache Konfiguration, um eine dynamische Datenanzeige zu erreichen.
• Ereignisauslöser : Durch das Binden von Ereignissen können Entwickler Aktionen definieren, die ausgeführt werden sollen, wenn Benutzerinteraktionen oder Browserereignisse auftreten. Zum Beispiel Klick, Seiteninitialisierung, Formularübermittlung, Seitenwechsel und andere Ereignisse.
• Versionsverwaltung : Erfassen und verwalten Sie historische Versionen von Entwürfen, sodass Entwickler zu früheren Entwurfsständen zurückkehren können und so Änderungen nachverfolgt und wiederhergestellt werden können.
Unter den Einschränkungen von DSL werden wir zunächst eine Zuordnungstabelle für die Komponentenkonstruktion erstellen, die speziell zum Speichern von Komponentennamen und ihren entsprechenden Konstruktionsmethoden verwendet wird. Zweitens haben wir eine Konstruktions-Engine implementiert. Die Kernfunktion besteht darin, den aus DSL konvertierten ComponentNode zu lesen und dann mithilfe der rekursiven Tiefendurchquerung kontinuierlich den ComponentNode und seine Unterknoten zu lesen, um die Konstruktionsmethode der entsprechenden Komponente zu erhalten, und diese dann zu konvertieren ComponentNode Als VueNode erstellt. Um die Duplizierung von Funktionscodes zu reduzieren und zukünftige Erweiterungen zu erleichtern, haben wir schließlich ein Aspektdesignschema eingeführt, um einige Verknüpfungen im Verarbeitungsprozess in Aspekte zu integrieren, um das Ziel einer flexiblen Verarbeitung zu erreichen und eine maßgeschneiderte Entwicklung durch externe Aufrufer zu erleichtern.
1. Daten-Engine
Die Daten-Engine erstellt ein Metadatenmodell, ermöglicht Geschäftsorchestrierungsfunktionen und verwendet abstrakte Prozessknoten, um benutzerdefinierte Aufgaben, Triggerregeln und Closed-Loop-Regeln zu implementieren. Das Forschungs- und Entwicklungsteam erweitert kontinuierlich Mikroprozessknoten, um den Anforderungen verschiedener Geschäftsszenarien gerecht zu werden.
1. Renderer-Design
Der Renderer in der Low-Code-Toolkette ist eine Schlüsselkomponente, die für die Konvertierung der im visuellen Editor definierten Komponenten, Layout- und Stilinformationen in tatsächliche UI-Elemente verantwortlich ist; die von ihm bereitgestellte Echtzeit-Rendering-Funktion ermöglicht es Entwicklern, die besten Ergebnisse zu erzielen der Editor Sofortiges Feedback; dynamische Datenbindung stellt sicher, dass gerenderte UI-Elemente synchron mit dem Datenmodell der Anwendung aktualisiert werden können.
Auf der untersten Ebene haben wir einen Komponentenpool implementiert, der global von einem einheitlichen ComponentManager verwaltet wird. Darüber befindet sich die Erweiterungsschicht, die der Implementierung jeder Komponente entspricht. Beispielsweise sind Parser dafür verantwortlich, SchemaNode in entsprechende Komponenten zu analysieren und den Komponenten personalisierte Funktionen zu geben; Validatoren implementieren die Verifizierungslogik; Aktionen sind für die Verarbeitung von Ereignissen verantwortlich und wir kapseln Funktionen wie das Abrufen von Parametern, das Aufrufen von Schnittstellen und Dateneinstellungen. Die oberste Ebene stellt eine externe Schnittstelle bereit und ist für die Darstellung der Rendering-Ergebnisse der gesamten Engine verantwortlich.
3.1.2. Notfallwiederherstellungsplan
Bei Nicht-Low-Code-Modulen wird die Front-End-Seite vom Browser mit Code-Ressourcen für das Rendering und die Frame-Konstruktion geladen, und die Daten werden durch asynchronen Aufruf verschiedener Remote-Schnittstellen geladen. In diesem Fall müssen wir uns nur auf die Codequalität konzentrieren, um sicherzustellen, dass die Seitenstruktur auch dann normal gerendert werden kann, wenn keine Daten angefordert werden. Aus Sicht des Benutzers ist das System immer verfügbar, ohne Störungen wie weiße Bildschirme.
Nachdem die Toolkette zum Generieren einer Front-End-Seite verwendet wurde, wird die Seitenkörperbeschreibungslogik vom Browser übertragen, um Coderessourcen in das Remote-Speicher-OSS zu laden. Zu diesem Zweck haben wir uns auf das Szenario des OSS-Ausfalls konzentriert. Die allgemeine Verarbeitungslogik ist wie folgt:
Während des Seitenerstellungs- und Veröffentlichungsprozesses schreiben wir Daten doppelt in OSS, um zwei verschiedene Dateiadressen A und B zu generieren. Bei der Verwendung von OSS geben wir der Adresse A Vorrang. Wenn A ausfällt, wechselt das System zu Adresse B und verwendet weiterhin B, wobei zwischen doppelten Schreibadressen gewechselt wird. Solange A und B nicht gleichzeitig ausfallen, kann die Verfügbarkeit des Gesamtsystems gut gewährleistet werden.
3.1.3. Zugriffsmethode
Docking-Engineering-Funktionen: Einführung von Abhängigkeiten. Es können nur vier Codezeilen verwendet werden, um Abhängigkeitsdateien in der Webmaster-Workbench einzuführen
import pageBuilder from '@xxx/page-builder'
import '@xxxx/page-builder/page-builder/page-builder.css'
Vue.use(pageBuilder, { registerComponents: { AreaCondition: NewAreaCondition } });
<page-builder :url="'http://test.xxxxx.com/name/jsonName.json'"></page-builder>
3.2. Anzeige der Plattformnutzung
(Nach der Desensibilisierung wird die interne Systemseite vorübergehend nicht angezeigt, es wird nur der Vorgang erklärt.)
3.2.1. Seitenerstellung
Ordnen Sie die Seiteninfrastruktur an -> Konfigurieren Sie die Seitengrundlagen -> Definition von Seitenelementereignissen -> Seitenelementbindungsereignis
3.2.2. Seitenveröffentlichung
Sehen Sie sich die erstellte Seite in der Vorschau an und bestätigen Sie, dass der Effekt wie erwartet ist -> Veröffentlichen Sie die Seite mit einem Klick und rufen Sie die URL-Adresse ab, um auf die Seite zuzugreifen
3.2.3. Veröffentlichung der Task-Engine
Erstellen Sie eine Aufgabe -> Aufgabenauslöseregeln und Closed-Loop-Regeln konfigurieren -> Aufgaben generieren
3.3. Höhepunkte der Praxis
4. Verbessern Sie die Effizienz und erzielen Sie Ergebnisse
4.1. Leistungsverbesserung
Die Toolkette wurde im Juli 2023 in Betrieb genommen. Seit ihrer Inbetriebnahme wurde der Nachfragebereitstellungszyklus der Abteilung deutlich verbessert. Von Mai bis September wurde der Bedarfslieferindikator für den gesamten Zyklus von 21,06 Tagen auf 14,71 Tage verkürzt. Gleichzeitig ist auch der Nachfragedurchsatz deutlich gestiegen. Ohne Sonderänderungen während der 618-Blockadeperiode stieg der durchschnittliche monatliche Durchsatz von 245 auf 275.
4.2. Verbesserung der menschlichen Leistungsfähigkeit
Im dritten Quartal nutzten wir die Front-End-Low-Code-Tools der Webmaster-Workbench, um die Entwicklung von 7 Berichtsanforderungen und 5 Aufgabenkartenanforderungen effizient abzuschließen. Die Entwicklungszeit von Berichten und Karten wurde von 2 Tagen auf 4 Stunden verkürzt und der Bereitstellungszyklus neuer To-Do-Aufgabentypen auf der Workbench wurde deutlich von 7 Tagen auf 2,5 Tage verkürzt.
Gleichzeitig wurde durch den Einsatz der Backend-Daten-Engine die Entwicklung von 11 Geschäftsanforderungen effizient abgeschlossen. Im Durchschnitt kann jede Anforderung bis zu 0,5–3 Personen/Tag an Entwicklungszeit einsparen, wodurch die F&E-Effizienz weiter verbessert wird, um einen höheren Nachfragedurchsatz zu erreichen Agile Geschäftsabwicklung. Nachfrageerwartungen.
4.3. Einfluss
4.3.1. Werbewirkung nutzen
Nachdem die Toolkette in Betrieb genommen wurde, wird sie auf der Logistikseite geteilt. Sie wurde von drei agilen Teams genutzt und nachfolgende Werbemaßnahmen sind in Vorbereitung. Bisher wurden 23 Anträge angenommen.
4.3.2. Technologieaustausch und -förderung
1. Im Monatsbericht von JD Logistics Technology enthalten
2. Teilen Sie hochwertige Kurse im Logistik-Frontend-Kanal
5. Zusammenfassung und Folgeplanung
Die Low-Code-Toolkette verwendet „Low Code -> Mapping and Modeling -> Visual Construction System of Specific Domain Scenarios“ als Kernglied, um den Entwicklungsprozess kontinuierlich zu standardisieren, die allgemeine F&E-Effizienz für das Team zu verbessern und eine schnelle Lieferung zu erreichen Geschäftliche Bedürfnisse. Heben Sie die agilen Lieferfähigkeiten des Teams auf ein völlig neues Niveau.
Folgepläne:
technische Fähigkeiten
•Front-End-Low-Code und Back-End-Low-Code sorgen für eine nahtlose Verbindung, um die Effizienz der Seitenentwicklung weiter zu verbessern
•Erzielen Sie eine elegante Verbindung zwischen Komponenten, eröffnen Sie Konnektivität mit anderen Plattformen und realisieren Sie schnell den Aufbau komplexer Seiten
•Schaffen Sie ein Komponenten-Ökosystem und unterstützen Sie externe Forschung und Entwicklung für die Komponentenerweiterung
Teamleistung
•Lernen Sie von der Low-Code-Generierung allgemeiner Berichtsseiten und Aufgabenkartenseiten. In eine universelle Code-Generierungsplattform umgewandelt, um alle Front-End-F&E-Mitarbeiter im Logistikbereich zu bedienen
•Ändern Sie das Modell der Zusammenarbeit zwischen Industrie und Forschung von Bedarfslieferung zu kontinuierlicher Erstellung
•Verbessern Sie die Fähigkeiten des Teams zur Nachfragebereitstellung, erreichen Sie neue Höhen und geben Sie der Geschäftsentwicklung neue Energie
Autor: JD Logistics Guo Changsha
Quelle: JD Cloud Developer Community Ziyuanqishuo Tech Bitte geben Sie beim Nachdruck die Quelle an
Bilibili stürzte zweimal ab, Tencents „3.29“-Unfall erster Stufe … Bestandsaufnahme der zehn häufigsten Ausfallunfälle im Jahr 2023 Vue 3.4 „Slam Dunk“ veröffentlichte MySQL 5.7, Moqu, Li Tiaotiao … Bestandsaufnahme des „Stopps“ im Jahr 2023 Mehr ” (Open-Source-)Projekte und Websites blicken auf die IDE von vor 30 Jahren zurück: nur TUI, helle Hintergrundfarbe... Vim 9.1 wird veröffentlicht, gewidmet Bram Moolenaar, dem Vater von Redis, „Rapid Review“ LLM Programming: Omniscient und Omnipotent&& Stupid „Post-Open Source“ Die Ära ist gekommen: Die Lizenz ist abgelaufen und kann nicht mehr für die breite Öffentlichkeit bereitgestellt werden. China Unicom Broadband begrenzte plötzlich die Upload-Geschwindigkeit und eine große Anzahl von Benutzern beschwerte sich. Windows-Führungskräfte versprachen Verbesserungen: Machen Sie den Anfang Speisekarte wieder super. Niklaus Wirth, der Vater von Pascal, ist verstorben.