TypeScript alles-in-één: Monorepo met zijn pijnen en winsten
In dit artikel zal ik geen vergelijking maken tussen monorepo en polyrepo, aangezien het draait om filosofie. In plaats daarvan zal ik me concentreren op de bouw- en ontwikkelervaring en ga ik ervan uit dat je bekend bent met het JS/TS-ecosysteem.
GaoFounder
Stop met weken verspillen aan gebruikersauthenticatie
Lanceer veilige apps sneller met Logto. Integreer gebruikersauthenticatie in minuten en focus op je kernproduct.
Ik zag de monorepo-aanpak terwijl ik voor Airbnb werkte, maar het was alleen voor de frontend. Met een diepe liefde voor het JavaScript-ecosysteem en de "gelukkige" TypeScript-ontwikkelingservaring, begon ik ongeveer drie jaar geleden front-end- en back-endcode op elkaar af te stemmen in dezelfde taal. Het was geweldig (voor het aannemen van personeel), maar niet zo geweldig voor de ontwikkeling, aangezien onze projecten nog steeds verspreid waren over meerdere repo's.
Zoals het gezegde luidt: "de beste manier om een project te refactoren is om een nieuw project te starten". Dus toen ik ongeveer een jaar geleden mijn startup begon, besloot ik een totale monorepo-strategie te gebruiken: frontend- en backendprojecten, zelfs databaseschema’s, in één repo plaatsen.
In dit artikel zal ik geen vergelijking maken tussen monorepo en polyrepo, aangezien het draait om filosofie. In plaats daarvan zal ik me concentreren op de bouw- en ontwikkelervaring en ga ik ervan uit dat je bekend bent met het JS/TS-ecosysteem.
Eerlijk gezegd ben ik een fan van JavaScript en TypeScript. Ik hou van de compatibiliteit van zijn flexibiliteit en strengheid: je kunt terugvallen op unknown of any (hoewel we elke vorm van any in onze codebase verboden hebben), of een superstrikte lintregelset gebruiken om de codestijl binnen het team op elkaar af te stemmen.
Toen we het eerder hadden over het concept van "fullstack", stelden we ons meestal ten minste twee ecosystemen en programmeertalen voor: één voor frontend en één voor backend.
Op een dag realiseerde ik me ineens dat het eenvoudiger kon: Node.js is snel genoeg (geloof me, meestal is codekwaliteit belangrijker dan uitvoersnelheid), TypeScript is volwassen genoeg (werkt goed in grote frontendprojecten), en het monorepo-concept is door een aantal beroemde teams in de praktijk gebracht (React, Babel, enz.) - dus waarom zouden we niet alle code samenvoegen, van frontend tot backend? Dit kan ingenieurs de taken laten uitvoeren zonder contextwisseling in één repo en een complete functie in (bijna) één taal implementeren.
Het was juli 2021. Ik begon met [email protected] omdat ik het al lange tijd gebruik. Yarn was snel, maar al snel stuitte ik op verschillende problemen met Yarn Workspaces. Bijvoorbeeld, het niet correct hosten van dependencies, en talloze problemen zijn gemarkeerd met "fixed in modern", wat mij doorverwees naar v2 (berry).
"Oke, prima, ik ben nu aan het upgraden." Ik stopte met worstelen met v1 en begon te migreren. Maar de lange migratiehandleiding van berry maakte me bang en ik gaf het op na verschillende mislukte pogingen.
Dus begon het onderzoek naar pakketbeheerders. Ik raakte gefascineerd door pnpm na een proefversie: snel als yarn, native monorepo-ondersteuning, vergelijkbare commando's als npm, harde koppelingen, enz. Het belangrijkste is dat het gewoon werkt. Als ontwikkelaar die wil beginnen met een product maar GEEN pakketbeheerder wil ontwikkelen, wilde ik gewoon enkele dependencies toevoegen en het project starten zonder te weten hoe een pakketbeheerder werkt of andere ingewikkelde concepten.
Gebaseerd op dezelfde gedachte, kozen we voor een oude vriend lerna om commando's uit te voeren over de pakketten en werkruimtepakketten te publiceren.
Het is moeilijk om in het begin de definitieve scope van elk pakket duidelijk in kaart te brengen. Begin gewoon met je beste poging volgens de huidige situatie en onthoud dat je altijd kunt refactoreren tijdens de ontwikkeling.
Aangezien we het JavaScript-ecosysteem omarmen en TypeScript gebruiken als onze belangrijkste programmeertaal, zijn veel keuzes eenvoudig (gebaseerd op mijn voorkeur 😊):
koajs voor de backend-service (core): Ik had een moeilijke ervaring met het gebruik van async/await in express, dus besloot ik iets te gebruiken met native ondersteuning.
i18next/react-i18next voor i18n (phrases/ui): ik hou van de eenvoud van de API's en de goede TypeScript-ondersteuning.
react voor SPA (ui): Gewoon persoonlijke voorkeur.
Op dat moment probeerde ik twee populaire benaderingen:
Gebruik ORM met veel decorators.
Gebruik een querybouwer zoals Knex.js.
Maar ze gaven beide een vreemd gevoel tijdens eerdere ontwikkelingen:
Voor ORM: Ik ben geen fan van decorators, en een andere abstractielaag van de database veroorzaakt meer inspanning om te leren en onzekerheid voor het team.
Voor querybuilder: Het is als het schrijven van SQL met enkele beperkingen (op een goede manier), maar het is geen echte SQL. Dus moeten we .raw() gebruiken voor rauwe queries in veel scenario's.
Toen zag ik dit artikel: "Stop using Knex.js: Using SQL query builder is an anti-pattern". De titel lijkt agressief, maar de inhoud is geweldig. Het herinnert me er sterk aan dat "SQL een programmeertaal is", en ik realiseerde me dat ik direct SQL kon schrijven (net zoals CSS, hoe kon ik dit missen!) om van de native taal- en databasefuncties gebruik te maken in plaats van een andere laag toe te voegen en de kracht te verminderen.
Kortom, ik besloot vast te houden aan Postgres en Slonik (een open-source Postgres-client), zoals het artikel vermeldt:
... het voordeel van het toestaan dat de gebruiker kan kiezen tussen verschillende databasedialecten is minimaal en de overhead van het ontwikkelen voor meerdere databases tegelijk is significant.
Een ander voordeel van het schrijven van SQL is dat we het gemakkelijk kunnen gebruiken als de enige bron van waarheid voor TypeScript-definities. Ik schreef een codegenerator om SQL-schema's naar TypeScript-code te transpilen die we in onze backend zullen gebruiken, en het resultaat ziet er niet slecht uit:
We kunnen zelfs jsonb koppelen met een TypeScript-type en indien nodig typevalidatie verwerken in de backend-service.
De uiteindelijke afhankelijkheidsstructuur ziet er als volgt uit:
Je merkt misschien op dat het een eenrichtingsdiagram is, wat ons enorm heeft geholpen om een duidelijke architectuur en de mogelijkheid om het project uit te breiden terwijl het groeit te behouden. Bovendien is de code (in principe) helemaal in TypeScript.
pnpm en lerna doen geweldig werk op het gebied van interne werkruimteafhankelijkheden. We gebruiken het onderstaande commando in de projectroot om sibling-pakketten toe te voegen:
Het zal @logto/schemas toevoegen als een afhankelijkheid aan @logto/core. Terwijl je de semantische versie in package.json van je interne afhankelijkheden behoudt, kan pnpm ze ook correct koppelen in pnpm-lock.yaml. Het resultaat zal er als volgt uitzien:
We behandelen elk pakket in de monorepo als "onafhankelijk". Hierdoor kunnen we de standaard aanpak voor configuratiedeling gebruiken, die tsconfig, eslintConfig, prettier, stylelint en jest-config dekt. Zie dit project als voorbeeld.
Ik gebruik VSCode voor dagelijkse ontwikkeling, en kort gezegd, er is niets anders als het project juist is geconfigureerd:
ESLint en Stylelint werken normaal.
Als je de VSCode ESLint-plugin gebruikt, voeg dan de VSCode-instellingen hieronder toe om het per-pakket ESLint config te eerbiedigen (vervang de waarde van pattern door die van jezelf):
husky, commitlint en lint-staged werken zoals verwacht.
We gebruiken verschillende compilers voor frontend en backend: parceljs voor UI (React) en tsc voor alle andere pure TypeScript-pakketten. Ik raad je sterk aan parceljs te proberen als je dat nog niet hebt gedaan. Het is een echte "zero-config" compiler die verschillende bestandstypen gracieus afhandelt.
Parcel host zijn eigen frontend dev server, en de productie-uitvoer zijn gewoon statische bestanden. Omdat we graag API's en SPA onder dezelfde oorsprong willen monteren om CORS-problemen te vermijden, werkt de onderstaande strategie:
In de ontwikkelomgeving gebruik je een eenvoudige HTTP-proxy om het verkeer om te leiden naar de Parcel dev server.
In productie serveer je statische bestanden direct.
Je vindt de implementatie van de frontend-middlewarefunctie hier.
We hebben een dev script in package.json voor elk pakket dat de bestandswijzigingen in de gaten houdt en opnieuw compileert wanneer nodig. Dankzij lerna wordt alles eenvoudig met lerna exec om pakket scripts parallel uit te voeren. Het rootscript ziet er als volgt uit:
Ons team ontwikkelt al een jaar volgens deze aanpak en we zijn er behoorlijk tevreden mee. Bezoek onze GitHub-repo om de nieuwste staat van het project te zien. Kort samengevat:
Pijnen
Bekendheid met het JS/TS-ecosysteem is vereist
De juiste pakketbeheerder kiezen is nodig
Vereist wat extra eenmalige opzet
Voordelen
Ontwikkel en onderhoud het hele project in één repo
Vereenvoudigde coderingsvaardigheidseisen
Gedeelde codestijlen, schema's, zinnen en hulpprogramma's
Verbeterde communicatie-efficiëntie
Geen vragen meer zoals: Wat is de API-definitie?
Alle ingenieurs spreken dezelfde programmeertaal
CI/CD met gemak
Gebruik dezelfde toolchain voor bouwen, testen en publiceren
Dit artikel laat verschillende onderwerpen onbesproken: Het repo vanaf nul instellen, een nieuw pakket toevoegen, GitHub Actions gebruiken voor CI/CD, enz. Het zou te lang worden voor dit artikel als ik ze allemaal zou uitwerken. Voel je vrij om te reageren en laat me weten welk onderwerp je in de toekomst zou willen zien.
%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='196.078125' y='-27' x='-98.0390625' style='' class='basic label-container'/%3e%3cg transform='translate(-68.0390625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='136.078125'%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 Database%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)