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

Обговорення Lit стосуються обіцянки компонентів, що не залежать від фреймворку, тому словник повинен охоплювати реактивний стан, межі інкапсуляції і питання взаємодії, які виникають, коли компоненти Lit знаходяться всередині програми React або Vue.

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

** Реактивна властивість ** — поле класу, прикрашене таким чином, що зміни автоматично викликають повторне відтворення, еквівалент стану Lit у інших платформах, оголошене безпосередньо у класі нетипового елемента. “Позначте це поле як реактивну властивість замість звичайного поля класу — інакше оновлення не викликає перевідтворення.”

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

• “Застосування тіньової інкапсуляції DOM означає, що CSS нашого компонента не може випадково перезаписати стилі у програмі- хості, і навпаки.” *

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

** Компонент, який не залежить від платформи ** — нетиповий елемент, створений за допомогою Lit, який можна вставити у будь- яку платформу або не вставляти взагалі, оскільки його можна зібрати у стандартний веб- компонент. “Ми побудували вибірник дати як компонент, який не залежить від фреймворку, тому як панель управління React, так і маркетинговий сайт vanilla-JS можуть використовувати одну і ту ж реалізацію.”

** Реактивний цикл оновлення ** — пакетний, асинхронний процес, за допомогою якого Lit планує і застосовує оновлення DOM після зміни однієї або декількох реактивних властивостей, схожий за духом на пакетне відтворення React.

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

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

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

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

Запропонування спільної бібліотеки компонентів: “Збудування цих як фреймворк-агностичних компонентів в Lit означає, що оновлення системи дизайну надсилаються один раз, замість того, щоб реалізовувати їх окремо для React і Vue.”

Перегляд API компонента:

• “Це поле має бути реактивною властивістю — зараз його оновлення без повідомлення не перевідображає, що може збентежити будь- кого, хто використовує цей компонент.” *

Зневадження проблеми зі стилем: “Вміст слота не підбирає нашу тему, тому що він знаходиться у світлому DOM — інкапсуляція тіньового DOM робить саме те, що вона повинна, нам просто потрібен інший підхід до стилізації.”

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

• Використовувати ** властивість реактивності ** точно під час перегляду коду Lit — виклик кожного поля класу « state » розмиває важливу відмінність для будь- кого, хто зневаджує застарілий відтворення.
• Пояснювати shadow DOM encapsulation проактивно, коли команда розробників запитує « чому наш CSS не досягає цього компонента » — це зазвичай працює так, як було заплановано, а не є помилкою.
• Pitch Lit для крос-фреймворкових команд, що використовують фреймворк-агностичний компонент - це конкретний аргумент прийняття, який резонує з платформою і зацікавленими сторонами дизайну системи.
• Посилання на ** цикл реактивного оновлення **, коли пояснюється, чому декілька змін стану викликають тільки одне видиме перевідтворення — це запобігає непотрібним питанням « чому це пакетне відтворення ».

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

1. Пояснити різницю між реактивною властивістю і простим полем класу у компоненті Lit.
2. Описати, чому інкапсулювання тіней DOM може ускладнити створення стилю вмісту у слотах, і як легко вписувати DOM.
3. Напишіть речення, у якому ви презентуєте команді Lit три різні платформи інтерфейсу для їхніх продуктів.

На практиці: Навігація нюансів для не-народжені мовці

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

Одна з найчастіших проблем виникає під час перегляду коду. Отримання коментаря на зразок « Ця властивість не реактивна » може бути неоднозначним або нечітким. Більш конструктивним підходом буде: «Я помітив, що ця властивість не оновлюється автоматично при зміні даних. Чи можемо ми дослідити використання @property(), щоб забезпечити реактивність і підтримувати послідовність з нашим дизайном компонентів? “Зауважте зміну тону - він зосереджений на тому, * чому * зміна необхідна і пропонує рішення, а не просто вказує на проблему. Аналогічно, формулювання описів PR потребує ретельної уваги. Замість « Виправлено помилку », яка з технічної точки зору є точною, але не відповідає контексту, спробуйте щось на зразок: « Впроваджено виправлення неправильного показу даних, коли користувач обирає інший параметр зі спадного списку. Це включало оновлення властивості selectedOption і використання декоратора @property() для забезпечення реактивних оновлень по всьому компоненту»

Іншою ключовою областю є Slack комунікація. Уявіть, що ви пояснюєте свій підхід співробітнику команди: « Я використовую межу тіньового DOM для інкапсулювання стилю цього компонента, щоб він не втручався у роботу інших частин програми ». Менш вдалим варіантом може бути « Я помістив стилі у тіньовий DOM ». Перша фраза чітко пояснює, * чому * було прийнято це рішення — щоб уникнути конфліктів і зберегти ізоляцію. Крім того, при обговоренні фреймворк-агностичного дизайну, часто використовуються такі фрази як «компонентна архітектура» або «дизайн-патерни». Ці терміни часто мають різні конотації у різних мовах; важливо, щоб ви розуміли їх конкретне застосування у контексті літератури.

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

lit --inspect my-component.js

За допомогою цієї команди, якщо використовувати її разом з інспектором Lit, ви зможете переглянути код компонента і спостерігати за тим, як реактивні властивості оновлюватимуться у реальному часі. Це потужний інструмент для демонстрації основного механізму реактивності, але ефективний опис його функціональності вимагає ретельно обраного словника - “спостереження за змінами властивостей”, “слідкування за оновленнями” або “зневадження реактивності”