Seni bina Modular React

Pada seni bina modular

Apakah seni bina modular? Mari kita lihat contoh yang bukannya, dan
kami akan berusaha untuk mengubahnya. Pada akhirnya anda mungkin yakin dengan
nya merit atau itu satu pembaziran masa yang besar.

Ini adalah senario sebenar yang saya fikirkan berkembang di tempat kerja. Nama dan butiran
tanpa nama, tetapi contoh dunia sebenar bagi konsep biasa sepatutnya menyeronokkan untuk berjalan
melalui, jika tiada yang lain.

Keperluan, dan cara mencarinya

Tapak kami mempunyai butang yang tinggal dalam pengepala tapak. Ia memaparkan bilangan
V-Bucks pengguna telah meninggalkannya, tetapi juga mempunyai beberapa logik perniagaan yang dimasukkan ke dalamnya:

• Jika ini kali pertama mereka melawat tapak, buka popover untuk mengalu-alukan mereka & tunjukkan sesuatu yang boleh mereka lakukan dengan V-Bucks
mereka
• Jika mereka mempunyai < 5 V-Bucks yang tinggal, tunjukkan popover yang meningkatkan jualan lebih
• Jika mereka adalah pengguna Asas, tunjukkan satu gaya butang; jika pengguna SuperDuper, tunjukkan butang lain yang lebih menarik

Dan seterusnya. Terdapat banyak kes sedemikian, pengurus produk dan pengurus projek kami
dan pengurus reka bentuk dan Pengarah Kumpulan V-Bucks telah mengimpikan bahawa kami perlu
pegang.

Jimbo pelatih telah ditugaskan untuk melaksanakan ini kerana ia hanya
butang!

Dia meneliti lima belas lelaran bercanggah reka bentuk Figma. Dia dapati
keperluan dalam seberapa banyak dokumen Word yang berasingan kerana terdapat PM. Dia mengatur dan
menjalani tujuh sesi pemindahan pengetahuan dengan tujuh pasukan untuk mendedahkan
pengetahuan purba, proprietari tentang perkhidmatan yang akan menyediakan data yang dia perlukan
untuk jenis pengguna dan kiraan V-Bucks. Pasukan kandungan telah meyakinkannya bahawa
versi akhir semua rentetan akan diluluskan oleh undang-undang dan pemasaran pada akhir
minggu ini, dan dengan itu, dia bersedia untuk membina butang ini.

Pendekatan penggodam

Berikut ialah lelaran pertama butang V-Bucks, popover dan berkaitan
logik perniagaan.

Jimbo berpuas hati dengan struktur direktori ringkas yang dia hasilkan:

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

Jadi dia mula membina butang ini, dan butang itu bermula dengan tidak bersalah.

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>Dia telah melaksanakan langkah pertama padanya. VBucksPopover mempunyai kompleks<br> yang serupa
logik perniagaan, pengendalian ralat, pengurusan negeri, penggayaan dan komen yang memberi alasan<br>
hutang teknologi atas nama penghantaran.</p>

<p>Di bawah 400 baris sahaja, butang ini sangat mudah. Walaupun popover adalah<br>
lagi 500 baris spageti. Adakah benar-benar "membersihkannya" atau membelahnya<br>
memberi manfaat kepada kami, atau pengguna kami, dalam apa cara sekalipun? Ia bergantung. Jika ini sahaja yang kita perlukan untuk<br>
butang ini, siapa peduli. Jom teruskan!</p>
<p>Tetapi dua bulan telah berlalu dan seorang PM dan pereka dari pasukan produk lain menyukai<br>
butang anda dan mahukannya dalam pengepala apl mereka. Mereka mempunyai senarai <em>mudah</em>, tidak<br>
tekanan daripada penghujung mereka, beberapa perubahan yang mereka mahu anda terima dan jika<br>
anda boleh tolong berikan ETA pada penghujung hari untuk LT yang bagus, terima kasih:</p>

<ul>
<li>Kemas kini gaya butang dan teks paparan berdasarkan apl yang ditunjukkan dalam</li>
<li>Tunjukkan set popover yang berbeza sama sekali, setiap apl</li>
<li>Buka mod upsell standard di seluruh syarikat baharu apabila pengguna kehabisan V-Bucks,
tetapi hanya di beberapa wilayah, dan hanya kepada pengguna berumur 16 tahun, dan hanya jika mereka berada di dalamnya
kumpulan percubaan A</li>
</ul>

<p>Bolehkah Jimbo memasukkan semua fungsi baharu ini ke dalam komponen yang sama?<br><br>
ya. Adakah pemisahan atau pemfaktoran semula memberi manfaat kepada pengguna atau menarik perhatian pengurus anda?<br><br>
Tidak. Tetapi pemfaktoran semula mempunyai beberapa hujah yang kukuh pada tahap kerumitan ini:</p>

<ul>
<li>Kewarasan dev</li>
<li>Kewarasan dev yang menggantikan Jimbo apabila dia PIP kerana tidak memfaktorkan semula</li>
<li>Lebih banyak wakil, jadi anda melakukan yang lebih baik dari mula pada kali seterusnya</li>
<li>Sesuatu untuk diblog nanti</li>
</ul>


<h3>
  
  
  Pendekatan seni bina modular
</h3>

<p>Akhlak Kod Bersih bermula, dan jenis dubur lain yang cukup tahu untuk<br>
jawab pada Stack Overflow dengan kerap, malah datuk dan nenek anda, lihat sesuatu<br>
seperti ini:</p>

<ul>
<li>KISS, KERING & selimut akronim lain</li>
<li>Pengasingan kebimbangan</li>
<li>Atomicity! Menyahganding! Onomatopoeia!</li>
</ul>

<p>Ini bagus, dan membantu memaklumkan percubaan Jimbo yang seterusnya. Dia tidak mendapat PIP selepas<br>
semua, dan sebenarnya mendapat promo untuk penghantaran lebih awal daripada jadual dan untuk perkongsian<br>
begitu banyak mesyuarat dan dokumen.<br><br>
Tetapi dia lebih bijak sekarang dan belajar cara yang bagus untuk melaksanakan pepatah itu. Nampaknya<br>
sesuatu seperti ini:<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