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

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

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

** Досконала потокова передача ** — можливість Marko передавати окремі розділи HTML до переглядача як тільки вони готові, замість очікування на розв’ язання даних всієї сторінки перед надсиланням будь- чого.

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

** Часткова гідрація ** — додавання інтерактивності з боку клієнта лише до певних компонентів, які її потребують, залишаючи решту відтвореного HTML повністю статичним і без JS.

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

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

** Мітка ** — термін Marko для нетипового, багаторазово використовуваного блоку інтерфейсу користувача, приблизно аналогічного компоненту в інших фреймворках, але визначеного за допомогою власного синтаксису шаблонів Marko.

• “Витягнути таблицю цін у її власну мітку, щоб її можна було використовувати на сторінці планів і в резюме замовлення.” *

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

• « Прогресивно відтворення означає, що користувач бачить текст статті відразу, навіть якщо у фоні все ще відбувається отримання коментарів. » *

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

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

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

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

Пояснення вибору архітектури: “Ми вибрали Marko для цієї сторінки з високим трафіком, тому що оптимізація за допомогою компілятора вимагає менше часу виконання JavaScript, ніж віртуальний DOM-фреймворк для того ж інтерфейсу користувача.”

Перегляд запиту на звантаження: “Ця мітка не повинна бути інтерактивною — вилучіть обробники подій і залиште її статичною замість того, щоб без причини викликати часткове гідрування.”

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

• Використовуйте fine- grained streaming, а не просто « streaming », щоб відрізнити промивання Marko на розділі від грубого потокового передачі на стороні сервера в інших фреймворках.
• Обґрунтуйте зменшення JS-загальної маси з частковим гідруванням конкретно — назвати механізм переконливішим, ніж загальна твердження «це легше».
• Посилання оптимізація за допомогою компілятора при порівнянні продуктивності з віртуальними DOM-фреймворками — це пояснює, чому є менше витрат часу виконання, а не просто те, що є.
• Викликати повторювальні одиниці ** тегів ** у контекстах, специфічних для Marko, щоб відповідати власному словнику фрейму, навіть якщо « компонент » буде розумітися.

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

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

На практиці — ефективне повідомлення технічних деталей

Будьмо чесними; обговорення технічних деталей іноземною мовою може здатися… незграбним. Це не просто переклад слів; це передання нюансів, намірів і * чому * за вашим вибором. При роботі з такими поняттями, як дрібнозерниста потокова передача або часткова гідрація — терміни, які часто широко використовуються в рамках інтерфейсу користувача eBay — важливо сформулювати їх чітко і точно англійською мовою, щоб кожен розумів основні переваги і компроміси. Просто сказати « ми використовуємо часткову гідрацію » не вдасться; вам потрібно пояснити * чому * цей вибір був зроблений, пов’ язуючи його з продуктивністю або користувацьким досвідом. Аналогічно, обговорюючи «досконалу потокову передачу», потрібно підкреслити її вплив на зменшення затримки - ключовий показник для користувачів eBay.

Проблема часто не в самому словнику, а в том, как он оформлен. Замість того, щоб сказати « компілятор оптимізує все », що звучить надто технічно і, можливо, залякавливо, спробуйте сказати « наш компілятор використовує модель продуктивності, яка динамічно налаштовує виконання коду на основі умов виконання — по суті, він проактивно оптимізує для максимізації швидкості ». Помітили зміну мови? Це більш спільне, зосереджене на * результаті *, а не тільки на процесі. Аналогічно, при наданні зворотного зв’язку під час перегляду коду, уникайте тупих тверджень на кшталт «це погано». Замість цього, фраза стосується конструктивно: «Я помічаю, що цей розділ може отримати користь від подальшої оптимізації - можливо, досліджуючи стратегії для зменшення виділення пам’яті під час сценаріїв пікового навантаження, вирівнюючи з нашими цілями для дрібнозернистого потоку»

Ефективне спілкування не тільки про технічну точність; це про будівництво консенсусу і сприяння спільному розумінню. При обговоренні моделі продуктивності, керованої компілятором, поясніть, як вона відрізняється від традиційного статичного аналізу - підкреслюючи адаптивність в реальному часі як ключову перевагу. Використання фраз на кшталт «проактивно підбирає оптимізації» або «динамічне налаштування» демонструє, що ви розумієте основну концепцію і можете сформулювати її значення. Пам’ ятайте, ваша мета - це спільне створення рішення, а не просто представлення інформації.

Ось приклад того, як це може виглядати у Slack:

#ui-performance
@developer_john: Hey @developer_jane, just reviewing the changes for the product listing component. I'm wondering if we could explore further optimization around the rendering frequency – especially considering our goals with fine-grained streaming.  It seems like a heavier load on the network connection could negatively impact user experience. Perhaps we could investigate techniques to reduce the number of updates?

У цьому повідомленні Slack уникається жаргонізму і акцентується увага на * впливі * змін, що сприяє продуктивнішому обговоренню можливих оптимізацій, пов’ язаних з архітектурою потокового передачі.