Разработка на React з ай-тэем: рэальныя сілы, рэальныя меры

Калі асистэнты для кодавання на базе AI пачаткова з’явіліся, разработчыкі практычна за ноч час раздзеліліся на два лагеры: тыя, хто абсалютна адмовіўся ад гэтых інструментаў, і тыя, хто пачаў актываўна розвіваць функцыяны у два разы шырэй, чым зазвычай. Большасць скептыкав у канечнаму падсчытку перайшла на сторону другіх, калі самі пабачылі розныцю ў продуктывнасці.

Гэта не ўжо аднойчы прадбачанне пра тое, што AI зробіць разработчыкаў застарэлымі. Це практычны аналіз таго, як разработчыкі React можаць выкарыстоўваць інструменты AI сёння — дзе яны практычна дапамагаюць, дзе не падходзяць, і якія урокі можна вывучыць, працюючы з ямі.

Чаму React і AI так добра падходзяць адна да другой

У React є тое, чаго большасці фреймворкаў не хапяе: вельмі большы запас публічнага коду. Існуюць мільйоны компонентаў, навучальных матэрыялаў, тэм у форумах і адкрытых репазітарыяў, створаных з яго. Моделі, натрэнаваныя на такой об’ём матэрыялу, ў канечнаму падсчытку чырпаюць вельмі глыбокія знанні пра React.

Парадоксальна розніця — з іншай стороны, існуюць нішавыя фреймворкі, які викорыстоўвае маленькая спальніца. Якшчы запытаць AI-інструмент пра якісь рэдкісны кейс у такім фреймворку, ён часта дае некалькітаныя адказы, прычаму якіх не мае. Але якшчы запытаць пра функціі чысткі пад useEffect або пра тое, чаму компонент продовжвае перерэндаравацца ў цікле, адказы зазвычай бываюць точнымі і корыстнымі.

Такая супрацоўка можліва таму, што у React є калькі важлівых характэрыстыкаў:

Ён надзвычайна популярны, таму даныя для навучэння ў яго основе є масіўнымі і актуальнымі. Ён сильна апараецца на шаблонах — компоненты, хукі і пропсы всі следуюць павтарюваным структурам. Ён чыста задокументаваны, што значыць, што AI фактычна багаць разоў вучыўся з офіцыйных дасягненняў.

Дзе AI практычна дапамагае ў ўседзённай працы

1. Стварэнне шаблонных элементаў. Апісанне ўсё новага компонента формы з функцыяй верыфікацыі — не найпрываблейшая задача. Адразу пасля апісання трэбавак — напрыклад, формы выхаду з адзінами польмі для адресы электранай і пароля, функцыяй верыфікацыі, станаў памилак і поведзення пад час завантажэння — за калікве секундаў ствараецца працэздатны першы праект. Адтуды пачынаецца справжняя работа — яе дапрацоўкі і вылагоджэння, і саме гэты крок застаецца найважлівейшым.
2. Розумеўце спадчыннага коду. Уявіце, што вам даводзіцца прыемляць базу коду на React, створаную калькама разработчыкаў, якія ніколі не супрацоўвалі адзіны з другім. Падставленне каля колькісці сотняў лінакоў такога заплутанага компонента ў інструмент на базе AI і запытанне пра тое, што ён на самай працэ выканае, можа заўсёды зарадзіць гады ручнага аналізу. Ён паводзіцца як толькі спакойны саўерэн, які ніколі не вярожыцца адпавядаць на запытанне „Чаму гэта тут?“

Разрабатка тэстаў. Тэставанне — это задача, якую всі часта адкладаюць. Інструменты AI значна спрыяюць стварэнню тэстаў аддзінаў для компанентаў. Тэсты, якія ствараюцца, за замовчаннем не ўжо ідеальныя, але яны даюць разумную пачатковую базу, якую можна далей удосконаліць.

Усуненне складных адмоўкаў. Дзеяныя паведамленні пра адмовы, такія як відсутнасць унікальнага атрыбута key, вядомы большасці разработчыкаў. Але паведамленні пра залежнасці чыстакаў або несувяместнасці падчас гідратацыі ў Next.js можуць быць сложнейшымі. Падставленне полныяе адмовкі разам з актуальным кодам у інструмент AI часта дапамагае быстрэй знайсці рашэння, чым пошук у тэкстах пытань на GitHub.

Дзе AI все ўсё ж мае труднасці

Сюды самэ працягваецца хайп, таму што існуюць чысткія меры:

Складная архітектура стану. Інструменты AI досыта добра справляюцца з адзінам компонентам, але калі прасіць іх разрабатваць систему карыстоўвання станам у вялікай аплякацыі — выбіраць между контэкстам і спецыяльной бібліятэкай стану, структуруваць часткі коду або вяліць, дзе павінна знаходзіцца логіка запрашання дадзеных — тады парады зачастую ўзнівечаныя і не адпаведаюць вашай рэальнай аплякацыі.

Настройка выдатнасці. AI з радасцю прапануе загорнуць усё ў useMemo і React.memo, што часта заводзіць да большых проблем, чым проста застаўці код як ён. Ведаць, калі мемоізацыя дапамагае, застаёцца навукой, якая залежыць ад людзкага суджэння.

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

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

Рабочы процес, які дзейсна працуе

Пасля трывалых эксперыментаў надзеяны рутын выглядае так:

Спачатку падумайце. Самі адначасова выберыце структуру компанентоў і трык падачы данных, прычымляючы ШІ. Калі дазволяеце ШІ здзейсніць першы крок, часта ствараецца недбалая, нефокусаваная архітектура. Складзіце праект за дапамою ШІ. Точна апісайце компаненты і дазвольце інструменту стварыць пачатковую структуру. Пераглядзіце кожны рядок. Прачытайце выходны код так, як калі б яго напісаў младшы разработчык — таму што, фактычна, так і ўзяўся. Праэфектуйце та інтегруйце. Адкорректуйце правілы называння, прыстосавайце стыль да кодбэйсу і належным чынам з’яўце його з існуючым кераваннем станам. Самі перапрацавайце крайнія кейсы. Код, створаны ШІ, зазвычай добра пакрывае стандартныя сцэнарыі, але практычныя багі часта хаваюцца самэль у крайніх кейсах.

Такі змены мышлення, якія варта запам’ятаваць, такіе: спраўляйцеся з ШІ як з абсалютна шырокім моладым разрабам, а не з высокакваліфікаваным архітектаром. ШІ можа быстра ствараць код, але адпаведнасць за його правільнасць, выконвальную спроможнасць і можлівасць далекага падтрымання як і раней лежыць на вас.

Навыкі, якія ўсё болей маюць значэнне

Іронічнае тое, што поява інструментаў на базе ШІ зробіла глыбокія знання React ўсё ценнейшымі, а не менш значнымі. Калі код можа быць створаны мгновенна, тады тое, што адзінакоўвае разрабоў, — гэта ўмеласць:

Выяўляць непатрэбныя перераскладанні Паясняць, чаму масэва залежнасцей хука мае значэнне Розумець, што на самай працоўнае адбываецца за межамі абстракцыі Швайна пераглядаць код, каб знайсці тонкія багі

Разработчыкі, які вже добра ўсвядомляюць прынцыпы React, зазвычай выкарыстоўваюць AI як адносну прыбутковасць у сваей работе. Тыя, хто не так добра розумееў яго, вынужданы паводзіцца з AI як з костылем, і гэтаю тэндэнцыя з часам стае видна ў якосці іх кодавых баз.

Заключныя мыслі

React не зникае, як і розработка за дапамогою AI. Разработчыкі, які досягаюць успеху ў такой средзе, — цэлкам не тыя, хто абоўсюды адмовляецца ад гэтых інструментаў, або слепа вставляе все, што ўтворыў AI. Цэлкам не тыя, хто ставіцца да AI як да простага інструмента: ён надзвычайна корыстны в руках кваліфікаваных спецыялістаў, але ўпадзяжны для тых, хто не розумее, што ён на самай працы выканае.

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