JSX — гэта не HTML: рэальныя компрэсіі, якія існуюць у маркапе компанентаў
З’ясавайце, што вы тыражаеце, калі маркап прыводзіцца да JSX — ад інструментаў та парсавання да форм, доступнасці та переноснасці, а таксама што ўзводзіць большую частку гэтага назад.
Практычна кожны туторыял па React запавяе новачкаў, што JSX — гэта "фактычна HTML усередине JavaScript". Падобнасць дзейсна ёсць, але такія запавенні закрыюць сабой нядзеяныя наследкі, якія проявляюцца пазней у процесах складання, розмерах пакетаў, затрымкі при вводзе дадзеных і аудытхах доступнасці. Чытаючы далей, вы пазнаеце, чым на самай працэ ёсць JSX пад маской своего візуальнага выгляду, якія можнасці зменяюцца, калі маркап пераходзіць з парсера браузера ў среду выканання JavaScript, і якія конкрэтныя патэраны дапамагаюць вярнуць большасць таго, што было адныя, не пакінуўшы компаненты.
Знаёмы візуальны выгляд на іншай машыне
JSX практычна цэлкам запозычвае візуальную структуру HTML. Элементы пачынаюцца з <button>, заканчваюцца з </button> і вяршаюцься адна ў адну, як і маркап з 1990-х гадоў. Самэ гэта знаёмства значна спрыялі тому, што пераход да одностранчных прыкладненняў стаў набліжэй для цэлаг паколення разработчыкаў:
// It looks like HTML...
function UserCard({ name, role }) {
return (
<div className="card">
<h3>{name}</h3>
<p>{role}</p>
</div>
);
}
Адзейнак, гэтыя два элемента ўособліва не асоцыююцца між сабой як тэхналогіі. HTML — это декларатыўны язык маркапінгу, які двайнікі браузера парсуюць безпосередна за дапамою супэр-оптымізаванага натыўнага коду. JSX — это сінтаксіс, які кампайляр перапісвае ў вялізныя вызывы функцый JavaScript: React.createElement у класычным спосабе ператварэння, або дапаможныя функцыі на кшталт _jsx() у сучасным автаматычным рантайме. Элемент <div> у компоненте ўжо не являецца маркапінгам; гэта проста спіс аргументаў.
Іспользованне JSX дае вам багато пераваг: дрэвы компанентаў, кія керуюцца дадзеннямі, абавязковая сінхронізацыя межу станам і DOM, а таксама перакранчаванне типаў у шаблонах. Аднак кожная абстракцыя мае свой цэну. Замена натыўнага формата браузера на шар JavaScript значыць павярненне да інструментаў для складання, вялікія витраты памяці пад час выканання і айхоўка калькі зямлеробскіх функцый, якія платформа надае безкоштовна. Ніхто з гэтых абавесцей не ўскладнюе викорыстоўвання JSX, але кожная з іх важна ведаць пад час проектавання прыкладнага програму.
Падатак за інструменты
Втрата працэсу двойнага клікання
Першым, што зникае, ёсць простата веб-платформы без жадных залежнасцей. Звычная HTML-стораніца не патрабуе нічога кроме рэдагара і браузера. Вы можете створыць index.html на афлайн-машыне, дваццаравы раз клікнуць на яе, і браузер адразу ж атрыбутавае яе з URL у формате file://.
Ніяны JavaScript-двайнеры, незалежна ад таго, чы рэч гэта V8, JavaScriptCore чы SpiderMonkey, не спрыяюць розумець <div className="box"> як код. Перш чым ўсё прайдзе на экран, JSX патрэбна ланцоўка компіляцыі:
- компіляр, такі як Babel, SWC чы esbuild
- бандлер, такі як Vite, Webpack, Rollup чы Turbopack
- npm, pnpm чы yarn для інсталяціі залежнасцей
- Node.js чы Bun для запуску гэтых інструментаў
- папка
node_modules, якая зазвычай мае вазу калекі сотак мегабайтаў у вастоўканых настройках, парсерах, плагінах і поліфілах
(Існуюць версіі Babel для працы ў браузеры для швайнарог экспэрыментаў, але іх не можна выкорыстоваць у фінальным продакце). Разлік у шляху ад файла-выкарыстоўвання да пікселей выглядае так:
HTML Workflow:
[index.html] ----------> Directly parsed by Browser Engine (Instant)
JSX Workflow:
[Component.jsx]
└─> AST Parsing
└─> Transpilation (_jsx() calls)
└─> Bundling & Minification
└─> Network Download
└─> JS Parse & Compile
└─> Runtime Virtual DOM
└─> DOM Mutation
Навантажэнне з адтрымкай
Спаяванне маркапаў з компілярам створывае постацэйныя витраты:
- Зіпсаваныя інструменты. Праект, да якога ніхто не прыступаў тры гады, часта адмовляецца будавацца, таму што пакеты, якія выкарыстоўваюцца ў верхніх рэштах, патрэбныя версіі Node.js чы ўстаткі бандлера зменіліся.
- Нестабільнасць картоў выхаднага коду. Для дэбаггінгу продакшна-версіі неабходна ператварыць мініфікаўаны выхідны код знову ў первісныя складовы. Калі карты выхаднага коду неяўныя чы некоректныя, трэйсы выканання паказваюць анонімныя вызовы пад час выканання, а не ваш код.
- Затрымка у адзывах пасля будавання. Сучасныя бандлеры, напісаныя на Rust чы Go, ўздоўж вельмі швядкія, але ў вельмі большых кодавых базах постаянная перекомпіляцыя все равно стварае затрымку, якой проста няма, калі вы рэдагуеце сырый маркап.
Синтаксічныя обмежэння, успадкованыя з JavaScript
Паколькі JSX парсуецца як JavaScript, ён успадковывае збераганыя словы та строгейшую граматыку JavaScript, а таксама втрачае прагнучасць HTML.
Зарезерваваныя словы стаюць перайменованнымі атрыбутамі
Атрыбут HTML — это строка, прыўязаная да вузла DOM. Атрыбут JSX — это ключ у об’екте, які передаёцца функцыі. Паколькі class і for ў JavaScript являюцься зарезерваванымі словамі, JSX выкарыстоўвае іншыя назвы. Стандартны формат HTML:
<!-- Native, standards-compliant HTML -->
<label for="username">Username</label>
<div class="profile-card" tabindex="0"></div>
стае такім у JSX. Таксама зверніце ўвагу, што tabIndex прымае выраз у вигляді числа, а не строку:
// JSX equivalents forced by JavaScript engine constraints
<label htmlFor="username">Username</label>
<div className="profile-card" tabIndex={0}></div>
Чутлівасць да роўнагубства і об’екты стылю
Імены атрыбутаў HTML не чулівыя да розліку на великі і маленькі літеры, тады як пропы JSX чулівыя і зазвычай пішучыся у формате camelCased: onClick, strokeWidth, autoComplete, tabIndex. Адна парадксальная тэза: атрыбуты aria-* і data-* ўтыкаюць у гэта правіла і залишаюцься зі своімі іменамі, ў якіх є дашчокі, у JSX; таму aria-label пішыцца абсолютна так сама, як і ў HTML.
Внутрашні стылі зменяюцца болей фундаментальна. У HTML стыл — це звычайны рэчэнак, які браузер парсуе:
<!-- HTML: Zero runtime allocation -->
<div style="background-color: red; margin-top: 10px;"></div>
У JSX жа это ёсць об’ект у формате JavaScript literal, і такі literal, які пішыты ў рэзультате render, ствараецца занова ў кожны раз, калі компонент render’уецца:
// JSX: Allocates a new JavaScript object on every single render pass
<div style={{ backgroundColor: 'red', marginTop: '10px' }} />
Для большінства компонентаў гэта ўзято за малое. У тых компонентах, які перерандаруюцца дужа часта, такіх як великі сіткі дадзэнняў або накладанні на канвас, кераваныя пэйнтаром, тысячі короткага жыцця об’ектаў стылю ствараюць трыбу на збір смеття, якая можа выражацца ў паузах у роботе. Вынесенне статычных об’ектаў стылю за межы компонента або вжытак імен класаў дапамагае ухіліцца ад гэтага.
Строгія правіла закрыцьця
HTML5 свядома дазволяе элементы без значэння без заканчоўных слэшаў: <input>, <img>, <br> і <hr> ўсе ўважаюцца правільнымі у такой форме. JSX ж, навпако, следуе правілам XML. Якщо забыць про самазаканчоўны слэш або заканчоўную тагу, компілятор зупініцца з памылкай синтаксісу, таму процес будавання завершыцца неудачаю, а не з працягванням роботы.
Вартасць пад час выканання: натыўнае парсаванне проты віртуальнага DOM
Калі браузер прыме HTML, ён токэнаізуе байты па ўзьяве і поступова стварае вузлы DOM, выкарыстоўваючы натыўны код, які розвиваўся гадзінамі, а таксама дапамагаючыся сканерам прадзяйснення завантажэння ресурсаў заздалегідь, які выявляе іх рана. Калі прыкладненне адрасаваецца выключна через JSX, гэты натыўны падход здзейчай абходзіцца, і выкарыстоўваецца выконанне JavaScript:
Standard HTML Processing:
Network Bytes ──> Tokenizer ──> DOM Tree ──> Render Tree ──> Paint
JSX / Virtual DOM Processing:
Network Bytes ──> JS Parse/Compile ──> JS Execution ──> Component Tree
──> VDOM Allocation ──> VDOM Diffing (Reconciliation)
──> DOM Patching ──> Render Tree ──> Paint
Памяць і збір сметлів
Для вычыслення змян React зберагае опис UI ў памяці JavaScript, які зазвычай называецца вяртуюю DOM. Цей цыкл працуе приблізна так:
- Пад час першага адрасавання ствараецца дрэва об’ектаў JavaScript, якія описваюць кожны элемент, яго атрыбуты і дзецячыя елементы.
- Калі зменяецца стан, афектаваныя компоненты запускаюцца знову і ствараюць новы опис свайго часткі дрэва.
Заўважыце, што React перзапрацоўвае толькі паддрэсло компонента, стан якога змяніўся, а не всю прыемлівачку, але прынцып застаецца тым жа: прыемлівач ужо зберагае рэальны DOM у свайм внутранім памяці, а каша JavaScript таксама зберагае яго паралельную версію. Гэта дадатковая адзначка паўышае вікорыстоўванне памяці і частоту збіркі сметлі, што ўсё бол выражна прыглядзецца на мобільных прыстроях з низкімі характэрыстыкамі.
Косты гідратацыі
Рэндарынг з бакульнай стороны ў фрэймворках такіх як Next.js або Remix выдае справжні HTML, таму першая нарадзіцца картынка падае быстра. Аднак прытым, перш чым сторанка адпавядае на ввод, браузер павінен завантажыць JavaScript для компонентаў на яй, выконаць іх, перабудаваць внутранюе дрэва React і прыўязаць обрабнікі змаганняў да існуючага DOM. Шэг гідратацыі займае галоўную ніт, і на важкіх сторанках гэта выражаецца ў высокім показніку Total Blocking Time (TBT) і низкім рэйтынгу Interaction to Next Paint (INP).
Стрімаванне і толерантнасць да бядаў
HTML быў разрабоўваны на аднойчыні з двумя прынцыпамі, якія часта падрыхтавляюць додаткі з JSX: поступовае стрімаванне і толерантнасць да бядаў.
Калі стрімаванне зникае
Браузер пачаткае адрасаваць дакумент прытаму, калі ён яшчэ не завершыў загрузку. Падазроумцем, сервер даў уже <head> плюс 50 КБ з 200 КБ стораніцы; браузер можа ўжо запрашваць шаблоны стылю і фонты, а таксама адрасаваць заголовак і навігацыю, пакуль рэшта ўсё яшчэ перавозится.
Аплікацыя на JSX, якая адрасаваецца выключна на стороне кліента, працюе інакш:
- браузер прыме практычна порожнюе тэло, якое містіць толькі
<div id="root"></div> - ён загружае пакет JavaScript
- ён парсуе і выкананае гэты пакет
- компоненты запускаюцца, ствараюць DOM і нарэшце адражоўваюць контент
На медленным з’єднанні 3G або слабкаму тэлефоне корыстнік бачыць порожняю стораніцу пры весьму гэтым процесе. Гэта ўсё, з чым браузер можа працаваць спачатку:
<!-- What the browser sees initially in a standard JSX SPA -->
<!DOCTYPE html>
<html>
<head>
<title>App</title>
</head>
<body>
<div id="root"></div>
<script src="/static/bundle.8f9b2c.js"></script>
</body>
</html>
Калі бяспекі больш не існуе
Парсер HTML знаходзіцься пад славой сваёй тольерантнасцю. Падайце яму неякі зламаныя маркапы, напрыклад:
<div>
<p>Unclosed paragraph
<div>Nested incorrectly</b>
</div>
і ён не выключаецца. Алгорытм парсавання закрывае і перенаслаляе элементы па чытко визначаных правілах вярнення і такім чынам адображае ўсё змест.
React значна менш тольерантны пад час выконання. Якщо процес адражэння выклікае памылку, напрыклад тады, калі выраз на кшталт {user.profile.name} намагаецца з’ясаваць атрыбут для undefined, React знімае весь дрэво, калі жаданая межа памылак яе не пераспрыявае, і залишаецца порожній экран. React не прыносіць готовага компонента <ErrorBoundary>; яго трэба напісаць як класовы компонент (альбо використаць маленькую бібліятэку) і разместіць яго спецыяльна навакола рызыковых частэй.
Формы і запускі
HTML-формы з дадзеных часоў пачатку веба адразу ж справляліся з уведаменням дадзеных, ўпэўненнем у ўсуненні бяглых памылак і адправкай дадзеных. Тыповыя шаблоны JSX часта заменяюць гэтыя прымітывы на реалізаціі на JavaScript.
Контролюваныя уведамальнікі проты прымітывных
Звычны <input> зберагае свой сопны стан. Уведзенне дадзеных негаразу апдэйтуе внутранія буферы прыгледача, без участку якога-лібо скрыпту. У той час як стандартны шаблон React прыводзіць уведамальнік у стан контролю, тады стан React стае аднаго з асновных джэрел правды:
// Every keystroke triggers a state change, a re-render, and a VDOM diff
function SearchInput() {
const [value, setValue] = useState("");
return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
Цякож кожны натыск клавішы праходзіць через систему змагання, выконваецца функцыя компонента, пасля чаго значэнне зноў дадаецца ў DOM. Гэта прыемна для маленькага компонента. Калі главны поток зайняты обробкай дадзеных або складным анімацыям, або калі вхідны элемент знаходзіцца ў большай структуре компонентаў, якая перерысовываецца разам з ёю, корыстувачы можаць бачыць, як симвалі з’яўляюцца пасля таго, як яны іх надрукувалі.
Сынтэтычныя змагання
React абгортае натыўныя змагання браузера ў свою сынтэтычную систему змагання, спачатку для усунення неадэкватнасцей між старымі браузерамі. Але такая абстракцыя стварае певныя скрытые проблемы:
- працэс распространення сыгналу через структуру React можа разлічвацца ад распространення через натыўныя слухачы DOM, што ускладнюе напісанне коду, які викорыстоўвае оба падходы
Доступнасць і семантычны зміст
JSX можа ствараць абсалютна доступны, семантычны HTML. Аднак патэрны, якія ён заохочвае, з часам часта паглыбляюць апошнечнасць структуры.
„Супа з div“ ад кампанентных обгортакоў
Кампанент должен вярнуць адны корэневы вузол. Фрагменты (<Fragment> або <>) рашаюць гэтыя проблемы без додатковага DOM, але багато кодавых базаў за прыzwычкай або для форматавання ўсё ж обгортаюць дзецячы элементы ў контейнеры <div>. Структура, якую вы хацелі стварыць, выглядае так:
<!-- What you intended to build -->
<main>
<article>
<h1>Article Title</h1>
<p>Content goes here...</p>
</article>
</main>
Коліквітныя компаненты-обгорткі з часта адраджуюць ўместа, блізкія да гэтаго:
<!-- What JSX component wrapping often generates in the actual DOM -->
<div class="AppWrapper">
<div class="LayoutContainer">
<main>
<div class="ArticleWrapper">
<article>
<div class="HeadingGroup">
<h1>Article Title</h1>
</div>
<div class="ParagraphContainer">
<p>Content goes here...</p>
</div>
</article>
</div>
</main>
</div>
</div>
Дадатковыя шары робяць DOM масівнейшым, ускладняюць распалоўку за дапамой CSS і ствараюць зайвыя перашкоды між ключовымі элементамі. Стандартныя <div>-ы без апісання ролей здарожна ігноруюцца аблігатнымі тэхналогіямі, але дзейні ланцюгі обгортакоў усё раву ускладняюць розуменне маркапа і спрыяюць памылкам, напрыклад, калі обгортак випадкова наражае структуру спісу чы ўзвесці.
Бягаванне клавіатуры, якое ў вас є безкоштовна, пакуль гэта не заканчыцца
Натыўныя інтэрактывныя элементы, такія як <button>, <a>, <select> і <details>, маюць бягаванне, якое часта спрыймаецца за ўсёзначнае:
- па замовчанню яны можна акцэнтуваць па порядку Tab
- клавішы Enter і Space автаматычна ўвядзяюць іх у роботу
Пакалі JSX дазволяе лёгкая прыўязка обрабоўчыка кліку да будзь-каго элемента, як у <div onClick={handleClick}>, команды рэгулярна ствараюць спецыяльныя кантролі з несемантычных элементаў і забываюць пра обрабоўчыкі клавіатуры, tabIndex і ролі ARIA, якія гэтыя натыўныя элементы аддаюць автаматычна. Нашый аптак у скрытыя падступы компонентаў React раскрывае ўсё больш такіх падступоў.
Стандарты, інтэроперабельнасць і залежнасць
HTML — это адаптаваны стандарт, які падтрымвае WHATWG, пры чым W3C історычна таксама быў уключаны. Старонкі, напісаныя ў 1997 годзе, яшчэ працуюць у сучасных браузерах. У працоўнасці з JSX жа немае стандарту веба. У яго є неформальная спэцыфікацыя, і яго падтрымваюць калькі бібліятэкаў, у тым часе як React, Preact і Solid, але кожна ўпэўненасць залежыць ад кампілятора і ад среды выканання, якая викорыстоўваецца пасля кампілявання. Хоць гэта мякшы варіант «заўязкі», чым у прыватным формате, але заўязка ёсць.
Адзінственныя элементы і сэрвісная модель платформы
Браузеры вже маюць сэрвісную модель: Адзінственныя элементы плюс Shadow DOM. Звычайны HTML викорыстоўвае іх безпосередна:
<user-avatar src="avatar.jpg" size="large"></user-avatar>
React історычна паслужаўся адзінственнымі элементамі паслаба, з двух прычын:
- яны перадавалі всі параметры неканацэнным малакасовым тагам як атрыбуты-строкі, таму об’екты і масівы не маглі быць пераданыя як власнасці элемента
new CustomEvent('user-select'), не паўтараюцца ў атрыбуте на кшталт onUserSelect, што вымушвае викорыстоўваць компоненты-обгорткі або ручныя слухачы через refsУ React 19 частка ціх проблем была рашана за счыткам задавання атрыбутаў спецыяльным элементам, калі гэты элемент іх визначае, а таксама за счыткам падтрымкі спецыяльных працоўнікаў з’ядзв; таму пераканайцеся, якая версія React вы викорыстоўваете, перш чым прыпускати, што гэтыя обмежэння яшчэ дыюць.
Переноснасць маркапаў
Систему дизайна, напісаную на стандартным HTML і CSS, можна викорыстоўваць будзь-дзе: у WordPress, Django, Ruby on Rails, шаблонах Go, Vue, Angular, Svelte або проста на статычных сторунках. Система дизайна, напісаная як компоненты JSX, прычалена да екасістэмы JavaScript; ўжыццё яе з не-JavaScript-бэкендам вымагае службы рэндарування Node.js або окраначальнай реалізацыі кожнага компонента.
HTML і JSX падымоўка
Падзея аб’ектыўнасцей:
- Выкананне: HTML аналізуецца натыўна браузерам; JSX кампілюецца у вызванні функцый JavaScript, якія выконваюцца пад час роботы.
- Інструменты: Для HTML патрэбны рэдаггер і браузер; для JSX патрэбны кампілятор, збірач пакетаў, менеджер пакетаў і среда для будавання.
- Сынтаксіс: HTML не чутлівы да розныя веры каляроў і є тольерантны; JSX чутлівы да розныя веры каляроў, выкарыстоўвае перэіменаваныя атрыбуты і выкалічваецца у стылі XML.
- Атрыбутаванне: HTML атрыбуты прадаюцца пасля адзінаго за адным; JSX атрыбуты ператвараюцца пасля кожнага нажатня клавішы.
- Памылкі: HTML можа восстанавіцца пасля некоректнага форматування; неконтрольваная памылка атрыбутавання прыводзіць да знішчэння дрэва React.
- Формы: Натыўныя элементы утримваюць свой стан; контрольваныя элементы ператвараюцца пасля кожнага нажатня клавішы.
Вярнучы тое, што вы загубілі
Нічыга з гэтаго не спрабоўвае пераканаць у абмове развіцці на базе компанентоў. Гэта спраба пераканаць у неабходнасці рашуча выбіраць, дзе абстракцыя ўзмянюець сабе вартасць. Екасыстэма рухаецца самэ гэтым кіраваннем, ствараючы патэрны, якія вярнаюць швальнасць і стойкасць натыўнага HTML, захаваючы ў той жа час декларатывную модель створэння.
Выберыце рэндарыўванне з сервера
- React Server Components рэндаруюцца на сервере і не надаюць JavaScript-код компанентоў кліянту для тых частак, якія не є інтэрактывнымі.
- Astro выкарыстоўвае архітектуру на адзелёных частках: старанна сторункі ўвесь час яўляюцца статычным HTML, а інтэрактывныя віджеты запускаюцца толькі тады, калі гэта неабходна.
- Qwik заменяе прыем падключэння дадзенаў на можлівасць прыпынення та продажу ўработкі, серыязуючы стан прыемленае програмы ў HTML, так што код запускаецца толькі тады, калі корыстнік фактычна ведае з ім взаімаць.
Дазвольце прыгледачу кераваць станам формы
У змену тому, каб кожны натыск клавішы паўтараць у стане, дазвольце натыпнаму элементу <form> зберагаць значэнні і пры надасенні выкарыстоўваць FormData, каб яны былі прынятыя ўвесь час:
// Clean, native, performant HTML-first form submission
function LoginForm() {
function handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.currentTarget);
const email = data.get("email");
// Send payload...
}
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" required />
<button type="submit">Sign In</button>
</form>
);
}
Введанне апошніцца з натыпной швалёнасцю, атрыбут required забезпечвае вбудованую перакананню, а компонент выкарыстоўваецца толькі адназначна, а не па кожны натыск клавішы. Няўзабавныя версіі React будуюць на той жа ідэі з дзеяннямі формы, якія прымаюць FormData безпосередна.
Зберагачце семантыку строгай
Спрыткуйце JSX як спосаб перадзвання сэмантычнага HTML, а не як разрыв на выкарыстоўванне кантэйнераў:
- заменяйце кантэйнеры
<div>на фрагменты (<></>) там, дзе кантэйнер не мае меты стылювання - выкарыстоўвайце вучоныя інтэрактыўныя элементы, такія як
<button>,<dialog>,<details>і<summary>, замест самастайна створаных віджэтаў - адагуйце
eslint-plugin-jsx-a11yу систему непаўзлівай інтеграцыі, каб абсэнцыя атрыбутаў, ролей і прыемнікаў клавіатуры спакусвала аббіект на будове
Заключанне
JSX змяніў розробку фронт-энда, паказавшы, што інтарфейсы найкраща описваюцца як прыгадуемыя функцыі даных, і ён рашыў рэальныя проблемы з падтрымкай велікіх, дынамічных інтерфейсаў у синхроназе з станам. Ён застаёцца абстракцыяй JavaScript, а не новай версіяю HTML. Выбіраючы яго, вы меняеце натыўны стрімінг, можлівасць стварэння контента без спецыяльных інструментаў, стойкасць да памылак і дуггастручную стабільнасць стандартоў на корыст кампозіцыі та рэактыўнай эрганомікі. Часта гэта є правильны выбар. Инжынерныя навыкі заключаюцца у тым, каб точна ведаць, што вы меняеце, і ў тым, каб у разлічных ситуацыях вжываць серверную рэндарынацыю, натыўныя формы та семантычныя элементы, калі толькі можна безкоштовна адзначыць гэтыя можлівасці.
Спадневанае чытанне
- REST vs GraphQL: The Real Trade-Offs Behind Each Architecture — Якраз тут адміністрацыя пасправядлівае пра конкрэтныя проблемы, якія рашуюць REST і GraphQL, их внутрэшнюія механізмы, а таксама захаваныя компромісы, якія трэба взяць у ўвагу пры выборе аднаго з іх для вашай API.
- Ten Hidden React Component Pitfalls That Slow Down Modern Apps — У гэтым артыкуле рассказваецца пра дзесять распашчытых падазроў на компоненты React — ад недастатка семантычнага HTML да відсутнасці мемоізацыі — і пра способы, якія неабходны, каб програмы застаўаліся швайнарамі, доступнымі і без бягоў у 2026 годзе.