Англійська для астрономічних островів архітектури

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

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

** Острови ** — ізольований, інтерактивний компонент, вбудований у статичну сторінку, який гідрується незалежно від решти сторінки. “Віджет коментарів є єдиним островом на цій сторінці — все інше буде відправлено як простий HTML.”

** Гідраціонування ** — процес додавання поведінки JavaScript до HTML, відтвореного сервером у переглядачі, перетворення статичної розмітки на інтерактивний компонент. “Гідратація відбувається тільки для компонентів, які ми чітко позначимо — Astro не гідратує нічого за замовчуванням.”

** Zero JS за замовчуванням ** — основний принцип Astro, що сторінки не надсилають JavaScript з боку клієнта, якщо компонент явно не запитує його.

• “Зважаючи на нульовий JS за замовчуванням, рейтинг Lighthouse нашого блогу майже не змінився навіть після додавання декількох багатих компонентів.” *

** Директива клієнта ** — атрибут, на зразок client:load, client:idle або client:visible, який повідомляє Astro, коли і як гідрувати певний компонент. “Змінити цю директиву з client:load на client:visible, щоб карусель гідрувала лише після прокрутки у вигляді вікна.”

** Часткова гідрація ** — загальна стратегія гідрації лише певних компонентів на сторінці, а не всієї сторінки, зменшуючи кількість JavaScript, що надсилається до переглядача. “Часткова гідрація є причиною того, чому наші сторінки продуктів завантажуються швидко, навіть якщо віджет оглядів повністю інтерактивний.”

** Server island ** — компонент, який відтворюється на сервері у момент запитів і переноситься на сторінку, створену статично, використовується для персоналізованого або часто змінюваного вмісту.

• “Ми використовували сервер- острів для заголовка « ввійшов як », тому решта сторінки все ще може бути статично кешована.” *

** Framework-agnostic ** — можливість Astro відтворювати компоненти з декількох фреймворків інтерфейсу користувача, таких як React, Vue і Svelte, в рамках одного проекту.

• “Оскільки Astro не залежить від фреймворку, ми зберегли наші існуючі компоненти React, а не переписували їх.” *

** Статичне створення ** — типовий режим відтворення у Astro, за якого сторінки буде створено у вигляді простого HTML під час збирання, а не відтворювати за кожним запитом. “Статичне створення робить наші маркетингові сторінки швидкими і дешевими для хостингу, оскільки немає обчислень сервера на запит.”

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

• Чи цей компонент дійсно повинен бути островом, чи може він залишатися статичним?»
• «Давайте використаємо client:visible тут замість client:load, щоб відкласти гідрацію до того часу, поки вона не буде потрібна»
• «Ця сторінка JavaScript бульйон важче, ніж очікувалося — перевірити, чи кожен острів дійсно потрібно гідрувати.»
• «Ми перенесли цей віджет на серверний острів, оскільки він потребує персоналізації за запитом»
• «Налаштування агностичного рамкового забезпечення дозволяє нам зберігати компоненти проектної системи так, як вони є під час міграції»
• «Часткова гідрація — це вся причина, чому ми обрали Astro, а не повністю клієнтський рендеринг для цього проекту»

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

При поясненні архітектури островів нетехнічним користувачам:

• “Astro завантажує лише ті інтерактивні частини сторінки, які потребують JavaScript, замість завантаження повної програми кожного разу, саме тому наші сторінки завантажуються значно швидше, ніж раніше.” *

Під час створення квитка підтримки: “Компонент, що використовує client:idle, не гідрується в Safari в нашому середовищі тестування, хоча він працює правильно в Chrome і Firefox. Ми долучили мінімальну репродукцію і вивід консолі браузера.”

Під час обговорення архітектури на груповій нараді: “Я б рекомендував аудит кожної директиви client:load в код-базі — деякі з цих компонентів можуть гідрувати на client:visible замість цього, що значно скоротить нашу початкову JavaScript-загрузку.”

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

• Якщо ви обговорюєте Astro, скоріше скажіть **« цей компонент є островом » **, ніж « цей компонент є інтерактивним » — це означатиме, що ви розумієте межі архітектури, а не лише поведінку.
• Під час перегляду PR, запитайте, яку ** директиву клієнта ** було обрано і чому — неправильна директива є поширеним, легко пропущеним джерелом непотрібного JavaScript.
• Використовуйте ** « часткова гідрація » ** як загальний термін у дискусіях щодо архітектури, і зарезервуйте ** « серверний острів » ** спеціально для серверного відтворення, вмісту часу запитів.
• Не скажіть « Astro не підтримує інтерактивність » новачкам — поясніть, що інтерактивність є опцією для кожного компонента, а не відсутньою у фреймворку.

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

1. Напарник з Next.js запитав, чому їхня сторінка Astro майже не містить JavaScript. Напишіть від двох до трьох речень, які пояснять архітектуру островів і відсутність типового JS.
2. Написати одноречення PR для зміни директиви гідрації компонента з client:load на client:idle.
3. Поясніть у одному реченні різницю між островом і островом сервера.

Назва «Астрономія» походить від назви однойменного острова в архіпелазі Астрономічні острови

Основні концепції Astro - директиви гідрації, часткова гідрація і серверні острови - відносно прості для пояснення. Однак, ефективне спілкування в команді розробників вимагає більше, ніж просто знання термінології; це про використання * правильні * фрази і розуміння тонких нюансів, які виникають під час перегляду коду, розмов Slack і описів запитів на витяг. Багато не рідних англомовних людей вважають цю область особливо складною, оскільки прямі переклади часто не враховують очікування і спільну природу професійного розробки програмного забезпечення. Давайте розглянемо декілька типових сценаріїв і те, як до них підходити з ясністю і точністю.

Одним з найчастіших питань є опис змін, пов’язаних з гідратацією. Замість того, щоб просто сказати «Я оновив гідрацію», яка не має контексту, націлюйтеся на щось на зразок: «Я реалізував часткову стратегію гідрації для цього компонента, використовуючи директиву {#hydrated} для оптимізації початкових часів завантаження. Це означає, що інтерфейс користувача буде відтворено статично на сервері, а потім вибірково гідрувати певні елементи у переглядачі лише за потреби. Я додав коментарі в рядку, щоб прояснити логіку і підкреслити, де подальша оптимізація може бути корисною. “Цей підхід чітко говорить * чому * ви робите зміну, яку стратегію ви використовуєте, і запрошує зворотній зв’язок. Аналогічно, обговорюючи серверні острови, уникайте нечітких тверджень; замість цього, сформулюйте аргументацію: «Я переношу цей виклик API на серверний острів, щоб зменшити виконання JavaScript на стороні клієнта і поліпшити ефективність SEO. Налаштування islands забезпечує, що тільки необхідний код виконується на сервері. ”

Інша область, де важлива точність, це коментарі перегляду коду. Замість тупого “Це потрібно виправити”, спробуйте, “Я помітив, що цей компонент гідрує всі елементи. Розгляньте можливість використання директиви {#hydrated} для гідрування тільки інтерактивних частин, що, можливо, поліпшить початкові часи завантаження для користувачів, що переглядають статично створені сторінки.” Конструктивное оформлення зворотнього зв’язку і надання конкретних пропозицій - замість простого вказування на проблему - демонструє професіоналізм і сприяє позитивному співробітницькому середовищу. Пам’ятайте, що філософія Astro - це розумна гідрація; мета - не уникати її повністю, а застосовувати її стратегічно там, де це має найбільший сенс.

Нарешті, описи запитів на завантаження повинні чітко описувати зміни і їх вплив. Не просто перелічуйте зміни коду; поясніть * чому* ці зміни були внесені у зв’ язку з архітектурою Astro. « Ця публікація вводить новий сервер- острів для обробки автентифікації користувача. Налаштування islands тепер включає цей острів, забезпечуючи, що логіка автентифікації працює виключно на сервері, покращуючи безпеку і покращуючи продуктивність, зменшуючи JavaScript на стороні клієнта

Ось приклад того, як ви можете скористатися командою astro islands add у вашому терміналі:

astro islands add --type client --name user-authentication

Ця команда, якщо її виконати у проекті Astro, допоможе автоматично налаштувати та інтегрувати новий сервер- острів для обробки логіки розпізнавання користувача. Прапорець --type client вказує, що цей острів повинен виконуватися на стороні клієнта (хоча в цьому випадку він призначений для використання в контексті острова сервера), в той час як --name user-authentication присвоює описову назву острову, полегшуючи організацію і посилання в конфігурації файлів проекту.