Калі АІ пішае вашу аплікацыю на React, але ігнаруе прынцыпы чыстага коду

Няўзрытку аднаго з кліента мы получылі проект па стварэнню веб-сайта для замовлення піцы.

Спачатку масштаб задання здаваўся прыемным.

Староніца абрання.

Раздзел меню.

Разныя катэгоріі піцы.

Адзінаковыя староніцы продуктав.

Корзіна пакупак.

Процес адправкі замовлення.

Плюс панель адміністрацыі для керування всім у тле.

Прыродны вывар быў такім:

"Гэта должна зайняць некалькі хвілін."

Потым была прынята рашынка скорастаць за дапамогою AI-асистента для кодавання.

Сяродзіндзе ўсё стала цікавым.

Верыце AI керуванню большай часткай кодавання

Проект быў створаны на React.

Уместо таго, каб рукамі пісаць кожную лінію, да AI былі надсылаемы запиты для стварэння кожнага элемента.

Запит на кшталт:

"Створыце компонент карткі піцы."

негайна стварыў гэты компонент.

Далей:

"Створыце корзіну для пакупак.

Усё адрабавана.

Потым:

"Створыце экран для адзначэння пакупак.

Таксама адрабавана.

Потым:

"Створыце панель адміністрацыі, якая паказвае статыстыку, замовленні і інфармацыю пра клёячых.

Усё выдана.

Шваль быў сапраўды вражаючы.

Работа, якая зазвычай займае гадзіны, выканалася за кальканы час.

Рэзультат включаў:

• Компаненты React
• Формы
• Тэблі з дадзеннямі
• Віджэты панелі адміністрацыі
• Інтэграцыя з API
• Індыкатары завантажэння
• Адрабоўка памылак
• Макеты, якія прыстосаваліся да размеру экрана

І прыкладнэе практычна работала.

Усё выглядала абнадзейна.

Здавалася, што быў знайдзены ідеальны прабег работы:

Ідея → Запит → Код → Розповсюджэнне

Але не хватала адной важнай складовай.

Перагляд таго, што было створана.

Кліент ніколі не бачыў самога коду

З точкі зору кліента, все выглядала чудова.

Сайт працаваў без проблем.

Панель керування функцыонавала.

Меню паказвалася правільна.

Замовы з’являліся як і планавалася.

Візуальна частка была вышуканая.

Тады дзе ж была пастка?

Проблему не можна было пазначыць ззаўні.

Пад спудам база коду паступова стала прычынай труднасцей у тыямленні.

Гэта не было відразу зрозумела.

Але калі дадаўся ўсё больш функцый, пачала выклікацца певная законамасць.

Пастаяла постаўная думка:

"Чакай... хіба ўжо не было створана чагосьць майже ідэнтычна гэтаму?"

Тады з’явілася важліва усведамленне:

Штучны інтэлект справды вмее ствараць функціональны код.

Але чысты код — гэта не тое, што ён дае автаматычна.

Проблема №1: Павтарэнне логіки па всю програму

Выявілася, што практычна ідэнтычная логіка была розбросана па всій прыкладнай програме.

Напрыклад, калькуляцыя сум выкалікалася незалежна ў калькuluе разных функцый.

Одна з іх выглядала так:

const total = price * quantity;

У іншых частках програмы з’являлася практычна ідэнтычная версія:

const orderTotal = price * quantity;

А ў іншым файле:

const cartAmount = price * quantity;

Усі тры функцыі па суті выкалікалі тую ж калькуляцыю.

Тэхнічна нічога не было зламана.

Але як толькі патрабавалася змена правіл цэнаваць, патрэбна была знаходзіць і апдейтаваць кожную з эйх копій.

Самэлькі тады стала ясна першая засада чыстага коду.

1. DRY — Не павтараце сябе

Калі тая ж логіка павтараецца раз за разам, важлівыя запитанні:

Можна ліквідаваць ўсё гэта, з’едыніўшы ў адны істочнік?

Напрыклад:

const calculateItemTotal = (price, quantity) => {
  return price * quantity;
};

З таго моменту кожны частка прыкладнення можа вызываць тую ж спільную функцыю.

Мета не ў тым, каб прымусіць викорыстоўванне ў всіх месцах.

Це проста спроба пазбавіцца павтарэння, якое не мае ніякага сенсу.

Проблема №2: Адна складовая робіла ўсё

У певны момент адны з створаных файлаў React быў ачынены, каб розглядзець яго болей дакладна.

Ён продовжваў растаць.

Лінія за лініёй.

Ён проста продовжваў расширвацца.

Этая адна складовая была адпаведальная за:

• Запыты да API
• Керуванне станам формы
• Логіку верыфікацыі
• Візуальную наявнасць модалага вікна
• Атрыбутаванне таблы

Фільтрацыя рэзультатаў

Старанне

Упавядомленні

Корача кажучы, адна файлавая структура практычна сама выпалоўвала палову працы програмы.

Вочывым вывадам было:

"Трэба будзе вельмі старацца, каб яго падтрымаць."

Таму этот компонент быў раздзелены на менейшыя часткі.

У замест на тое, каб застаць у такой структуре:

Orders.jsx
   ↓
800+ lines

яго перастроілі ў кашто-такое:

Orders
 ├── OrderFilters
 ├── OrderTable
 ├── OrderRow
 ├── OrderModal
 └── useOrders

Этае перастроенне безпосередзя прывела да наступнага прынцыпу.

2. Адна адпаведальнасць

Компонент або функцыя должны мець адну чыстую задачу.

Якщо вы не можете апісаць, што робіць компонент, за адну фразу, ў вельмі вялікай меры верагатэльна ён несе занадта вялікую навантажэння.

Напрыклад:

OrderTable відображае спіс замовленняў.

Это чыстае, сфармаванае апісанне.

Порашыльце яго з:

OrderTable зяўляе замовленні, пераканальваецца ў правах пользователя, вылічае сумы, запускае паведамленні і адображае все ў таблыце.

Такое апісанне ўскладнюе розумэнне.

Проблема №3: Вялікі колькасць запэўненых выразаў занялі весь код

У певны момент частка логікі ў проекте выглядала так:

if (user) {
  if (user.isActive) {
    if (user.isVerified) {
      // create order
    }
  }
}

Ён працаваў правільна.

Але яго аналіз быў вялікай працой.

Таму ён быў перапісаны так:

if (!user) return;
if (!user.isActive) return;
if (!user.isVerified) return;

// create order

Эта версія была набагато простейшая для разумэння з першага погляду.

І тут прыходзіць наступны прыем:

3. Раннія вяртання / Захоўныя клазузы

Уместна не хаваць основную логіку пад колькасцю запэўненых умоў, а зразумела распрацавваць некоректныя кейсы з самага пачатку і якнайранейша выйсці з програмы.

Invalid?
   ↓
Return

Invalid?
   ↓
ReturnEverything okay?
   ↓
Do the actual work

Рэзультатам яе галоўная логіка застаёцца простай, чытабельной і без непатрэбнага відступлення.

Проблема №4: AI запропанавала новыя компоненты для таго, што вже існавало

Этая памылка была дзе-небудзь няўпатрэбнаю.

Запит, даны AI, быў такім:

"Створыце модальное вікно паўтарнай пераканання для выдалення замовлення."

AI адпавела, створыўшы абсалютна новы компонент.

Йго практычна прымілі без жадных запытанняў.

Потым швыракі пошук у проекте паказаў калькольважнае.

Ужо існаваў модальны компонент.

Йго проста можна было перыскары.

Этот момент зробіў адно ясным:

AI не ведае апошньняго, што ўжо існуе ў данай базе кода.

І нават калі система і справды ведае, яна можа заўсёды выбраць стварэнне чаго-небудзь новага замест таго, каб перадаўжыць тое, што вялікі ўжо.

Лепшы падход — запрасіць да дзеяння чымось на кшталт:

"Перад стварэнням новага компонента пераканайцеся, чы не існуе ў жастаннім кодбэсе чаго-небудзь, што можна перадаўжыць."

Гэты дазнаўчы каскад паказвае ўсё новую правілу:

4. Перадаўжыце раней, чым ствараць

Перад тым, калі хочаце дадаць:

• новы компонент
• навокальную функцію
• навокальны хук
• памагальную функцыю API

задайце сабе пытанне:

"Чы гэта вялікі ўжо існуе ў проекте?"

Чысты кодбэс не визначаецца наявнасцю дзесяткаў элементаў, якія можна перадаўжыць.

Ён визначаецца разработчыкамі, якія перадаўжыць тое, што вялікі ўжо є, замест таго, каб таямна яго дуплікаваць.

Проблема №5: Інодкі імена зменных булі жахлівыя

Код, створаны AI, прыходзіць быстра.

І легка прыймаць імена зменных на кшталт:

const data = ...
const result = ...
const x = ...
const temp = ...

Этыя імены компілююцца нормальна і не вызвалі жадных памылак.

Але чырэз месцы, да чаго на самай працо аднасца data?

Це даныя, асоціюемыя з піццаю?

Інформацыя пра замовлення?

Даныя кліентаў?

Што-небудзь, звязанае з панелю керування?

Таму, калі проект расте, іменаванне павінна стаць болей цялеспрямованым.

У замест на тое, каб пісаць:

const data = await getOrders();

Лепшы ў варыянце з большай яснасцю:

const orders = await getOrders();

А у замест на:

const x = users.filter(...);

Так працо чытваецца набліжэней:

const activeUsers = users.filter(...);

Гэта дае ўсё той жа просты правіл:

5. Ожывайце імены, якія пояснююць код

Описавае іменаванне часта можа абэцянальна падрыхтаваць месца для каментароў.

Чытанне чагосьць на кшталт:

const activeUsers = users.filter(
  (user) => user.isActive
);

Ужо паведамляе вам абсолютна правда пра тое, што выканаецца.

Няма прычыны дадага:

// Filter users who are currently active

Код сам сабе ўсё паведамляе.

Проблема №6: Оптымізаванне таго, што не патрабавала оптымізацыі

У певны момент у такім проекте лёгка запачаткаць думаць:

"Этот код павінен быць больш оптымізаваным."

Гэта часта прыводзіць да розбору такіх аспектаў, як:

useMemo()
useCallback()

і калькі іншых трюкаў для падвышэння карыстоўнасці.

Але вартуе зупыніцца тут.

Оптымізацыя не ўсегда являе сабою добру рэч.

Возьмім просты расчэт, напрыклад:

const total = price * quantity;

Няма прычыны загортваць гэты расчэт у які-небудзь складны шаблон оптымізацыі толькі таму, што існуюць такія інструменты.

Дзеянне такім чынам толькі ускладніць розумеў коду.

Што вядома да іншага урока:

6. Оптымізаваць толькі тады, калі ёсць рэальная проблема

Не прабуйце аптымізаваць таму, што:

"Калісь у інтэрнете сказалі, што гэты метод ўскорыў роботу."

Усё-такі спачатку знайдзіце справжню прычыну спаду продуктыва.

Чы не перашчытна часта перерэндаруецца якісь компонент?

Чы повольны запит API?

Чы вычысленні даскладныя?

Чы размер пакета занадта вялік?

Чы запит да базы дадзеных неэфектыўны?

З’явіце справжню прычыну, перш чым ўсё змяніце.

Толькі тады трэба прыменяць оптымізацыю.

Чысты код плюс непатрэбная оптымізацыя = непатрэбная складнасць.

Проблема №7: Больш не прасіць ШІ "вылечыць усё"

Гэта можа быть найважнейшы вывад з такога проекту.

Іноды бывае спакуса проста сказаць:

"Проста падзейце весь проект для мяне."

Але краща не робіць гэтаго.

Што взагалі значыць "падзейце" у гэтым контексте?

Штучны інтэлект можа адпаведзець так:

• перайменоўваць зменныя і файлы
• перарганізаваць структуру папак
• введаць новыя абстракціі
• з’еднаць функцыі разам
• выдаліць код, які ён счылі непатрэбным
• пераструктураваць архітэктуру

Дзеяны з гэтых змян можа справды дапамогчы.

Іншыя можа быць беспраганскімі.

А дзеяны можа таямна прынесці багі.

Медленны, паэтапны падход працуе краща.

Пачніце з запытання:

"Паглядзіце на гэты проект, але пакуль нічога не меняйце."

Потым:

"Адзначыце будзь-яю дуплікаваную логіку."

Потым:

"Скажыце мне, калі з гэтых дублікаў насправды варта выправляць."

Толькі пасля чаго трэба рассмотрыць прыказы.

Потым аплікуюцца адныя змены.

Потым гэта тестуецца.

Гэта стае сьведамленнем пад номерам сям:

7. З’ясавайце прычыны, перш чым рэфактораваць

Ніколі не дазволяйце ШІ працаваць з кодам, які не быў усё ўжо цалком зрозумелы.

Пачніце з аналізу.

Потым пераканайцеся, што логіка зрозумела.

Потым выберыце, што робіць.

Потым аплікуюце змену.

Потым пераканайцеся ў яе правільнасці за дапамогою тэста.

Што ілюструець веб-сайт з піцца

Цікава тое, што кліенты рэдка калі запытаюць:

"Чы роўны ваш код?"

Запыт зазвычай простейшы:

"Чы сайт працуе?"

І часта ён дэйсна працуе.

Усё-такі разработчыкі несуць адпаведная адпаведнасць не толькі за першую працюючую версію.

Програмна аплікацыя рэдкасцю застаецца статычной пасля выпуску.

Зрэшты кліент вяртаецца з просьбамі:

"Можна дадаць можлівасць стежыць за доставкай?"

Потым:

"Давайце дадамо коды на зніжкі."

Потым:

">Нам патрэбна падтрымка для калькі філіяў."

Потым:

"Нужны адначленыя для персоналу рэстарана."

Потым:

">Нам хацелася бы статыстыка."

Чырз некалькі часоў той маленькі сайт з піцца ператворыўся на аблагоўаную систему.

Самэ гэта і є момент, калі чысты код пачынае правядзіць сваю адпаведнасць.

АШ не была прычыной

Цікава будзе быць чыстае ставленне.

АШ не ў чым вінаватаць.

Гэта практычна ценна ў такім процесе стварэння.

Гэта дапамагае:

• дзейсніць роботу быстрэй
• тэставаць разныя падходы
• выкананню павтараючыхся завадзяў кодавання
• шуканню багоў
• стварэнню канструкцый компонентаў
• мысленню над рашэннямі

Справжняя проблема не ў тым, што ШІ генеруе код.

Проблема ў тым, што генераваны код іноды прыймаюць без достатняе пераканальвання.

Это два аблічна разныя прыбліжэння.

Перасмотржаны процес роботы з кодаваннем за дапамогою ШІ

Пасля такога проекта логічна змянаванне падходу.

Процес можа выглядаць прыбліжна так:

Understand the requirement
          ↓
Explore existing code
          ↓
Plan the solution
          ↓
Ask AI for implementation
          ↓
Review the generated code
          ↓
Simplify
          ↓
Test
          ↓
Refactor if necessary

ШІ яшчэ виконвае значную частку фактычнага набірання тэксту.

Але большая частка мыслення вяртаецца да разработчыка.

Спадзяваецца, што самэў развіцця програмнага забезпечэння прымкне да такага балансу.

Штучный інтелект пішчытае код, але база коду застаецца вашай

Гэта галоўны вывад з усьго гэтага досвіду.

Калі штучны інтелект пачынае ствараць ваш код, бывае спакуса выдумваць:

"Штучны інтелект гэта напісаў, значыць ён павінен розумець, што робіць."

Гэтая думка не ўсупершце правядзіма.

Автарскія права на базу коду застаюцца у вас.

Вы той, хто будзе яе падтрымляць праўяўды.

Вы той, хто павінен знаходзіць багі, калі яны з’яўляюцца.

Вы той, хто павінен поясніць, як ёна працюе, іншым людзям.

Вы той, хто за месцы павернёцца да яе і зноў будзе мусіць ёй разумець.

У якой-небудзь момант другі разработчык можа ачыніць проект і запытацца:

"Якія былі праблемы, якія сталі прычынай такага падходу?"

У ідеале сам код павінен чыткая адказаць на гэтыя пытанні.

Семь прыкмет чыстага коду, якія варта вытрымаць

Якщо стиснуць усі ці моменты, то гэта тое, што засталося у мяне:

1. DRY

Утримваюцца ад дуплікацыі той самай логікі ў калькі месцах без важлівай прычыны.

2. Адна адпаведальнасць

Бярозклікайце, каб кожная функцыя чы ўскладненне мела адну чытка апісаную мэта.

3. Раннія вяртання

Зменшайце нараджэнне вялікіх структур, каб галоўны маршрут логікі заставаўся простым для разумення.

4. Павторна выкарыстоўванне пры першай можлівасці

Шукайце вялікія рашэнні ў кодбазе пры стварэнні чаго-небудзь новага.

5. Хорашая назывка

Выбірайце назвы, якія чытка паказваюць, што представляе зменная чы функцыя.

6. Оптымізацыя на адной падставе

Утримваюцца ад дадавання сложнасці, якщо толькі няма вимернай проблемы з выданнем, якая гэта падтрымлівае.

7. З'ясавайце спачатку, прытым як рэфактораваць

Штучныя інтелекты можаць прасаваць практычныя змены, але рашэнне, якія з іх варта адкаліць, застаецца за вамі.

Заключныя думкі

Калі я прыступаў да проекту веб-сайта з піццай, я выдумаў, што галоўная перадчыннае штучнага інтелекту будзе:

высокая швальнасць.

Адмахнуўшыся назад, я пераканаўся, што існуе ўжо большая перадчыннае.

Штучны інтелект звалівае навантажэння на розум, якое неабходна для тых аспектаў развіцця, якія сапраўды выкалікаюць патрэбу ў суджэнні.

Уместо таго, каб витрачаць зусілля на стандартны код, мы можамы перакрысці гэтую энергію на лепшыя запытанні:

Чы гэты падход сапраўды правільны?

Чы гэта можна зробіць простае?

Чы ў проекте вже існуе ўжо што-та падобнае?

Чы гэты дизайн застанецца працоўны, калі з’явіцца наступная функцыя?

Чы іншы разработчык зможа будзе следаваць гэтаму падходу?

Гэта і ўсё справжняя сложнасць у работе з развіццем пад адказом ШІ.

ШІ можа стварыць сотні ліній коду практычна мгновенна.

Пакіранне паўтарэння, чы рэальна тыя лініі заслуговаюць на свое месца у базе коду, яшчэ застаецца на нас.

Можа, гэта і ўжо аднавёраная вялічына чыстага коду, калі ШІ стала часткай процесу:

Тое, што код запускаецца, — гэта не канец. Гэтым є можласць яго падтрымкі пазней.

Спадневана літэратура

• Чаму доступ да ШІ, а не ягоя можлівасць, ёсць вашым справжнім рызыкам залежнасці — У гэтым артыкуле аналізуюцься няўжоныя інцыдэты з контралем экспорту, якія сталіся з Claude і GPT-5.6, ў тым, каб падкрэсліць, што доступ да модэляў ШІ ёсць нестабільным факторам, незалежным ад чыстай тэхнічной можлівасці.

Тры типаскріптовыя шаблону, якія павышаюць архітектуру React-прыемоў — Дазвольце дазнацца, як шаблону Repository, Observer і Builder выкарыстоўваюць систему типаў TypeScript для стварэння чыстейшых і лягчэй кераваных кодавых базаў для React і Next.js.