Англійська для розробників SvelteKit

Система маршрутизації SvelteKit на основі файлів використовує характерний набір конвенцій — +page.svelte, +layout.svelte, +page.server.ts — і ці імена можуть бути заплутаними, щоб сказати вголос англійською, особливо під час перегляду коду або перегляду коду. Крім конвенцій іменування, SvelteKit вводить такі поняття, як завантажувальні функції тільки для сервера, дії форм і гачок handle, які вимагають точного словника, щоб обговорити їх чітко. Цей посібник надає вам мову, яка потрібна для того, щоб говорити про SvelteKit з вашою командою англійською мовою.

Ключовий словник

** Завантажити функцію ** Функція завантаження є експортованою функцією load у файлі +page.ts, +page.server.ts або +layout.server.ts, яка отримує або готує дані перед відтворенням сторінки або макету, повертаючи об’єкт, який компонент отримує як data.

• Приклад: « Функція завантаження отримує запис блогу з бази даних і повертає його — компонент просто відтворює те, що він отримує. » *

** Функція завантаження сервера ** Функція завантаження сервера є функцією load всередині файлу +page.server.ts, який запускається виключно на сервері, надаючи йому доступ до приватних змінних середовища, баз даних і куки, які ніколи не повинні бути відкриті для браузера.

• Приклад: « Я пересунув виклик ключа API у функцію завантаження сервера, тому секрет ніколи не досягає пакету клієнта. » *

** Розклад ** Файл +layout.svelte визначає спільний обгортаючий інтерфейс користувача — навігацію, бічні панелі, нижні колонтитули — який зберігається навколо всіх дочірніх маршрутів у тому ж каталозі, з <slot />, де вставляється вміст дочірньої сторінки.

• Приклад: « Розкладка панелі приладів обгортає кожну сторінку у групі маршрутів /dashboard бічною панеллю і заголовком. » *

** Сторінка помилки ** Файл +error.svelte є компонентом, який SvelteKit автоматично відтворює, коли функція завантаження викидає помилку або викликає error(), замінюючи звичайну сторінку резервним інтерфейсом користувача, обсяг якого відповідає цьому рівню маршруту.

• Приклад: « Я додав +error.svelte до каталогу блогу, тому відсутній запис показує повідомлення про помилку 404 замість глобальної сторінки помилок. » *

** SSR (відтворення на стороні сервера) ** SSR означає, що HTML- код сторінки буде створено на сервері для кожного запиту, що дасть змогу переглядачеві негайно отримати повністю відтворену розмітку; SvelteKit типово використовує SSR, але ви можете вимкнути його для кожного маршруту, якщо ви бажаєте статичного або тільки клієнтського виводу. Приклад: “Ми зберігаємо SSR увімкненим на сторінках продукту для SEO, але інтерактивний конфігуратор є тільки CSR, тому що його не потрібно індексувати.”

** Дія форми ** Дія форми є експортованим об’ єктом actions у файлі +page.server.ts, який обробляє подачу форм POST на стороні сервера, повертаючи дані про успіх або помилки перевірки назад на сторінку без повного перенаправлення.

• Приклад: « Форма контакту використовує дію форми — при невдалому перевірці вона повертає помилки і перевідтворює форму зі збереженими введеними даними користувача. » *

Крюк для рукоятки Гачок handle є функцією, експортованою з src/hooks.server.ts, яка перехоплює кожен вхідний запит перед тим, як він досягне маршруту, зазвичай використовується для автентифікації, завантаження сеансу або нетипових заголовків відповідей.

• Приклад: « Ми додали сеанс користувача до event.locals всередині hook handle, щоб кожна завантажувальна функція могла отримати доступ до нього без повторення перевірки автентичності. »*

** Передвиконання ** Попереднє відтворення — це параметр збирання SvelteKit, який генерує статичний HTML для маршруту один раз під час збирання, а не на кожному запиті, що призводить до швидкого надсилання з CDN без необхідності використання сервера під час виконання.

• Приклад: « Сторінка про сайт і всі статті блогу попередньо відтворені — це лише статичні файли, які надаються з CDN. »*

Звичайні фрази

** В обзорах коду: **

• «Суб’єктивні дані повинні йти в завантажувальній функції сервера, а не в спільному +page.ts — вони будуть викладені в клієнтовому пакеті в іншому випадку»
• «Ця логіка дублюється через три завантажувальні функції; чи можемо ми підняти її до кореня +layout.server.ts і отримати доступ до неї через parent()?»
• «Handle hook є правильним місцем для перевірки сеансу — не всередині кожної окремої завантажувальної функції.»

В стоячих позах:

• «Я налаштовую handle hook сьогодні, щоб завантажити сеанс користувача і приєднати його до event.locals.»
• «Завершено дії форми для сторінки налаштувань — помилки перевірки повертаються в рядку без перенаправлення.»
• «Заблоковано на попередньому відтворенні — деякі сторінки витягують з бази даних, яка не доступна на час збирання, тому мені потрібно вирішити, які маршрути залишаються динамічними»

** У документації: **

• «Поставте спільне завантаження даних в найближчий +layout.server.ts і отримайте доступ до нього з дочірніх завантажувальних функцій через await parent().»
• «Для того, щоб вимкнути SSR для маршруту, експортуйте export const ssr = false з +page.ts.»
• «Дії форми повинні бути в файлі +page.server.ts; вони не доступні в клієнтських файлах +page.ts»

Фрази, яких слід уникати

**Слово « файл сервера » ** — у SvelteKit є декілька файлів сервера ( +page.server.ts, +layout.server.ts, hooks.server.ts ). Завжди використовувати повну назву файла, щоб уникнути неоднозначності. Виправлення: «Я додав виклик бази даних до +page.server.ts, а не до спільного файлу сервера макету»

** Сказати « Я використовував SSR, щоб зробити його швидшим » ** — SSR покращує * початкове сприйняття завантаження сторінки * і * SEO *, а не швидкість. Використання його для обґрунтування прибутків продуктивності є неточним. Виправлення: « Я залишив SSR увімкненим на цій сторінці, щоб пошукові системи отримували повністю відтворений HTML замість порожньої оболонки. »

Слово «Я додав середнє програмне забезпечення» — SvelteKit не використовує слово «середнє програмне забезпечення»; еквівалент — гачок (зокрема, гачок handle в hooks.server.ts ). Виправлення: «Я додав перевірку автентифікації до гачка handle, тому він виконується на кожному запиті перед маршрутизацією»

Краткий справочник

Term	How to use it
load function	”Export a load function from +page.ts to fetch data before rendering.”
server load function	”Use +page.server.ts when the load function needs secrets or database access.”
layout	”Add a +layout.svelte to wrap all routes in this directory with shared UI.”
form action	”Define an actions object in +page.server.ts to handle POST submissions.”
handle hook	”Register session loading in the handle hook in hooks.server.ts.”
prerendering	”Set export const prerender = true to generate a static HTML file at build time.”

Розширює професійний словник

Ядро того, щоб стати досвідченим розробником SvelteKit, це не просто знати, як писати код; це ефективно спілкуватися про цей код. Незалежно від того, співпрацюєте ви з колегами над складною стратегією маршрутизації, пояснюєте складність завантаження функції менш досвідченому колегі або документуєте свою роботу для майбутніх супроводжувачів, чітка і точна англійська мова є абсолютно необхідною. У цьому розділі окремо розглянемо створення вашого професійного словника, пов’ язаного з розробкою SvelteKit, розглянемо нюанси, які часто втрачаються під час перекладу технічних термінів.

Однією з найпоширеніших проблем для носіїв мови, яка не є рідною, є розуміння тонких відмінностей у фразуваннях. Наприклад, сказати «У мене є проблеми з цим» можна інтерпретувати дуже по-різному, ніж «Мені потрібні пояснення щодо…» Останнє звучить більш проактивно і зосереджено на пошуку рішення. Аналогічно, опис змін коду в SvelteKit часто включає використання специфічної термінології - таких термінів як “SSR (Server-Side Rendering)”, “гідрування”, “маршрутні параметри” і “завантажувальні функції”. Просто сказати “це повільно” недостатньо; вам потрібно сформулювати * чому * це повільно, можливо, посилаючись на метрики або вплив на досвід користувача. Коментар перегляду коду не повинен бути просто критикою; він повинен пропонувати конструктивний зворотній зв’ язок з реалізовуваними пропозиціями. Розгляньте таке: замість написання « Це потребує переробки », спробуйте « Чи можемо ми дослідити використання більш модульного підходу для цього компонента, щоб поліпшити підтримку і зменшити потенційне дублювання? » Це демонструє розуміння більшої картини, ніж лише негайна зміна коду. Крім того, важливо звертати увагу на формальну проти неформальної мови. Слабкі розмови часто бувають випадковими, але документація і описи PR вимагають більш високого рівня професіоналізму.

Іншою областю, де багато розробників борються, є формулювання технічних компромісів. Гнучкість SvelteKit дозволяє застосовувати різні підходи - кожен з яких має свої переваги і недоліки. Вміння пояснити * чому * ви обираєте один метод на користь іншого, з посиланням на обставини, пов’ язані з продуктивністю, досвідом розробника або майбутньою масштабованістю, є ключовою навикою. Ви можете сказати: « Хоча використання файла +page.server.js для цього маршруту надає негайні переваги SSR, ми обираємо стандартний підхід до компонентів Svelte, щоб підтримувати простішу базу коду і зменшити витрати, пов’ язані з логікою на стороні сервера. » Це демонструє ретельне розгляд різних факторів.

І, нарешті, не недооцінюйте силу коротких описів. Під час написання описів PR, прагніть до ясності і короткості. Сфокусуйтеся на тому, що ви змінили і чому, а не занурюйтеся у технічні деталі, які не мають відразу ж відношення до перегляду.

# Example: Using svelte-kit dev command

npm run dev -- --host 0.0.0.0