English for Preact Developers

Розмови Preact зосереджені на розмірі пакету і рівні сумісності, який дозволяє командам повторно використовувати екосистему React, тому словник повинен охоплювати як питання продуктивності, так і практичні питання міграції, які він піднімає.

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

Preact/compat — сумісність, яка відображає поверхню API React на менше ядро Preact, дозволяючи багатьом бібліотекам React працювати без змін проти Preact замість цього. “Більшість наших компонентів бібліотеки працювали відразу, тому що preact/compat покриває React API, які ми насправді використовуємо — нам потрібно було лише залатати два краї.”

Bundle size budget — цільовий обсяг JavaScript, що відправляється клієнту, часто основний мотив для вибору Preact замість React на сторінках, що вимагають високої продуктивності. “Наша оцінка розміру пакету для сторінки призначення становить 50 кБ зі стисненням gzipped, що виключає React, але залишає достатньо місця для Preact.”

** Алгоритм відмінності ** — внутрішня логіка, яку Preact використовує для порівняння віртуальних дерев DOM і застосування мінімальних реальних оновлень DOM, менших і простіших, ніж у React, але функціонально еквівалентних для більшості випадків використання. “Алгоритм розрізнення навмисно простіший, ніж архітектура волокон React — саме звідси і походить економія розміру.”

** Aliasing ** — налаштування пакету для заміни імпортів react і react-dom пакунком Preact compat під час збирання, без дотику до початкового коду. “Ми не переписували жодних імпортів — псевдонімування react на preact/compat у конфігурації Vite було цілою міграцією для більшості пакунків.”

** Невідповідність гідрації ** — розбіжність між розміткою, відтвореною сервером, і тим, що Preact відтворює на клієнті, що може виглядати по-іншому, ніж у React, через незначні відмінності в логіці примирення.

• “Невідповідність гідрації з’ явилася тільки в Preact, а не React, через різницю часу запуску ефектів на першій фарбі.” *

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

• «Чи наш бюджет розміру пакету дійсно виправдовує перехід на Preact, або ж витрати React не є в’язким місцем тут?»
• Чи є preact/compat, що покриває все, що потрібно цій бібліотеці, або ми збираємося вдарити не підтримуваний API?
• Чи можемо ми реагувати на псевдонім, щоб передбачити / компатувати для цього одного маршруту, не впливаючи на решту програми? ”
• Чи є ця невідповідність гідрації специфічною для алгоритму розділення Preact, або це відбувається і в React?
• «Скільки з нашого успіху в продуктивності насправді є Preact, порівняно з іншими змінами, які ми зробили в той же час?»

Приклади висловлювань

Обґрунтування вибору системи для команди: “Ми пропонуємо Preact для віджета замовлення, особливо через бюджет розміру пакету — кожен кілобайт впливає на конвертацію на повільних з’ єднаннях.”

Перегляд PR міграції: “Confirm preact/compat обробляє використання цього компонента forwardRef перед злиття — це єдиний API, де я бачив прогалини.”

Зневадження проблеми відтворення: “Це схоже на невідповідність гідрації, пов’ язану з алгоритмом розрізнення Preact — перевірте, чи сервер і клієнт створюють ідентичну початкову розмітку.”

Професійні поради

• Ведіть з ** бюджетом розміру пакету ** при запропонуванні Preact - це конкретне, вимірюване обґрунтування, яке зацікавлені сторони можуть оцінити, а не нечітке твердження про продуктивність.
• Назва preact/compat особливо важлива при обговоренні ризику міграції — вона говорить переглядачеві, який саме шар сумісності аудитувати.
• Використовуйте aliasing для опису інкрементальних міграцій — це сигналізує, що ви не пропонуєте перезапис, а лише заміну під час збирання.
• Позначати проблеми ** гідрування невідповідності ** як специфічні для фреймворку, якщо вони є — об’ єднання їх з загальними вадами SSR сповільнює зневадження.

Практичні вправи

1. Поясніть співробітнику команди, чому жорсткий бюджет розміру пакету може виправдати вибір Preact замість React.
2. Описати, що робить preact/compat і чому він не гарантує, що кожна бібліотека React працює без змін.
3. Напишіть речення, в якому пропонується реакція псевдоніму на попереднє/ сумісне для одного маршруту як випробування низького ризику.

На практиці: Навігація Nuance в віддаленій команді

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

Поширений сценарій включає коментар перегляду коду. Уявіть, що ви отримали повідомлення: « Це не працює ». Хоча це технічно правильно, воно не надає розробнику ніякої корисної інформації. Більш конструктивна відповідь, що відображає професійну англійську, буде: «Компонент не відображається правильно на мобільних пристроях. Чи можете ви, будь ласка, розглянути проблему з адаптивним стилем і переконатися, що використовується належне керування станом? Додати команду журналу консолі до функції відтворення може допомогти визначити джерело проблеми. » Зауважте використання точної мови — « відтворення », « адаптивний стиль », « керування станом » — термінів, які демонструють розуміння технічних проблем, які лежать в основі цього. Аналогічно, повідомлення Slack повинні уникати нечітких скарг на кшталт «Це пошкоджено!» Замість цього спробуйте: «Я зустрічаю помилку 404 при спробі отримати доступ до кінцевої точки /api/users. Я перевірив журнали сервера і виявив, що маршрут не налаштовано належним чином. Чи можемо ми переглянути інтеграцію API?»

Іншою ключовою областю є створення описів запитів на завантаження. Коротке резюме, наприклад, « Виправлена помилка », не підійде для PR, який може бути переглянутий кимось, хто не знайомий з кодовою базою. Замість цього, надайте контекст: « Розв’ язано проблему # 123 — Неправильне відображення зображення профілю користувача на великих екранах. Впроваджено адаптивний стиль за допомогою CSS- запитів для забезпечення послідовного відтворення на різних роздільна здатність пристроїв. Додано тести одиниць для перевірки правильного масштабування зображення і резервних механізмів.» Цей рівень деталізації показує ретельність і надає змогу переглядачам швидко оцінити зміни.

Нарешті, пам’ ятайте, що англійська мова в технічному контексті часто вимагає від вас чітко вказати * чому * щось було зроблено, а не просто * що * було зроблено. Це зменшує неоднозначність і полегшує майбутнє обслуговування. Розгляньте використання інструментів, таких як Preact’s useContext hook - опис його мети як “Надання централізованого сховища для даних у всьому застосунку” є більш ефективним, ніж просто заява “Використовується useContext.”

Ось приклад використання preact-cli для створення нового проекту з деякими основними налаштуваннями:

preact create my-app --template preact/typescript
cd my-app
npm install
preact start