Flutter and Dart Vocabulary: Widget Trees, State Management, and Performance (англійською)

Філософія і релігія: багатий словник

Flutter став одним з найпопулярніших крос-платформових мобільних фреймворків, а його словник достатньо специфічний, щоб викликати плутанину навіть для досвідчених розробників, які читають документацію або відвідують англомовні зустрічі. У цьому підручнику розглянуто ключові терміни з трьох областей: архітектура віджетів, можливості мови Dart і швидкодія.

Словник віджетів

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

** StatelessWidget ** — віджет, який описує частину інтерфейсу користувача за допомогою лише власного налаштування, без зміни стану. Він буде відновлено лише тоді, коли його батьківський файл надасть нові дані. « Використовуйте StatelessWidget для компонентів, які не змінюються з часом, наприклад, статичного заголовка »

StatefulWidget — віджет, який поєднується з об’ єктом State, який може змінюватися протягом життя віджета. Коли стан змінюється, рамка викликає build() знову, щоб оновити інтерфейс користувача. “Кнопка лічильника є StatefulWidget, тому що вона повинна оновити відображене число при кожному натисканні.”

** Контекст збирання ** — посилання на розташування віджета у дереві віджетів. Використовується для пошуку успадкованих віджетів і даних тем. « Передайте BuildContext до Navigator.of(context), щоб запустити навігацію з віджета. »

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

** Успадкований віджет ** — базовий клас для віджетів, які ефективно розповсюджують дані по дереву віджетів. Provider і багато інших бібліотек управління станом побудовані на InheritedWidget.

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

Словник української мови

** Null safety ** — функція мови Dart (введена в Dart 2. 12), яка виключає помилки нульових посилань, вимагаючи явного оголошення типів, які можна замінити нулем. « Перехід на нульову безпеку вимагав анотації кожної змінної, яка могла б бути null з суфіксом ?. »

** Future ** — об’ єкт Dart, що представляє значення, яке буде доступним у певний момент у майбутньому, аналогічно до Promise у JavaScript. « Використовуйте await з Future, щоб призупинити виконання до завершення асинхронної операції. »

** Потік ** — послідовність асинхронних подій. На відміну від Future, який повертає одне значення, Stream повертає нуль або більше значень протягом часу. “Дані датчика виставляються як Stream, тому інтерфейс користувача може реагувати на кожне нове зчитування.”

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

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

Використання лексики

** Junk ** — видимий затримка або відсутність кадрів у інтерфейсі користувача, зазвичай, спричинена роботою, що виконується на потоці інтерфейсу користувача, яка перевищує бюджет кадрів 16 мс. « У трасування профілю було показано затримку під час прокрутки списку, що спричинено синхронним декодуванням зображень. »

** Потік растрового відтворення ** — потік відтворення Flutter, який відповідає за перетворення дерева шарів у пікселі на графічному процесорі. На цю нитку впливають дорогі операції малювання. « Розігрів штрихування зменшує затримку першого кадру, спричинену штрихуванням, яке компілює штрихування за потреби. »

Skia / Impeller — рушії відтворення Flutter. Impeller — це новіший, попередньо зібраний рушій для створення графіки, який замінює Skia на iOS і нових пристроях Android. «Увімкнення Impeller вилучило звук компіляції графіки, який ми бачили під час першого запуску»

** DevTools ** — набір інструментів Flutter для профілювань та зневадження продуктивності, доступний з переглядача. « Використовуйте графік Flutter DevTools для визначення, які перебудови віджетів спричиняють перевищення бюджету кадрів. »

П’ять прикладів речення

1. «Картка продукту реалізована як StatelessWidget, тому що всі її дані передаються як аргументи конструктора і ніколи не змінюються»
2. «Після міграції до нульової безпеки, ми виключили цілий клас аварій під час виконання, викликаних несподіваними нульовими значеннями»
3. «Ми перенесли логіку обробки зображень в Isolate, щоб головний потік залишався не заблокованим, а інтерфейс користувача залишався на 60 fps»
4. «Янк в анімації було відслідковано до StatefulWidget перебудовуючи все своє піддерево при кожній зміні стану, замість того, щоб тільки зачепити дитину»
5. «Стреми є природним вибором для чату в реальному часі — кожне нове повідомлення приходить як подія, яку віджет StreamBuilder автоматично відображає в інтерфейсі користувача»

Навчальний посібник

Офіційна документація Flutter і Dart на flutter.dev і dart.dev написана ясною, професійною англійською. Читання документації API для спільних класів, таких як StatefulWidget, Future, і Stream є ефективним способом зустріти ці терміни в їх природному контексті і поглинути стандартну фразу, яку використовує спільнота.

На практиці: Навігація нюансів зворотного зв’язку

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

Розглянемо наступний сценарій: Ви працюєте над новою можливістю для мобільної програми за допомогою Flutter. Після надсилання запитів на збирання (PR) вашій команді, ви отримаєте зворотній зв’ язок від старшого розробника, Алекса. Його коментар звучить так: « Це дерево віджетів могло б бути більш коротким ». Хоча основне значення цього слова — зменшити кількість вкладених віджетів — зрозуміло, але Alex * висловив це так, що це може здатися занадто складним. Він не відразу говорить вам * чому * це неефективне або які конкретні зміни робити. Ця неоднозначність може призвести до повороту вперед і назад у роз’ясненні питань і переглядів, сповільнюючи прогрес. Кориснішим було б написати: « Я помітив, що дерево віджетів досить глибоке; розгляньте можливість переробки, щоб зменшити кількість вкладених віджетів для покращення швидкодії і підтримки ». Додавання контексту, наприклад, « швидкодія і підтримка », негайно вписує проблему у ширшу технічну мету.

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

Інша поширена ситуація виникає під час зневадження проблем з швидкодією. Молодший розробник може повідомити: « Програма повільна ». Хоча це твердження технічно вірне, у ньому бракує важливих відомостей. Більш продуктивною відповіддю від старшого члена було б направляти їх на дослідження конкретних показників: «Чи можете ви використовувати Flutter Performance Profiler ( flutter analyze --profile ) для визначення того, які віджети споживають найбільше часу або пам’яті? Давайте поглянемо на частоту кадрів і використання процесора. “Це направляє молодшого розробника на дії, демонструючи наставництво і спільний підхід.

// Example using flutter analyze --profile (simulated output)
// This shows how performance analysis might be discussed in relation to widget trees.
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Hello World'),
            // A complex widget tree would be here...
            Container(width: 100, height: 100, color: Colors.red),
            Container(width: 100, height: 100, color: Colors.green),
          ],
        ),
      ),
    ),
  ));
}