TypeScript All-in-One: Monorepo mit seinen Schmerzen und Gewinnen
In diesem Artikel werde ich nicht Monorepo und Polyrepo vergleichen, da es sich dabei alles um Philosophie handelt. Stattdessen werde ich mich auf die Erstellung und Weiterentwicklung von Erfahrungen konzentrieren und davon ausgehen, dass Sie mit dem JS/TS-Ökosystem vertraut sind.
GaoFounder
Verschwenden Sie keine Wochen mit Benutzerauthentifizierung
Bringen Sie sichere Apps schneller mit Logto auf den Markt. Integrieren Sie Benutzerauthentifizierung in Minuten und konzentrieren Sie sich auf Ihr Kernprodukt.
Ich habe den Monorepo-Ansatz bei der Arbeit für Airbnb gesehen, aber das war nur für das Frontend. Mit einer tiefen Liebe zum JavaScript-Ökosystem und der „glücklichen“ TypeScript-Entwicklungserfahrung begann ich, Frontend- und Backend-Code in derselben Sprache von vor ~drei Jahren zu vereinheitlichen. Es war großartig (zur Einstellung), aber nicht so großartig für die Entwicklung, da unsere Projekte immer noch über mehrere Repositories verteilt waren.
Wie es heißt, „die beste Art, ein Projekt zu refaktorisieren, besteht darin, ein neues zu starten“. Also, als ich vor etwa einem Jahr mein Startup startete, beschloss ich, eine totale Monorepo-Strategie zu verwenden: Front- und Backend-Projekte, sogar Datenbankschemata, in einem Repo unterbringen.
In diesem Artikel werde ich nicht Monorepo und Polyrepo vergleichen, da es sich dabei alles um Philosophie handelt. Stattdessen werde ich mich auf die Erstellung und Weiterentwicklung von Erfahrungen konzentrieren und davon ausgehen, dass Sie mit dem JS/TS-Ökosystem vertraut sind.
Offen gesagt, ich bin ein Fan von JavaScript und TypeScript. Ich liebe die Verträglichkeit seiner Flexibilität und Strenge: Man kann auf unbekannt oder irgendwelche zurückgreifen (obwohl wir jegliche Form von irgendwelche in unserer Codebasis verboten haben), oder man kann eine super-strenge Lint-Regel ansetzen, um den Code-Stil im gesamten Team abzustimmen.
Als wir vorher über das Konzept von „Fullstack“ sprachen, stellen wir uns normalerweise mindestens zwei Ökosysteme und Programmiersprachen vor: eine für das Frontend und eine für das Backend.
Eines Tages wurde mir plötzlich klar, dass es einfacher sein könnte: Node.js ist schnell genug (glauben Sie mir, in den meisten Fällen ist die Codequalität wichtiger als die Laufgeschwindigkeit), TypeScript ist reif genug (funktioniert gut in großen Frontend-Projekten), und das Monorepo-Konzept wurde von einer Reihe bekannter Teams (React, Babel, etc.) praktiziert - also warum kombinieren wir nicht den gesamten Code, vom Frontend bis zum Backend? Das kann es Entwicklern ermöglichen, die Aufgaben ohne Kontextwechsel in einem Repo durchzuführen und ein komplettes Feature in (fast) einer Sprache zu implementieren.
Es war Juli 2021. Ich fing mit [email protected] an, da ich es schon lange benutze. Yarn war schnell, aber bald stieß ich auf einige Probleme mit Yarn Workspaces. Z.B. Abhängigkeiten nicht korrekt heben, und tonnenweise Probleme sind mit „fixed in modern“ getaggt, was mich zur v2 (berry) leitet.
„Okay, gut, ich upgrade jetzt.“ Ich hörte auf, mit v1 zu kämpfen und begann zu migrieren. Aber der lange Migrationsleitfaden von berry hat mir Angst gemacht, und ich gab nach ein paar gescheiterten Versuchen auf.
Daher begann die Recherche über Paketmanager. Ich wurde von pnpm nach einem Testlauf fasziniert: schnell wie yarn, native Monorepo-Unterstützung, ähnliche Befehle wie bei npm, Hard Links, etc. Am wichtigsten ist, dass es einfach funktioniert. Als Entwickler, der ein Produkt starten möchte, aber KEIN Paketmanager entwickelt, wollte ich nur einige Abhängigkeiten hinzufügen und das Projekt starten, ohne zu wissen, wie ein Paketmanager funktioniert oder irgendwelche anderen ausgefallenen Konzepte.
Basierend auf der gleichen Idee wählten wir einen alten Freund lerna zur Ausführung von Befehlen über die Pakete und zur Veröffentlichung von Workspace-Paketen.
Es ist schwierig, den endgültigen Umfang jedes Pakets am Anfang klar herauszufinden. Fangen Sie einfach mit Ihrem besten Versuch nach dem Status Quo an und denken Sie daran, dass Sie während der Entwicklung immer refaktorisieren können.
Da wir das JavaScript-Ökosystem annehmen und TypeScript als unsere Hauptprogrammiersprache verwenden, sind viele Entscheidungen ein Leichtes (basierend auf meiner Vorliebe 😊):
koajs für den Backend-Service (core): I hatte eine harte Erfahrung beim Verwenden von async/await in express, daher beschloss ich, etwas mit nativer Unterstützung zu verwenden.
i18next/react-i18next für i18n (phrases/ui): mag seine einfache API und gute TypeScript-Unterstützung.
An diesem Punkt habe ich zwei beliebte Ansätze ausprobiert:
Verwenden Sie ein ORM mit vielen Dekoratoren.
Verwenden Sie einen Query Builder wie Knex.js.
Aber beide erzeugten während der vorherigen Entwicklung ein merkwürdiges Gefühl:
Für ORM: Ich bin kein Fan von Dekoratoren, und eine weitere abstrakte Ebene der Datenbank verursacht mehr Lernaufwand und Unsicherheit für das Team.
Für den Query Builder: Es ist wie SQL mit einigen Einschränkungen (in gutem Sinne) zu schreiben, aber es ist kein tatsächliches SQL. Daher müssen wir .raw() für rohe Abfragen in vielen Szenarien verwenden.
Dann sah ich diesen Artikel: „Stop using Knex.js: Using SQL query builder is an anti-pattern“. Der Titel sieht aggressiv aus, aber der Inhalt ist großartig. Es erinnert mich deutlich daran, dass „SQL eine Programmiersprache ist“, und ich erkannte, dass ich direkt SQL schreiben konnte (genau wie CSS, wie konnte ich das verpassen!), um die nativesprachlichen und datenbankbezogenen Funktionen zu nutzen, anstatt eine weitere Ebene hinzuzufügen und die Leistung zu reduzieren.
Zusammengefasst entschied ich mich, bei Postgres und Slonik (ein Open-Source-Postgres-Client) zu bleiben, wie im Artikel angegeben:
... der Nutzen, den Benutzern die Auswahl zwischen verschiedenen Datenbank-Dialekten zu ermöglichen, ist marginal und der Aufwand, gleichzeitig für mehrere Datenbanken zu entwickeln, ist erheblich.
Ein weiterer Vorteil des Schreibens von SQL ist, dass wir es leicht als einzig wahre Quelle von TypeScript-Definitionen verwenden können. Ich schrieb einen Code-Generator, um SQL-Schemata in TypeScript-Code zu übersetzen, den wir in unserem Backend verwenden werden, und das Ergebnis sieht nicht schlecht aus:
Wir können sogar jsonb mit einem TypeScript-Typ verbinden und die Typvalidierung im Backend-Dienst durchführen, wenn nötig.
Die endgültige Abhängigkeitsstruktur sieht aus wie:
Vielleicht bemerken Sie, dass es ein Einweg-Diagramm ist, das uns sehr geholfen hat, eine klare Architektur und die Fähigkeit zur Expansion zu behalten, während das Projekt wächst. Außerdem ist der Code (im Grunde) alles in TypeScript.
pnpm und lerna machen einen tollen Job bei internen Workspace-Abhängigkeiten. Wir verwenden den untenstehenden Befehl im Projekt-Root, um Geschwisterpakete hinzuzufügen:
Es wird @logto/schemas als Abhängigkeit zu @logto/core hinzufügen. Während Sie die semantische Version in package.json Ihrer internen Abhängigkeiten beibehalten, kann pnpm sie auch korrekt in pnpm-lock.yaml verlinken. Das Ergebnis sieht so aus:
Wir behandeln jedes Paket in Monorepo als „unabhängig“. Daher können wir den Standardansatz für die Konfigurationsfreigabe verwenden, der tsconfig, eslintConfig, prettier, stylelint und jest-config abdeckt. Siehe dieses Projekt als Beispiel.
Ich verwende VSCode für die tägliche Entwicklung, und kurz gesagt, nichts ist anders, wenn das Projekt richtig konfiguriert ist:
ESLint und Stylelint funktionieren normal.
Wenn Sie das VSCode ESLint-Plugin verwenden, fügen Sie die folgenden VSCode-Einstellungen hinzu, damit es die pro-Paket-ESLint-Konfiguration anerkennt (ersetzen Sie den Wert von pattern durch Ihren eigenen):
husky, commitlint und lint-staged funktionieren wie erwartet.
Wir verwenden unterschiedliche Compiler für das Front- und das Backend: parceljs für UI (React) und tsc für alle anderen reinen TypeScript-Pakete. Ich kann Ihnen dringend empfehlen, parceljs auszuprobieren, wenn Sie das noch nicht getan haben. Es handelt sich dabei um einen echten „Zero-Config“-Compiler, der verschiedene Dateitypen anmutig handhabt.
Parcel hostet seinen eigenen Frontend-Entwicklungsserver, und der Produktionsausgang besteht nur aus statischen Dateien. Da wir APIs und SPA unter demselben Ursprung bereitstellen möchten, um CORS-Probleme zu vermeiden, funktioniert die folgende Strategie:
In der Entwicklungs-Umgebung verwenden Sie einen einfachen HTTP-Proxy, um den Verkehr an den Parcel-Entwicklungsserver umzuleiten.
Im Produktionsbetrieb dienen Sie direkt statische Dateien.
Sie können die Implementierung der Frontend-Middleware-Funktion hier finden.
Wir haben ein dev Skript in package.json für jedes Paket, das auf Dateiänderungen achtet und bei Bedarf neu kompiliert. Dank lerna ist es einfach, mit lerna exec Paket-Skripte parallel auszuführen. Das Root-Skript sieht so aus:
Unser Team entwickelt seit einem Jahr nach diesem Ansatz und wir sind ziemlich zufrieden damit. Besuchen Sie unser GitHub-Repo, um den neuesten Stand des Projekts zu sehen. Zum Abschluss:
Schmerzen
Muss mit dem JS/TS-Ökosystem vertraut sein
Muss den richtigen Paketmanager auswählen
Erfordert einige zusätzliche einmalige Einrichtung
Gewinne
Entwickeln und pflegen Sie das gesamte Projekt in einem Repo
Vereinfachte Kodierungsanforderungen
Gemeinsame Code-Stile, Schemas, Phrasen und Dienstprogramme
Verbesserte Kommunikationseffizienz
Keine Fragen mehr wie: Was ist die API-Definition?
Alle Ingenieure sprechen in derselben Programmiersprache
CI/CD mit Leichtigkeit
Verwenden Sie die gleiche Toolchain zum Bauen, Testen und Veröffentlichen
In diesem Artikel bleiben einige Themen unberücksichtigt: Einrichtung des Repos von Grund auf, Hinzufügen eines neuen Pakets, Nutzung von GitHub Actions für CI/CD, etc. Es wäre zu lang für diesen Artikel, wenn ich jedes davon erweitern würde. Fühlen Sie sich frei zu kommentieren und lassen Sie mich wissen, welches Thema Sie in Zukunft sehen möchten.
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'%3e%3cg data-look='classic' id='Monorepo' class='cluster'%3e%3crect height='208' width='369.40234375' y='112' x='8' style=''/%3e%3cg transform='translate(156.677734375%2c 112)' class='cluster-label'%3e%3cforeignObject height='24' width='72.046875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eMonorepo%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_database_Schemas_0' d='M279.051%2c62L279.051%2c66.167C279.051%2c70.333%2c279.051%2c78.667%2c279.051%2c87C279.051%2c95.333%2c279.051%2c103.667%2c279.051%2c111.333C279.051%2c119%2c279.051%2c126%2c279.051%2c129.5L279.051%2c133'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Phrases_Core_1' d='M84.97%2c191L81.671%2c195.167C78.372%2c199.333%2c71.774%2c207.667%2c70.63%2c215.428C69.486%2c223.19%2c73.796%2c230.379%2c75.951%2c233.974L78.106%2c237.569'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Phrases_UI_2' d='M157.766%2c191L165.701%2c195.167C173.635%2c199.333%2c189.505%2c207.667%2c204.928%2c216.342C220.35%2c225.018%2c235.325%2c234.036%2c242.812%2c238.544L250.3%2c243.053'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Schemas_Core_3' d='M229.022%2c191L221.302%2c195.167C213.581%2c199.333%2c198.14%2c207.667%2c184.072%2c215.656C170.003%2c223.646%2c157.307%2c231.291%2c150.959%2c235.114L144.611%2c238.937'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Schemas_UI_4' d='M299.392%2c191L302.531%2c195.167C305.67%2c199.333%2c311.948%2c207.667%2c313.267%2c215.406C314.585%2c223.145%2c310.944%2c230.291%2c309.123%2c233.863L307.302%2c237.436'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(279.05078125%2c 35)' id='flowchart-database-0' class='node default'%3e%3crect height='54' width='205.859375' y='-27' x='-102.9296875' style='' class='basic label-container'/%3e%3cg transform='translate(-72.9296875%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='145.859375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3ePostgres-Datenbank%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(279.05078125%2c 164)' id='flowchart-Schemas-1' class='node default'%3e%3crect height='54' width='126.703125' y='-27' x='-63.3515625' style='' class='basic label-container'/%3e%3cg transform='translate(-33.3515625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='66.703125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eSchemas%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(106.34765625%2c 164)' id='flowchart-Phrases-2' class='node default'%3e%3crect height='54' width='118.703125' y='-27' x='-59.3515625' style='' class='basic label-container'/%3e%3cg transform='translate(-29.3515625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='58.703125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3ePhrases%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(96.34765625%2c 268)' id='flowchart-Core-3' class='node default'%3e%3crect height='54' width='94.6875' y='-27' x='-47.34375' style='' class='basic label-container'/%3e%3cg transform='translate(-17.34375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='34.6875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eCore%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(291.7265625%2c 268)' id='flowchart-UI-5' class='node default'%3e%3crect height='54' width='76' y='-27' x='-38' style='' class='basic label-container'/%3e%3cg transform='translate(-8%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='16'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eUI%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)