English for Svelte Developers

Справа Svelte для команд полягає у тому, що вона переносить роботу з браузера на компілятор, і що рамкування постійно з’ являється у тому, як розробники говорять про це — « скомпільовано», « немає віртуального DOM », « реактивний за замовчуванням ». Зрозумівши цей словник, вам буде набагато легше пояснити компроміси Svelte команді, яка оцінює його, або переглянути PR Svelte точно, а не нечітко.

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

** Компілятор (швидкий компілятор) ** Інструмент збирання, який перетворює файли компонентів Svelte на оптимізовані, вільні від фреймворків файли JavaScript, замість того, щоб надсилати бібліотеку часу виконання, яка інтерпретує компоненти у переглядачі. Приклад: “Більшість того, що здається магією фреймворку, насправді відбувається під час компіляції — компілятор генерує простий код оновлення DOM, тому є дуже мало часу виконання.”

** Реактивність ** Механізм, за допомогою якого інтерфейс користувача автоматично оновлюється, якщо змінюються дані, від яких він залежить, без вручну викликаного розробником перевідтворення.

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

Руна Символи $state, $derived, і $effect, введені в Svelte 5, які роблять реактивні декларації явними в коді, замінюючи старий неявний реактивний синтаксис. Приклад: “Ми обгорнули це значення в $state, тому система рун відстежує його явно, замість того, щоб покладатися на стару неявну реактивність, яку було легко пропустити в перегляді.”

• Склад Специфічний для Svelte об’ єкт для утримання реактивного стану, який потрібно спільно використовувати у багатьох компонентах, що показує метод subscribe, з якого компоненти можуть реактивно читати.

• Приклад: « Ми пересунули сеанс користувача у сховище з можливістю запису, щоб будь- який компонент міг підписатися на нього без просування його через п’ ять шарів. » *

• Просто скажи Дані, передані до компонента Svelte з його батьківського компонента, явно оголошуються у верхній частині компонента і використовуються у такий самий спосіб, незалежно від того, на скільки шарів глибше розташовано компонент.

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

• Спілкіт Офіційний фреймворк програми, побудований на Svelte, що забезпечує маршрутизацію, відтворення на стороні сервера і інструменти збирання, порівнянні з тим, що Next.js забезпечує для React. Приклад: “Ми пересуємо завантаження даних цього маршруту до функції SvelteKit load, щоб вона запускалася на сервері до відтворення сторінки.”

Гідратируйся Процес, за допомогою якого сторінка, відтворена сервером, стає інтерактивною у переглядачі, додаючи до вже відтвореного HTML- коду програми слухання подій і реактивну поведінку. Приклад: «Кнопка ще не відповідає на клацання, оскільки гідрування не завершено — HTML є, але JavaScript не приєднав своїх слухачів.»

** Без віртуального DOM ** Опис підходу Svelte до створення прямих, цільових інструкцій оновлення DOM під час компіляції, замість відхилення віртуального представлення інтерфейсу користувача під час виконання, як це робить React. Приклад: “Оскільки тут немає віртуального DOM, компілятор вже знає точно, який вузол DOM оновити, коли це значення змінюється — немає кроку відмінності.”

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

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

• «Це реактивне твердження має побічну дію, яка не очевидна з його читання — чи можемо ми зробити залежність явною з руною замість цього?»
• «Ми мутуємо цей масив на місці, що не викликає реактивності так, як ви очікуєте — давайте перепризначимо його замість цього»
• «Це сховище експортує безпосередньо і будь-який компонент може записувати в нього, що робить зміни стану важко відстежити — чи повинні ми виставити більш контрольовану функцію оновлення замість цього?»

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

• “Вчора я мігрував реактивні вирази цього компонента до нового синтаксису руни; сьогодні я тестую, що похідні значення все ще оновлюються правильно.”
• «Я заблокований на невідповідності гідрації — відтворена сервером розмітка не збігається з тим, що клієнт відтворює на першій фарбі»
• «Я закінчив переміщення спільного стану кошика в магазин, тому нам більше не потрібно передавати його через чотири шари компонентів»

** У обговореннях архітектури: **

• “Оскільки тут немає віртуальної DOM-надмірності, Svelte має тенденцію виробляти менші пакунки і швидше початкове відтворення для такого роду сторінок з великим вмістом.”
• «Функція load від VelteKit за замовчуванням запускається на сервері, що саме те, що нам потрібно, щоб уникнути відкриття цього API-ключа клієнту»
• «Компілятор ловить багато помилок реактивності під час збирання, які ви б виявили тільки під час виконання в деяких інших фреймворках»

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

Скажите “это просто быстрее” без уточнения почему. Замість цього скажіть: « компілятор передає менше коду під час виконання і пропускає крок віртуального порівняння DOM » — це насправді пояснює, звідки походить різниця у продуктивності, що має значення, коли хтось запитує вас про виправдання вибору фрейму.

Скажите “реактивность сломалась” для мутационного клопа. Замість цього скажіть: «ми мутували масив на місці замість перепризначення його, тому реактивність не викликала» — це специфічна, добре відома Svelte gotcha, і назвати її точно вказує прямо на виправлення.

Сказав “магазин”, ніби є тільки один вид. Svelte має сховища, які можна записувати, читати і похідні, кожен з різним призначенням. Замість цього скажіть: «ми повинні використовувати похідний магазин тут, оскільки це значення обчислюється з іншого магазину, а не те, що ми встановлюємо безпосередньо»

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

Term	How to use it
compiler	”Most of the optimization happens at compile time, not runtime.”
reactivity	”Reassigning the variable triggers reactivity automatically.”
rune	”We use $state and $derived runes to make reactivity explicit.”
store	”Shared state lives in a writable store components can subscribe to.”
SvelteKit	”The SvelteKit load function fetches data on the server.”
hydration	”The mismatch happens between server-rendered and client-rendered markup.”

Ключеві моменти

• Поясніть історію продуктивності Svelte конкретно — без віртуального DOM, оптимізації часу компіляції — а не нечітке «це швидше»
• Знайте різницю між неявними реактивними командами і явними рунами, оскільки це важлива тема для переходу будь- якої команди, що використовує Svelte 5.
• Розрізняти сховища з можливістю запису, читання і похідні сховища за їх призначенням, а не лише за назвою.
• Називайте помилки з мутацією на місці саме як проблеми з реактивністю, оскільки це одна з найпоширеніших помилок, властивих Svelte.
• Описати функцію load SvelteKit чітко, коли обговорюється, де має відбутися отримання конфіденційних даних — типово на стороні сервера.

Професійна англійська мова: навчальний посібник для студентів

Ядро того, щоб стати досвідченим розробником Svelte, не тільки в тому, щоб знати, як писати теги <script>. Це ефективне спілкування - пояснення вашого коду, розуміння зворотнього зв’язку, співпраця з колегами і документування вашої роботи. Цей запис у блогу присвячено технічному словникові, що стосується реактивності, компіляції, зберігання і рун у екосистемі Svelte. Однак для розробників, чия перша мова не є англійською, навігація в цих розмовах може бути особливо складною. Це не просто переклад слів; це розуміння * нюансів * професійного спілкування, тонких способів передачі ідей, і точної фрази, яка будує довіру і ясність в команді розробників.

Розглянемо деякі звичайні сценарії. Отримавши коментар перегляду коду, наприклад, « Цей компонент може отримати користь від використання більш явного реактивного оголошення », не просто заявляєте про переваги. Це спонукає вас обґрунтувати * чому * ваш поточний підхід може не бути ідеальним, і запропонувати альтернативу, яка відповідає принципам реактивності Свелте. Аналогічно, коли ви пишете опис запитів на захоплення, вам потрібно сформулювати * проблему *, яку ви вирішуєте, * рішення *, яке ви реалізували, і як воно інтегрується з існуючою функціональністю. Використання надмірно спрощеної мови або нездатність чітко пояснити ваші аргументи призведе лише до плутанини і затримок. Ключовим є створення словника, який дозволить вам впевнено і точніше виражати технічні поняття.

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

І, нарешті, не бійтеся просити про пояснення. Краще визнати, що ти чогось не розумієш, ніж робити припущення, які можуть призвести до помилок. Фрази на кшталт «Чи можете ви розібратися, що ви маєте на увазі під «незмінністю» в цьому контексті?» або «Чи можете ви дати мені приклад того, як використовується цей магазин?» є цілком прийнятними і демонструють активний підхід до навчання.

# Example using `svelte-kit build` to optimize a project:
npx svelte-kit build --optimize true

Ця команда використовує прапорець --optimize true з командою svelte-kit build, яка наказує процесу збирання SvelteKit виконувати оптимізації, такі як мінімізація файлів JavaScript і CSS, і, можливо, дерево не використовуваного коду. Вивідною даною цієї команди буде готовий до використання пакунок, оптимізований для швидкодії.