Architecture React modulaire

Sur l'architecture modulaire

Qu'est-ce que l'architecture modulaire ? Passons en revue un exemple de ce que ce n'est pas, et
nous travaillerons à sa transformation. À la fin, vous en serez peut-être convaincu
mérite ou que c'est une perte de temps colossale.

Il s'agit d'un véritable scénario que j'ai vécu avec un esprit de croissance au travail. Noms et détails
anonymisé, mais un exemple concret d'un concept commun devrait être amusant à marcher
à travers, au moins.

Exigences et comment les trouver

Notre site dispose d'un bouton qui se trouve dans l'en-tête du site. Il affiche combien
V-Bucks que l'utilisateur a laissés, mais qui contiennent également une certaine logique métier :

• S'il s'agit de la première fois qu'il visite le site, ouvrez une popover pour lui souhaiter la bienvenue. & montrez quelque chose qu'ils peuvent faire avec leurs V-Bucks
• S'ils ont < 5 V-Bucks restants, affichez une popover de vente incitative supplémentaire
• S'il s'agit d'un utilisateur basique, affichez un style de bouton ; si utilisateur de SuperDuper, afficher un autre bouton plus chic

Et ainsi de suite. Il existe de nombreux cas de ce type nos chefs de produits et chefs de projet
et les responsables de la conception et les directeurs du groupe V-Bucks ont imaginé que nous devions
poignée.

Jimbo, le stagiaire, a été chargé de mettre en œuvre cela car c'est juste un
bouton !

Il passe au crible quinze itérations contradictoires de conceptions Figma. Il trouve
exigences dans autant de documents Word distincts qu’il y a de MP. Il organise et
endure sept séances de transfert de connaissances avec sept équipes pour découvrir le
connaissance ancienne et exclusive des services qui lui fourniront les données dont il a besoin
pour le type d’utilisateur et le nombre de V-Bucks. L'équipe de contenu l'a rassuré sur le fait que le
la version finale de toutes les chaînes sera approuvée par les services juridiques et marketing d'ici la fin
de la semaine, et avec ça, il est prêt à construire ce bouton.

L'approche du hacker

Voici la première itération de son bouton V-Bucks, ses popovers et pertinents
logique métier.

Jimbo est satisfait de la structure de répertoires simple qu'il a proposée :

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

Alors il commence à construire ce bouton, et cela commence assez innocemment.

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>Il a mis en œuvre un premier essai. Le VBucksPopover a un complexe similaire<br>
logique métier, gestion des erreurs, gestion de l'état, style et commentaires d'excuse<br>
dette technologique au nom de l'expédition.</p>

<p>Avec un peu moins de 400 lignes, ce bouton est d'une simplicité triviale. Même si le popover est<br>
encore 500 lignes de spaghetti. Est-ce que le "nettoyer" ou le diviser vraiment<br>
profite-t-il à nous, ou à nos utilisateurs, de quelque manière que ce soit ? Ça dépend. Si c'est tout ce dont nous avons besoin<br>
ce bouton, peu importe. Passons à autre chose !</p>
<p>Mais deux mois se sont écoulés et un PM et un designer d'une autre équipe produit adorent<br>
votre bouton et le souhaitez dans l'en-tête de leur application. Ils ont une liste <em>simple</em>, non<br>
la pression de leur côté, de certains changements qu'ils aimeraient que vous acceptiez et si<br>
vous pourriez s'il vous plaît donner une ETA d'ici la fin de la journée pour LT, ce serait génial, merci :</p>

<ul>
<li>Mettez à jour le style du bouton et affichez le texte en fonction de l'application dans laquelle il est affiché</li>
<li>Afficher un ensemble de popovers complètement différent, par application</li>
<li>Ouvrez un nouveau modal de vente incitative standard à l'échelle de l'entreprise lorsque l'utilisateur n'a plus de V-Bucks,
mais uniquement dans certaines régions et uniquement pour les utilisateurs âgés de 16 ans et uniquement s'ils se trouvent dans
groupe d'expérimentation A</li>
</ul>

<p>Jimbo peut-il regrouper toutes ces nouvelles fonctionnalités dans les mêmes composants ?<br><br>
Oui. Le fractionnement ou le refactoring profiteront-ils aux utilisateurs ou impressionneront-ils vos managers ?<br><br>
Non, mais le refactoring a de solides arguments à ce niveau de complexité :</p>

<ul>
<li>Santé mentale des développeurs</li>
<li>La santé mentale du développeur qui remplace Jimbo lorsqu'il est accusé de ne pas avoir refactorisé</li>
<li>Plus de répétitions, pour faire mieux dès le début la prochaine fois</li>
<li>Quelque chose sur lequel bloguer plus tard</li>
</ul>


<h3>
  
  
  L’approche de l’architecture modulaire
</h3>

<p>La morale des initiés du Clean Code et des autres types anaux qui en savent assez pour<br>
répondez régulièrement sur Stack Overflow, et même vos grands-parents, regardez quelque chose<br>
comme ça :</p>

<ul>
<li>KISS, DRY et autres couvertures avec acronymes</li>
<li>Séparation des préoccupations</li>
<li>Atomicité ! Découplage ! Onomatopée !</li>
</ul>

<p>Ceux-ci sont géniaux et aident à éclairer la prochaine tentative de Jimbo. Il n'a pas reçu de PIP après<br>
tout cela, et j'ai en fait reçu une promotion pour avoir livré plus tôt que prévu et pour avoir partagé<br>
tant de rencontres et de documents.<br><br>
Mais il est plus sage maintenant et a appris une façon sympa de mettre en œuvre ces adages. On dirait<br>
quelque chose comme ça :<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

Copier après la connexion

Copier après la connexion