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

Remix має інший підхід до повного веб-розробки — він нахиляється до веб-фундаментів, таких як HTTP, форми і прогресивне поліпшення, а не ховає їх за абстракціями. Ця унікальна філософія вводить набір термінів, яких ви не знайдете у документації React або Next.js, і знати, як правильно використовувати ці терміни англійською, є важливим, коли ви працюєте з міжнародною командою. Цей посібник містить словник, до якого розробники Remix звертаються найчастіше, з прикладами, взятими з реальних коментарів перегляду коду, оновленнями, які можна зробити самостійно, і реченнями з документації.

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

Зарядник Завантажувач є експортованою функцією loader у файлі маршруту, який запускається на сервері перед відтворенням сторінки, отримуючи дані, які потрібні компоненту, і повертаючи їх через гачок useLoaderData.

• Приклад: « Завантажувач отримує команди користувача з бази даних і передає їх компоненту — не потрібно отримання з боку клієнта. » *

Акція Дія є експортованою функцією action у файлі маршруту, яка обробляє не- GET запити (зазвичай, подачі форм), обробляє мутації на сервері, а потім перенаправляє або повертає відповідь.

• Приклад: « Дія вилучення вилучає запис з бази даних і перенаправляє вас назад на сторінку списку з повідомленням про успіх ». *

** Вкладений маршрут ** Вбудований маршрут є дочірнім маршрутом, компонент якого відображається всередині батьківського маршруту <Outlet />, що дозволяє різним сегментам URL контролювати різні частини інтерфейсу користувача одночасно.

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

• Вийти Знак <Outlet /> — це компонент Remix, який ви розташовуєте у батьківському розкладці, щоб позначити місце, де слід відтворювати дочірні компоненти маршруту.

• Приклад: « Розкладка панелі приладів має постійну панель навігації і <Outlet /> під нею, де відображається кожна підсторінка. » *

** Межа помилки ** Межа помилок у Remix — це експортований компонент ErrorBoundary у файлі маршруту, який ловить помилки, викинуті в завантажувачі, дії або компоненті, і відображає резервний інтерфейс користувача замість аварійного завершення роботи сторінки.

• Приклад: « Я додав межу помилки до маршруту продукту, щоб відсутній SKU показував повідомлення, а не порожній екран. » *

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

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

** Метафункція ** Метафункція є експортованою функцією meta у файлі маршруту, яка повертає <title>, <meta description> та інші заголовні тег для цієї конкретної сторінки, що дозволяє контролювати SEO за маршрутом.

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

• Відкладено defer є утилітою Remix, яка дозволяє завантажувачу повертати деякі дані негайно, потім поступово передавати повільніші дані клієнту, в парі з <Await /> і <Suspense> в компоненті.

• Приклад: « Я скористався defer, щоб сторінка відображалася негайно з основним вмістом, а рекомендації завантажувалися у фоновому режимі. » *

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

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

• «Це завантаження даних належить завантажувачу — зберігайте компонент без викликів useEffect.»
• «Дія повинна перенаправляти після успішної мутації; повернення null без перенаправлення може призвести до дублювання поданих даних при оновленні»
• “Чи можемо ми витягнути це в ресурсний маршрут? Компонент не повинен відтворювати нічого — це просто кінцева точка API»

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

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

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

• «Кожен маршрут, який отримує дані, повинен експортувати функцію loader; компонент отримує ці дані через useLoaderData().»
• «Подання форм обробляються функцією маршруту action — не потрібні нетипові кінцеві точки API або виклики fetch»
• «Для додавання мета-тегів, специфічних для сторінки, експортуйте функцію meta з файлу маршруту і поверніть масив об’єктів тега»

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

** Сказати « Я вставляю дані для отримання у компонент » ** — у Remix, отримання даних має бути у завантажувачі, а не у компоненті. Ця фраза сигналізує про анти-патерн. Виправлено: « Я пересунув отримання даних до завантажувача, тому компонент просто споживає дані з useLoaderData.»

** Сказати « форма надсилає до API » ** — форми Remix надсилають до власної дії маршруту, а не до окремого маршруту API. Відмінність має значення архітектурно. Виправлення: « Форма надсилає повідомлення до цієї дії маршруту, яка обробляє мутацію на стороні сервера і перенаправляє на успіх. »

** Сказати « Я додав сторінку для звантаження » ** — якщо у цій сторінці немає інтерфейсу користувача, це * шлях до ресурсу *, а не сторінка. Використання правильного терміну уникає плутанини у обговореннях команди. Виправлення: «Я створив ресурсний маршрут на /downloads/$fileId, який передає файл з завантажувача.»

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

Term	How to use it
loader	”Export a loader to fetch data on the server before the page renders.”
action	”The action handles the form submission and redirects on success.”
nested route	”Create a nested route so the sidebar persists across all child pages.”
error boundary	”Add an ErrorBoundary export to gracefully handle loader errors.”
resource route	”Use a resource route to return JSON or a file without rendering HTML.”
defer	”Wrap slow data in defer so the page loads immediately.”

Національний інститут стандартів: Англійська мова для офіційних осіб

Розробка реміксів вже є складною — жонглювання концепціями, такими як серверні компоненти, гідрація, адаптери і вкладені маршрути, може бути приголомшливим. Але навіть за межами технічних особливостей, ефективне спілкування з вашою командою відшліфованою, професійною англійською мовою є ключовим для співпраці, перегляду коду і, врешті-решт, успішного виконання проекту. Для не-рідних носіїв, це часто означає боротьбу не тільки з словником веб-розробки, але і тонкими нюансами того, як досвідчені розробники обговорюють рішення про дизайн, потенційні проблеми і запропоновані рішення. Це про те, щоб перейти від простого зауваження * що * ви зробили до пояснення * чому * і розгляду альтернативних підходів.

Однією з поширених областей труднощів є формулювання зворотнього зв’язку в контексті перегляду коду. Отримати коментар на кшталт “Це могло б бути більш продуктивним” не є негативним, але доставка має значення. Корисною відповіддю може бути: « Я помітив, що виклик fetch тут робить декілька запитів до сервера. Ми могли б зменшити це, розподіляючи ці операції або використовуючи стратегію кешування – чи ви розглядали можливість використання stale-while-revalidate в нашому адаптері? “Це демонструє розуміння проблеми і пропонує конкретну пропозицію, а не просто вказує на проблему. Аналогічно, при написанні описів PR, ясність є найважливішою. Уникайте нечітких тверджень на зразок « Виправлено помилку ». Замість цього, створюйте речення, які чітко описують проблему, ваше рішення і вплив на користувача: « Виправлено проблему, коли користувачі періодично отримували 500 помилок під час надсилання форми через неправильну перевірку даних; реалізовано надійну обробку помилок і очищення вводу, як це описано у документі з розробки »

Іншим частим викликом є обговорення технічних компромісів. Гнучкість Remix дозволяє застосовувати декілька підходів, і розробникам потрібно чітко сформулювати свої аргументи, коли вони виступають за певне рішення. Наприклад, пояснення того, чому ви обираєте певний адаптер, а не інший, вимагає більше, ніж простого повідомлення « Я використовував адаптер file ». Ви можете сказати: « Ми обирали адаптер file для цього проекту, оскільки він оптимізує інтеграцію з нашим існуючим конвеєром активів і зменшує витрати на обробку на сервері — він краще відповідає нашим цілям швидкодії ». Це показує, що ви зважили всі переваги і недоліки.

І, нарешті, не бійтеся задати прояснюючі питання! Просте, добре сформоване запитання на зразок « Чи можете ви розкрити логіку використання серверного компонента тут? » може запобігти нерозумінням і забезпечити, щоб всі були врівноважені. Пам’ятайте, професійне спілкування не про те, щоб бути ідеальним; це про створення середовища відкритого діалогу і спільного розуміння.

# Example: Using `remix evaluate` to check for potential issues with hydration

remix evaluate --config ./config.json my-app/src/routes/+page.js