Modulare React-Architektur

Über modulare Architektur

Was ist modulare Architektur? Lassen Sie uns ein Beispiel durchgehen, was es nicht ist, und
Wir werden daran arbeiten, es zu transformieren. Am Ende werden Sie vielleicht davon überzeugt sein
Verdienste oder dass es eine kolossale Zeitverschwendung ist.

Das ist ein reales Szenario, das ich bei der Arbeit wachstumsorientiert durchgespielt habe. Namen und Details
anonymisiert, aber ein reales Beispiel eines gemeinsamen Konzepts sollte Spaß machen
durch, wenn nichts anderes.

Anforderungen und wie man sie findet

Unsere Website verfügt über eine Schaltfläche, die sich in der Kopfzeile der Website befindet. Es zeigt an, wie viele
Der Benutzer hat V-Bucks übrig, aber es ist auch eine gewisse Geschäftslogik darin integriert:

• Wenn Sie die Website zum ersten Mal besuchen, öffnen Sie ein Popover, um sie willkommen zu heißen & zeigen, was sie mit ihren V-Bucks machen können
• Wenn sie < Noch 5 V-Bucks übrig, Popover-Upselling für mehr anzeigen
• Wenn es sich um einen Basic-Benutzer handelt, zeigen Sie einen Schaltflächenstil an; Wenn SuperDuper-Benutzer, zeigen Sie es an ein weiterer, schickerer Knopf

Und so weiter. Es gibt viele solcher Fälle bei unseren Produktmanagern und Projektmanagern
und Designmanager und Group V-Bucks-Direktoren haben sich ausgedacht, dass wir das tun müssen
Griff.

Jimbo, der Praktikant, wurde mit der Umsetzung beauftragt, weil es nur ein
ist Knopf!

Er sichtet fünfzehn widersprüchliche Versionen von Figma-Designs. Er findet
Anforderungen in so vielen separaten Word-Dokumenten, wie es PMs gibt. Er organisiert und
durchläuft sieben Wissenstransfersitzungen mit sieben Teams, um das
aufzudecken altes, proprietäres Wissen darüber, welche Dienste die von ihm benötigten Daten bereitstellen
für Benutzertyp und V-Bucks-Anzahl. Das Content-Team hat ihm versichert, dass die
Die endgültige Version aller Saiten wird bis zum Ende von der Rechts- und Marketingabteilung genehmigt
der Woche, und damit ist er bereit, diesen Button zu bauen.

Der Hacker-Ansatz

Hier ist die erste Version seines V-Bucks-Buttons, seiner Popovers und anderer relevanter Elemente
Geschäftslogik.

Jimbo ist mit der einfachen Verzeichnisstruktur, die er sich ausgedacht hat, zufrieden:

/v-bucks-button
├── button.tsx
├── index.ts
└── /v-bucks-popover
│ ├── popover.tsx

Also beginnt er mit dem Bau dieses Knopfes, und es beginnt ganz harmlos.

export const VBucksButton: React.FC<VBBProps> = ({ ... }) => {
  // Set up state
  const authConfig    = { ... }
  const { user }      = useAuth({ ...authConfig })
  const { vBucks }    = useGetVBucks({ user })
  const { telemetry } = useTelemetry()
  const { t }         = useTranslation('vBucksButton.content')
  const styles        = useButtonStyles()

  // Derive some state via business logic
  const handleClick = () => { ... }
  const buttonText  = vBucks === ERROR ? '--' : vBucks.toString();
  // About 25 more lines of various button state, error handling,
  // conditional rendering, with comments throughout explaining
  // why we're showing or hiding something or other

  const popoverProps = {
    // About 200 lines of typical popover handling,
    // telemetry, business logic, content to display, etc
  }

  const tooltipProps = {
    // Another 100 lines of the same for tooltip
  }

  return (
    <VBucksPopover
      {...popoverProps}
      trigger={
        <Tooltip {...tooltipProps}>
          <button
            ariaLabel={t('ariaLabel')}
            className={`
              about seven-hundred classnames for responsive design,
              accessibility, conditional premium styles, et cetera`}
            onClick={handleClick}>
            {buttonText}
          </button>
        </Tooltip>
      }
    />
  )
}




<p>Er hat einen ersten Versuch umgesetzt. Das VBucksPopover ist ähnlich komplex<br>
Geschäftslogik, Fehlerbehandlung, Zustandsverwaltung, Styling und Kommentarentschuldigung<br>
Tech-Schulden im Namen der Schifffahrt.</p>

<p>Mit knapp 400 Zeilen ist dieser Button trivial einfach. Auch wenn der Popover<br> ist
weitere 500 Zeilen Spaghetti. Macht es wirklich „aufräumen“ oder aufteilen<br>
Kommt es uns oder unseren Nutzern in irgendeiner Weise zugute? Es kommt darauf an. Wenn das alles ist, was wir brauchen<br>
Dieser Knopf, wen interessiert das? Lass uns weitermachen!</p>
<p>Aber zwei Monate sind vergangen und ein PM und ein Designer eines anderen Produktteams lieben<br>
Ihre Schaltfläche und möchte sie im Header ihrer App haben. Sie haben eine <em>einfache</em> Liste, nein<br>
Druck von ihrer Seite, von einigen Änderungen, die Sie gerne berücksichtigen würden, und wenn<br>
Sie könnten uns bitte bis zum Ende des Tages eine voraussichtliche Ankunftszeit für LT mitteilen, das wäre großartig, danke:</p>

<ul>
<li>Aktualisieren Sie den Stil und den Anzeigetext der Schaltfläche basierend auf der App, in der sie angezeigt wird</li>
<li>Zeigen Sie pro App einen völlig anderen Satz Popovers an</li>
<li>Öffnen Sie ein neues unternehmensweites, standardmäßiges Upsell-Modal, wenn der Benutzer keine V-Bucks mehr hat.
aber nur in einigen Regionen und nur für Benutzer ab 16 Jahren und nur, wenn sie dort sind
Experimentgruppe A</li>
</ul>

<p>Kann Jimbo all diese neuen Funktionen in denselben Komponenten unterbringen?<br><br>
Ja. Wird die Aufteilung oder Umgestaltung den Benutzern zugute kommen oder Ihre Manager beeindrucken?<br><br>
Nein. Aber Refactoring hat auf dieser Ebene der Komplexität einige starke Argumente:</p>

<ul>
<li>Vernunft der Entwickler</li>
<li>Die Vernunft des Entwicklers, der Jimbo ersetzt, wenn er wegen fehlender Umgestaltung angeklagt wird</li>
<li>Mehr Wiederholungen, damit Sie beim nächsten Mal von Anfang an besser abschneiden</li>
<li>Etwas, worüber man später bloggen kann</li>
</ul>


<h3>
  
  
  Der modulare Architekturansatz
</h3>

<p>Die Moral der Eingeweihten des Clean Code und anderer Analtypen, die genug dazu wissen<br>
Antworten Sie regelmäßig auf Stack Overflow, und sogar Ihre Großeltern schauen sich etwas an<br>
so:</p>

<ul>
<li>KISS, DRY und andere Akronymdecken</li>
<li>Belangetrennung</li>
<li>Atomizität! Entkopplung! Lautmalerei!</li>
</ul>

<p>Das ist großartig und hilft Jimbo bei seinem nächsten Versuch. Er wurde danach nicht mehr per PIP benachrichtigt<br>
Alles, und ich habe tatsächlich eine Werbeaktion für die vorzeitige Lieferung und das Teilen erhalten<br>
so viele Besprechungen und Dokumente.<br><br>
Aber jetzt ist er klüger und hat eine coole Art gelernt, diese Sprichwörter umzusetzen. Es sieht aus<br>
etwa so:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">/v-bucks-button
├── button.tsx
├── index.ts
└── /v-bucks-popover
│ ├── popover.tsx