Проектаванне компонентаў фронтэнду на аднойчыні з адпаведнасцю, а не для паўтарнага выкарыстоўвання
З’явіцеся, чаму арганізацыя компонентаў фронтэнду па чыстай прыналежнасці та адпаведальнасці — а не за прынцыпам максимальнага перадзяйснення коду — спрыяе лёгкам ізоляванню та падтрымцы змян у функцыях.
Фронтэнд стаець прыемней для адтрымання, калі межы компанентаў практыкуецца адпаведна да чыстаўых абавязакоў, а не адпаведна да таго, сколькі коду тэорычна можна быць выкарыстоўваць разам.
Проблема з нашым фронтэндам ніколі не была ў тым, што адзеленыя компаненты сталі занадта великімі. Большасць з іх была справды компактная.
У нас была моцная бібліятэка з можна выкарыстоўваць па-новым кнапкамі, карткамі, модаламі, элементамі таблы, кантроламі формы, хукамі, дапаможнікамі API, спяльнымі схемамі і аднароднай структурой папак. Адразу было видна, што ў репазітарые все добра арганізавана. Повторны выкарыстоўвання было многа, явная дуплікацыя — рэдка, а ранг абстракцыі надаваў кодбазе вялікай зрэласці.
Спраблема выяўлялася тады, калі патрабавалася змяніць якую-небудзь функцыю.
Нават незначныя трэбованні моглі змусіць нас адразу шукаты раштучкі сярод кальколька несувязаных слоёў: компонента на рэжыме экрана, універсальная форма, частка спяльнай логіки, запакаванаяе ў хук, фрагмент коду для сетевых аперацый, дыялог, прызначаны для разных сцэнарыёў викорыстоўвання, і схема для пераканання ў правільнасці вводу. Компонента, якая спачатку была спяльной таму, што два экраны выглядалі аднакова, паступова накаплювала флагі, параметры калбэкаў, умовныя правілы пераканання, альтернатывныя макеты і спецыяльныя варыянты для рабочых практык, пра якія ёй ніколі не было задумана.
Код быў можна викорыстоўваць знову, але адпаведальнасць была распытана па всій системе.
Тое, што ў канцы канцоў спрабавала прадстаўляць фронтэнд, — гэта не новая схема называння папак, іншая бібліятэка карыстоўвання стану чы ўжо строгі ліміт колькасці рэйкаў у кожныя компоненты. Гэта была зміна таго, чаго мы чакалі ад межы компоненты.
У замян на тое, каб проста запытацца:
Чы можа гэты компонент быць перадуменны ў іншых месцах?
Мы пачалі ставіць такія запитанні:
За якую адпаведнасць должен несты гэты компонент?
І другое запитанне шырока стала настолькі ж важлівым:
Калі адпаведнасць трэба зменіць, сколькі неканэйсарны кода прабывае перенесены разам з яю?
Этае запитанне перакаштало нашу архітектуру ў простую іерархію, у якой сяродній шар несе найбольшую навантажэння.
Перадуменныя прымітівы займаліся толькі візуальным аспектам. Компоненты функцый несалі інформацыю пра бізнес-процесы. Старонкі і іншыя межы складання вялі за тое, як усе элементы з’еднаюцца разам.
Работа над фронтэндам стала прыткейшая, не таму што мы пазбіралі всю дуплікацыю, а таму што змяны на рэвэлі функцыйяў сталі болей локальнымі, і менш частка кодавой базы патрабавала взаімаразумеласці.
1. Перадзейнае выкарыстоўванне — гэта не тое ж самае, што простата
„Утримвацца ад дуплікацыі компанентаў“ — гэта прадакт, які загалом здаецца правым.
І часта ён такі і ўсё.
Калі два экраны выкарыстоўваюць той самы кантакт, поле вводу або модальную рамку, ўніфікацыя такой рэалізацыі зменшвае неаднаковасці і дапамагае захаваць порядак.
Проблэмы пачынаюцца, калі візуальная сэроднеча плутаецца з аднойчыныяю адпаведальнасцю.
Уявіце два адзелёныя функцыйяныя элементы, якімабудзь патрабуецца дыялогавое вікно з падтверджэнням.
Першая рэалізацыя можа выглядаць так:
<ConfirmationDialog
title="Delete project?"
onConfirm={deleteProject}
/>
Потым іншы прабэцес патрабуе тое ж вікно, але без кантакту „Анульвацыя“.
Трэці случай выклекае нестандартную паведамленне пра апавярэнне.
Ішчо адзін случай выклекае неабяцэнную пераканальчыцу прытаму, прычыму які корыстувальнік можа падтвердзіць.
Чыраз часа компанент ператвараецца ў нешта такое:
<ConfirmationDialog
title="Delete project?"
variant="danger"
showCancel
disableConfirm={isDeleting}
customWarning={warning}
onBeforeConfirm={validateDeletion}
onConfirm={deleteProject}
onSpecialAction={archiveInstead}
useLegacyLayout={false}
/>
Тэхнічна, компанент усё яшчэ викорыстоўваецца занова.
Але з архітэктурнага точка зору ён стаў функцыонаваць як мова канфігурацыі.
Кожны новы рабочы процес прасіць спакульнаваны компанент аб размешчэнні ўсё большай колькасці варыяцый. Ён стае болей гнучкім, але гэтая гнучкасць купуецца ценай размешчэння большай колькасці схованага поведзення за постаўляючыміся параметрамі.
Самэ тут цена абстракцыі разлічаецца ад цены дуплікацыі.
Дуплікацыя стае зрозумелай адразу. Два майже ідэнтычныя компаненты знаходзяцца па боку ад боку ў рэпазітарыі, якія ўсём, хто чытае код, ўжо зрозумелы.
Няправильна выборка абстракцыі на першы погляд выглядае дешаватай. Яе рэальныя затраты стаюць виднымі толькі пазней, калі функцыяўнасць, якую ён задае, начынае развівацца разнымі кірамі.
Дуплікацыя коштуе вас таго, што можна пазначыць адразу. Неправильны выбор абстракцыі коштуе вас таго, што вы з’являеце толькі тады, калі „падобныя“ функцыі перестаюць зміняцца сінхронна.
Гэта усвядомленне змяніла спосаб нашай ацэнкі павторным викорыстоўваннем.
Павтарэнне JSX больш не вызывалаў автаматычныя падазры. Болей важлівым сталае пытанне: чы рэальна два фрагменты коду дзеляць адной адпаведальнасцю, чы проста ў той момент выглядаюць падобна.
2. Мы пачалі проектаваць компаненты на адпаведальнасці
Найзначнейшыя архітэктурныя змены заклаліся у тым, што дрэва компанентаў стала павтараць рэальную адпаведальнасць, замест таго каб старацца прыняць максімальнае павторныя викорыстоўванні.
Возьмём прыкладаюць процес выканання налашчэнняў.
Кожны слой у гэтым процесе існуе з сваёй самастойной прычыны.
UserSettingsPage аднаёт даныя налашчэнняў з рэштой прыкладнення. Ён можа ведаць пра маршрутызацыю, структуру сторанкі чыста ўжо тое, які аблік актуальна рэдагуецца.
UserSettingsForm мае інформацыю пра процес выканання налашчэнняў. Ён розумее, якія даныя належаць да налашчэнняў пользователя, як поля адносяцца адзіны да другога, што означае адправка даных і якім чынам патрэбна паказаць пользователям адзіныя бяглы.
Button, Input і Checkbox нават не ведаюць, што існуюць налашчэнняў пользователя. Яны застаюцца можлівымі да павтарнага выкарыстоўвання самэ таму, што іх функцыі є справжна універсальнымі.
Самэ гэты сяродні слой функцый часта першым трапляецца ў забутку у командах.
У фронтэндзе, які занадта агрэсыўна стараецца пра павторны выкарыстоўвань, разработчыцы часта пераходзяць ад стораніцы да універсальных компонентаў, прыгначваючы будзь-які шар, спецыялізаваны на адпаведных функцыйнах.
Калі така ситуацыя выступае, бізнес-логіка больш не мае чыткага месца рэалізацыі.
У такім разе яна прасачываецца ў настройкі.
Універсальны форма пачынае розумець, што аднаму процесу потрэбна ячэйка з іменем паўтары, а іншаму — няма. Універсальная табылка пачынае ведаць, якія дзеяння є дапускаемымі для конкрэтнага типу об’екта домэна. Спяльны модальны элемент прымае спецыяльную логіку толькі таму, што аднаму процесу патрэбна ягое змест на відпаведным модальным элементе.
Шар, які можа быць павторна выкарыстоўваны, поступова абсарбуе інформацыю пра бізнес, якую ніколі не быў задуманы несці.
Проектаванне, якое адпрацоўвае прычыны та наследкі, зменшае гэты тырон.
Компонентам, спецыялізаваным на адпаведных функцыйнах, даўаецца права разумець ту функцыю, якую яны выпалоўваюць.
Прагматыкі, якія можна викорыстоўваць знову, навмысна залічваныя без ведаць пра ўсё, што стосуецца конкрэтных функцый.
Такое аддзеленне спрыяе лепшаму розумэнню всей архітектуры, адколі кожны слой патрабуе толькі меньшай кантэкстной інфармацыі.
3. Компаненты спецыяльнага прабачэння здобілі свое месца
Аднам з найважэйшых прычын, якія трэба было падрыхтаваць, была думка, што компанент, які викорыстоўваецца толькі ў аднам месцы, являе сабою недагэн у дизайне.
Паглядзіце на гэты прыклад:
<OrderCancellationDialog />
Ужо сама назва паказвае, што гэты компанент створаны для аднаго толькі рабочага процесу.
Пораўняйце яго з чымось такім:
<ConfirmationDialog />
Гэтае другое назва выглядае як болей падатлыя да перакорыстоўвання.
Протыма, анулюванне замовлення ў канечнасці можа патрабаваць горшага, чым простая падтверджэння.
Вядомым можа знадобіцца выбраць прычыну анулювання. На экране можа павінныяцца паказваць деталі варыцы. Адзінкі заўчыны можа не падлягаць анулюванню. Пераконтрольванне прав можа разлічвацца. Тэкст паведамлення пра апазор можа змяніцца залежна ад статусу выполнення. Сама дзеянне можа маты свой сопрацоўчы кантроль пакрыцьі адказаў.
Якш толькі ўсё гэта падаць у загальны ConfirmationDialog, то спяльны компонент паступова стане экспертом у тым, што на самай працэ падзеў анулювання замовлення.
Лепейшая структура зазвычай выглядае так:
OrderCancellationDialog берае на сябе адпаведальнасць за весь процес.
Ёй дазволена інформацыя пра правы, прычыны анулювання, асінхронны статус, тэкст варыцы і станы адказаў, таму што вся гэта прадуктыўна належыць разам.
Тым часам блакітнія елементы застаюцца воспольванымі самэ таму, што яны зовсім не маюць інформацыі пра замовлення.
Гэтыя змены парадоксальна спосабзілі скасаваць большасць рашэнняў, якія браліся ў чыслах.
Больш не было патрэбы апрацоўваць праблему існавання компонента па лічбе месцаў, якія яго імпортувалі.
Павторны выкарыстоўванне — гэта не патрабавак для кожнага компонента. Дзеякія компоненты існуюць выключна для таго, каб даць аднаму элементу бізнес-логікі належны формат.
Компонент, які выкарыстоўваецца толькі аднажды, все равно можа быць корыстным, якшо ён дапамагае лёгка аднаходзіць, разумець і пазней мяняць рабочы процес.
Такая локальная яснасць часта пераважае выкарыстоўванне другога, некаляжнага рабочага процеса ў спяльной абстракцыі толькі таму, што ўзоркі API выглядаюць падобна.
4. Бізнес-логіка не падлягала включэнню ў компоненты для адображэння
Тая ж проблема з адпаведнасцю задач сябе праказала ў аспектах обробкі дадзэнняў і інфраструктуры.
Компанент, які спачатку ўсунуты толькі у візуальныя аспекты, можа паступова браць на сябе такія завады, як запошук данных, чытанне параметраў URL, выконання мутацый, запуск упавядомленняў, керуванне навігацыяй, адказваўка кэшу і стежыце за станам рабочага прыемпляра.
Уявіце сабе ProjectTable, які з часам будзе адказваць за ўсё гэта:
ProjectTable
├── fetch projects
├── read query parameters
├── filter projects
├── manage loading state
├── render rows
├── delete projects
├── show notifications
└── navigate after actions
Назва яшчэ натыкае на думку пра „табліцу“.
Але компанент тепер розумее значную частку функцыяналу.
Гэта ускладняе його павторны выкарыстоўванне ў іншых месцах, адколі павторны выкарыстоўвання табліцы таксама прыводзіць да застосавання падазранняў ў чынносці запошуку данных, мутацый, навігацыі, кэшавання і побачных эфектаў.
Структура, арганізаваная за принцыпам раздзелення завад, можа выглядаць так:
Код на рэвэле фічараяў вяршыць рашэнні пра тое, як выглядае «завантажэнне», як адбываецца обработка памылак, што на самай працэ выканання моўчання, якія фільтры прыменяюцца да данага конкрэтнага рабочага прайсепту, і чы рухаць корыстніка пасля цього.
ProjectTable сама проста зосераджваецца на адображэнні дакументаў проекта і фіксаванні дзеянняў корыстніка.
Гэта не значыць, што компаненты для адображэння павінны быць парадзеныя ўсім логікам.
Якшы прыймаць гэта за строгія правіла, проста ствараецца тая ж самая проблема ў іншай форме. Тэблыця можа законна хаваць стан локальнай інтэракцыі, напрыклад, якія рядкі раскрываюцца або якія столбцы ўвидны, адтолькі што гэты стан практычна належыць самай тэблыце.
Кращая керуючая ідея ёсць:
Не дазволяйце знанням на рэвэле інфраструктуры распространяцца нижэй у дрэве компанентаў, чым на самай працэ фічара ёй трэба.
Мета не ў тым, каб цэлком пазбавіць компаненты логіки.
Мета — трываліць логіку поблізу той адпаведная адпаведнасці, яка надае гэтай логіцы значэння.
5. Складанне элементаў заместо налагоджэння параметраў
Адны з найболей выразных змян адбылася, калі мы пересталі задаваць кожную новую вялічыню іншым параметрам.
Універсальныя компаненты маюць тэндэнцію растаць за дапамогою налашчэнняў.
Табліца можа спачатку быць простай:
<DataTable rows={projects} columns={columns} />
Потым вялічыні начынаюць накаплявацца:
<DataTable
rows={projects}
columns={columns}
selectable
sortable
paginated
editableRows
showBulkActions
enableExport
customToolbar={toolbar}
rowActions={rowActions}
emptyState={emptyState}
onSelectionChange={handleSelection}
/>
Ніякі з гэтых параметраў сам по сабе не ёсць неразумным.
Проблемы пачынаюцца, калі компаненту трэба стежыць за тым, якія комбінацыі параметраў ёсць дапусканымі.
Чы можна, каб рядкі былі аднойчы ведамымі і выбірамымі?
Чы трэба паказваць масовыя дзеяння, якщо экспорт выключаны?
Чы спецыяльная палітра інструментав заменяе стандартную, чы стоіць праз неё?
Ця функцыя пагінацыі выканана на стороне кліента чыра сервера?
Кожны дадзеныя типу boolean і калебэк вызначаюць адны большы план станоў, якія должна прымець універсальная складовая.
Композыцыя часткова перакладае гэту адпаведнасць на таго, хто яе вызывае:
<Table>
<TableToolbar>
<ProjectFilters />
<ExportButton />
</TableToolbar>
<ProjectRows projects={projects} />
<Pagination />
</Table>
Тепер сам абяцелы рашае, якія элементы насправды патрабуецца для данага процесу.
Базавыя элементы таблы не патрабуецца прымець усіх варіяцый, якія можа створыць прыложэнне ў будучыні.
Канфігурацыя выкарыстоўвае складовую, якая должна прымець усі можлівыя комбінацыі. Композыцыя дазволяе таму, хто яе вызывае, стварыць толькі тую комбінацыю, якая ў ім патрабуецца.
Композыцыя не запобегае автаматычна стварэнню нярозумных комбінацый. Той, хто яе вызывае, все ўсё можа стварыць нефункцыйная комбінацыю.
Тое, што змінюецца, — гэта інша рэч: спяльны компонент больш не павінен сам ствараць код для кожной спецыфічнай для бізнесу пермутацыі.
Дзеякія настройкі все ўсё можна залишыць. Напрыклад, повторна вжываемы Button павінен падтрымляць адносныя опцыі, такія як розмер, статус аблокавання чыста візуальны акцэнт.
Справжні вопыт — гэта чы розглядваная працэўная характэрыстыка выступае як іншая варіяцыя той самай адпаведнае задачы, чы ёй таямніча падкажваюць, каб адны компонент ведаў ся займаць калькама несувязаных задач адразу.
6. Чыстая прыналежнасць спроставала рашэнні ў стане
Большасць проблем зі станам фронтэнду, на першы погляд, выглядаюць як проблемы з інструментамі.
Размова часта ператвараецца на дыскусію пра механізмы:
Чы гэта павінна знаходзіцца ў стане компонента, Context, Zustand, Redux, у URL чы ў кэшы сервера?
У практыцы ж багато з эых запытанняў самі рашаюцца, калі стае зрозумела, хто насправды адпавядае за такое паведанне.
Стан часта пачынае «падымацца» тады, калі неясна прыналежнасць:
Модальное вікно спачатку мае стан, який знаходзится ўнутры яго.
Потым яшчэ якісь компонент таксама патрэбуе ўзначыць яго, тады стан пераводзіцца на вышэйшы рэвель.
Пазней таксама патрэбуецца доступ да яго і інструментальная палітра, якая знаходзится далека ў структуры, тады стан потрапляе ў контэкст.
Чырз некалькі часоў адны глобальны хранар стае месцам для флагоў візыбельнасці модальных вікон, незаканчаных проектаў форм, налашоўкаў фільтрацыі таблы, кэшаваных адпаведзей API, выбраных вкладак і розных дадзенняў з функцый, якія не маюць адносу адна да другой.
У такі момент людзі зазвычай карайуць бібліятэку карыстоўвання станам за такі бядлаг.
Але справжняя прычына зазвычай не ў інструменте, а ў прыналежнасці.
Калі межы компаненту ўжо адбіваюць рэальныя адпаведнасці, стан па свайбе мае месца, дзе яго можна размістыць.
Што бы ні пісаў корыстнік у поле, гэта можа застацца толькі ў самам гэтым поле.
Процес анулювання, які складаецца з калько ўзлётаў, патрабуе размішчэння ў самай функцыі анулювання.
Усё, што запрашваецца з сервера, патрабуе размішчэння там, дзе ваша аплікацыя керуе падыходамі да серверскага стану.
Фільтр, які патрабуе зберагчання праз навігацыю або можа быць выкорыстаны через лінк, верагатова патрабуе размішчэння ў URL.
Стан, які практычна дзеліцца межы многах несвязаных частак аплікацыі, можа правядзіць до неабходнасці наявнасці шырэйшага, болей центрызаванага адпаведнага адпаведальнага.
Нічыя з гэтых пунктаў не ліквідуе складных рашэнняя ў аблікаванні стану, але яны даюць вам рамку для ўжытку такіх рашэнняў.
Калі межы компаненту адбіваюць рэальную адпаведнасць, выбір месца для стану стае значна простыяй.
Такая ментальная модель прынесла камандзе большэйшую парадок, чым могла бы які-небудзь „правільная“ бібліятэка станоў.
7. Інодзе дуплікацыя была кращым рашэнням
Сярод найважэлівейшых аспектаў гэтага падходу было тое, што певныя аб’ёмы дуплікацыі ўсё ж дазволены, а часам і практычны.
Уявіце два формы, якія выглядаюць практычна ідэнтычная, якія дзелюць прыбліжна 80 процэнтав сваёй структуры і маркапаў.
Інстынкт падказвае негайна перацягнуць іх у адну спільную складовую.
Але тыя застаючыся 20 процэнтав можу містіць абсалютна разную бізнес-логіку.
Можа, адна з форм перавяряе данні іначым спосабам.
Можа, адправка даных праз адну з форм запускае іншую ланцоўку наследків, чым праз другую.
Адна з форм можа проста захаваць чернавік.
Другая можа запусціць якісь незворачны процес.
Адна з форм, верагатна, з часам стане ўсё болі складнай, тады калі другая застаецца мінімальной.
Прагненне з’еднаныя як магчыма большую частку коду ў аднам спільным компоненте часта прыводзіць да стварэння чагоś, што нагадвае лабірынт умовных выразаў і спецыяльных случаяў, закладзеных у адны „павторна выкарыстоўваны“ компонент.
У такі момент вы заменяеце дуплікацыю JSX на дуплікацыю канцэптуальнага навантажэння. Кожны, хто працуе з аднім з гэтых падходаў, вынужаны аналізаваць, як спільны компонент захоўвае іншы, перш чым зможа безпечна ў чым-небудзь змяніць.
У такіх случаях часта будзе краща проста застаўляць два окремыя, паводліваныя іменамі элементы:
FeatureAForm
FeatureBForm
нават якщо частка базовага коду павтарыцца.
Гэта не ўзгоджэнне з дуплікацыяй як чыстай добродзею ў цэлым.
Калі аднойчы стане ясным і стабільным, што адпаведальнасць справаўна спільная, яе можна выявіць. Оба форматы зрэшты могу раздзеліць тыя ж прымітывы вводу, памочныя прыборы для верыфікацыі, обгорткі для макетаў чы іншы элементы, незалежныя ад конкрэтной сферы.
Асалідныя разлікі стосуюцца часу, а не прынцыпаў.
Уместнае было не прымаць абстракцыю як толькі два элементы стануць схожымі, а чакаць, пакуль спяшчаная межа насправды апрацаваецца з часам.
З гэтага выйшла простая правілама:
Кращэ копіюваць просты код, чым дзеліцца логікай, пабудаванай на прыпущэннях, якія ўсё ще развіваюцца.
Просты копіюваны код лёгка ўбачыць і застаецца толькі ў аднам месцы.
Абстракцыя, створаная занадта рано, можа таямніча супакаваць кальколька прыпущэнняў, спецыфічных для певных функцый, пад адним выглядаючым простым назвам, хаваючы саму тую складнасць, якую прагталі адмахнуцца.
8. У чым насправды справа: падтрымка локальных змян
У канцы выйшло ясна, што весь гэты падход ніколі не стосаваўся таго, насколькі вялікі чы рэусаблівы быў компонент.
Осё спынілася на тым, як можа выглядаць локалізаваныя змены.
Пытанне, якое варта ставіць ў кожны раз, было таким:
Калі мы зменяўмо адну функцыю, сколькі несвязанага коду нам патрэбна спачатку зразумець?
Дизайн з большым колікствам спакульнаваных, узагальненых компонентоў тэхнічна можа мець менш копіюваных частак, чым дизайн з большым колікствам функцыя-спецыфічных элементаў.
Але гэта все равно можа змусіць разработчыка запам’ятаваць значна большую частку всей прыкладнай програмы, толькі каб здзейсніць адну безпечную змену.
Такія витраты рэдка калі бываюць у якіх-небудзь показніках пераўтварэння.
Можна маты чудова спакульнуючыся компонент, які пры тым стварае жахлівыя абмежэння для внесення змян.
Навпакі, компанент, створанный спецыяльна для адзінаго функцыяналу і выкарыстоўваны толькі ў аднам месцы, все ж можа паспрабаваць падняць здольнасць кодбазы да адтрымання, проста таму, што ён робіць гэты адзіны процес самодостатнім і прыемным для розумеў.
Гэта стала найточнейшым формулюванням усіяў ідэі:
Дзеянне меж компанентаў павінна быць адпраўленая да локальных прычын, а не да максымізацыі ўзаемнае выкарыстоўвання.
Гэты адзіны прынцып з’еднае ўсё іншае.
Праймітывы, якія можна выкарыстоўваць знову, здобываюць свое месца таму, што патэрны прыказчыкавання дзе-небудзь у кодбазе справды павтараюцца.
Компаненты, спецыяльныя для адзінаго функцыяналу, застаюць спецыяльнымі таму, што бізнес-процесы змінююцца з прычын, якія рэдка калі супадаюць адзіны з іншым.
Композіцыя не дазволяе спакульнаваным компанентам выучваць кожную можлівую варыяцыю бізнесу.
Стан застаецца там, дзе насправды знаходзіцца тое поведанне, якое яго керуе.
І дуплікацыя становіцца прыемна роўна тады, калі аддача коду могла бы з’еднаць заўважэння, якія вже самыя по сабе пачынаюць адступаць адзін ад другога.
Фронтэнд становіцца простым не таму, што кожны компонент стаў меньшым або болей відновлюваным, а таму, што кожны з іх выклекае меньшых вакалітацый у чалавека, які яго чытае.
Правыя межы компонента — гэта тые, якія можна поясніць, калі ў чым-небудзь з’яўляюцца змены
Існуе спакуса ацэніваць базу коду фронтэнда па поверхневых сігналах: актыўная перадача компонентаў, мінімальная дуплікацыя, аднародна арганізаваныя папкі, малыя размеры файлаў. Гэтыя аспекты не ўсунутыя з значэнням, але яны дастаўна мало сказваюць пра тое, што на самай працэ пачынаецца, калі змieniaецца якая-небудзь вакалітацыя.
Выявілася, што гэта ўсё бол корыстны тест для застосавання.
Дзе на самай працэ паслужыць гэты фрагмент поведзення?
Кой компонент адпавядае за розумеенне гэтага бізнес-правіла?
Дзе павінен жыць гэты конкрэтны элемент системы?
Якшо змянюецца якая-небудзь вимога, калькі файлы павінны логічна быць адносованыя разам?
Калькі часткі інтэрфейсу ўжоць можна перадаць знову, а калькі павінны застацца спецыфічнымі для адной функцыялкі?
Шаблон, який у канцыкі спроставаў гэты фронтэнд, не быў якой-небудзь хітрой новай тэхнікай абстракцыі.
Усё зводзілася да таго, каб кожны слой кодавой базы меў менш прыбліжваць дакументацыю.
Перадавальныя прымітівы былі адпаведнае за візуальную прыказку.
Компоненты функцыялакі былі адпаведнае за рабочыя процесы.
Гранікі складання былі адпаведнае за тое, як функцыялкі взаімаўна падключаюцца.
А компоненты, спецыфічныя для бізнесу, мелі права застацца саме такімі: спецыфічнымі.
Рэзультатны кодавы база не павінна была обавязкова мець менш компонентоў чы тэорычнае мінімума дуплікацый.
Што ўсё-такі было адзержана, так гэта база коду, дзе разработчык мог адрабатваць над адной функцыяй, не павінны быў спачатку запамятаваць архітектуру всего фронтэнду.
Гэта выявілася набагато практычнейшым вакледжэнням простоты, чым лічыць компаненты або дубліруемыя рэядкі.
За вашым адным дазвічэнням, чы больш відновлюваных компанентоў або яснейшыя межы між існуючымі компанентамі больш спрабавалі зробіць ваш фронтэнд болей падтрымуемым?
Спадневаная літэратура
- Скорачэнне React Prop-Drilling і God Components — Дзеясавайце сэм конкрэтных шаблонаў рефакторавання для разбівання вялікіх React-компанентоў пасля ізоляцыі стата, запошуку дадзеных, праваў і логікі завантажэння, а не проста падзелу файлоў.