Функция горячей перезагрузки Flutter: объяснение преимуществ и производительности

Flutter Hot Reload — это очень востребованная функция платформы Google, которая позволяет разработчикам вносить изменения в код и видеть результаты практически сразу — без перезапуска приложения. Эта функция позволяет быстро повторять и совершенствовать дизайн приложения, экспериментировать с различными макетами и конфигурациями пользовательского интерфейса, исправлять ошибки и, что наиболее важно, значительно сокращать время разработки. В результате Hot Reload может принести большую пользу компании-разработчику приложений Flutter, позволяя вносить изменения в код в режиме реального времени и мгновенные обновления, делая процесс разработки более эффективным и совместным.

Функция горячей перезагрузки Flutter позволяет разработчикам мгновенно видеть изменения, которые они вносят в код, отраженные в эмуляторе или устройстве, без необходимости полного перезапуска приложения. Цель этой статьи — ответить на, казалось бы, простой вопрос: что означает «почти мгновенно» для Hot Reload? Другими словами, насколько быстро эта функция Flutter работает в проектах разных размеров? Чего следует ожидать при работе над более крупными проектами, а как насчет более мелких? Хорошо ли работает горячая перезагрузка во всех этих сценариях? Давай выясним!

Понимание горячей перезагрузки Flutter

Начнем с основ и необходимых отказов от ответственности. При описании функции «горячей перезагрузки» важно подчеркнуть, что Dart VM использует JIT-компилятор (Just-in-Time) для преобразования кода в собственный машинный код, который происходит непосредственно перед выполнением программы. JIT основан на прогнозировании кода, поскольку он имеет доступ к динамической информации времени выполнения, что приводит к решениям, позволяющим экономить время, например, информируя разработчиков о том, что определенная функция нигде не использовалась.

Горячая перезагрузка перестраивает дерево виджетов, но сохраняет состояние приложения в прежнем виде. При использовании функции горячей перезагрузки функции main() и initState() не вызываются. Если вам необходимо пересобрать эти функции, вам следует использовать «Горячий перезапуск» или «Полный перезапуск»:

• Горячий перезапуск: инструмент, который запускает повторную компиляцию исходного кода приложения проекта, начиная с состояния по умолчанию/начального состояния, при котором сохраненное состояние уничтожается. Этот инструмент работает намного быстрее, чем «Полный перезапуск», но занимает больше времени, чем «Горячая перезагрузка».
• Полный перезапуск: инструмент, который создает проект приложения с нуля, также называемый «Холодный старт».

Кроме того, время от времени разработчикам приходится использовать «Горячий перезапуск» вместо «Горячей перезагрузки», например:

• Если приложение слишком долго остается в фоновом режиме и/или его нужно закрыть,
• Если перечисляемый тип в файле Dart изменяется на обычные классы и наоборот,
• Если нативный код изменен,
• После изменения объявления универсального типа.

Горячая перезагрузка Flutter может выполняться только в режиме отладки. Другие режимы сборки, а именно режим профиля и режим выпуска, не поддерживают функцию горячей перезагрузки.

Масштаб проекта и производительность горячей перезагрузки Flutter

Проекты Flutter различаются по размеру в зависимости от количества включенных библиотек, архитектуры приложения, медиафайлов или функций приложения. До недавнего времени Flutter считался идеальным решением для MVP и PoC. Однако, поскольку крупномасштабные проекты Flutter, такие как Google Pay, eBay, Nubank, Rive или Maya Bank с 47 миллионами пользователей, набирают обороты, изучение возможностей Flutter для сложных приложений также имеет важное значение.

Функцию горячей перезагрузки Flutter можно использовать как для приложений Proof of Concept (PoC), так и для цифровых продуктов корпоративного уровня. Однако остается вопрос, достаточна ли его производительность для сложных проектов и является ли Flutter жизнеспособным выбором для корпоративных приложений. Давайте изучим это дальше!

Эксперимент по повышению производительности с горячей перезагрузкой

Во-первых, чтобы определить примерную, среднюю производительность Hot Reload в разных вариантах использования, я решил рассмотреть 5 тестовых проектов, содержащих определенное количество библиотек:

• Тестовый проект 1: 1 000 библиотек
• Тестовый проект 2: 5 000 библиотек
• Тестовый проект 3: 10 000 библиотек
• Тестовый проект 4: 25 000 библиотек.
• Тестовый проект 5: 50 000 библиотек

Я понимаю, что вряд ли в проекте будет такое большое количество библиотек, но мы используем это как тест для отслеживания тенденций в пяти конкретных проектах.

Эксперимент проводился со следующими характеристиками устройства:

• MacBook Pro, четырехкодовый процессор Intel Core i5 с тактовой частотой 2–3 ГГц, 16 ГБ, 2133 МГц LPDDR3, графика Intel Iris Plus 655, 1536 МБ,
• Код Visual Studio, версия: 1.68.1,
• Симулятор: Iphone 12 Pro Max — iOS 15.5 (версия Xcode: 13.4.1),
• Flutter SDK (стабильная версия канала, 3.7.0).

Имейте в виду, что конкретное время перезагрузки будет зависеть от вашего оборудования или системы. Эксперимент был проведен со следующими характеристиками устройства. Однако общая тенденция и выводы должны остаться прежними.

Целью эксперимента было показать, сколько времени занимает реализация функции «Горячей перезагрузки» в каждом проекте, где для целей тестирования генерируется соответствующее количество библиотек. Каждая библиотека содержит определенный класс. Таким образом, количество библиотек соответствует количеству классов, которые предполагается перезагрузить. Ниже приведен пример тестового проекта 3, содержащего 10 000 классов. Каждая библиотека под названием «placeholderX».dart содержит простой виджет без сохранения состояния «placeholderX», который представляет собой контейнер:

Цвет контейнера — это переменная, объявленная в библиотеке «constants.dart» в классе «Constants», которая просто подключается к следующей, сгенерированной для тестирования библиотеки «заполнителей».

Результаты теста горячей перезагрузки Flutter

Теперь, когда мы установили все переменные и цели эксперимента и объяснили процесс, пришло время подвести итоги. Давайте посмотрим на эффект 5 тестов производительности Flutter Hot Reload.

Тест 1: Перезагрузка 1 000 занятий

Тест 2. Перезагрузка 5000 классов.

Тест 3. Перезагрузка 10 000 классов.

Тест 4. Перезагрузка 25 000 классов.

Тест 5. Перезагрузка 50 000 классов.

На диаграмме ниже сравнивается продолжительность горячей перезагрузки между проектами разных масштабов:

Очевидно, что среднее время работы функции «Горячая перезагрузка» для конкретного масштаба проекта увеличивается из-за большего количества библиотек (классов).

Однако, внимательно взглянув на диаграмму ниже и приняв во внимание только первые три теста проекта, вы можете заметить подробные значения конкретного использования Hot Reload:

Объяснение результатов испытаний

Результаты тестирования подтверждают, что функция Hot Reload Flutter эффективна при перестроении 1000 классов одновременно, где средняя длительность колеблется в пределах 1 секунды, чаще всего даже не достигая этого значения согласно графику. Поэтому в большинстве реальных случаев горячая перезагрузка, безусловно, является безопасным выбором, например, когда:

• перезагрузка одного класса,
• проведение живых встреч с клиентами (например, при тестировании новых идей),
• во время парного программирования или мозгового штурма.

Прежде чем сделать поспешные выводы, я хочу подчеркнуть одну вещь. Помните, что в своем тесте я перезагрузил сразу все перечисленные библиотеки (классы). В ходе обычного процесса разработки вряд ли когда-либо потребуется перезагрузка такого количества библиотек.

Основываясь на моем опыте разработки (и результатах тестирования), перезагрузка меньшего количества библиотек должна позволить вам избежать проблем с задержкой. Не говоря уже о том, что перезагрузка библиотек часто сводит к минимуму риск нежелательных ошибок или проблем с кодом и значительно упрощает мониторинг изменений, вносимых в проект.

Горячая перезагрузка Flutter: объяснение производительности

Функция Flutter Hot Reload — это мощный и эффективный инструмент, который пригодится при решении проблем, связанных с пользовательским интерфейсом, на этапе разработки. Как показано в эксперименте, приведенном выше, в большинстве случаев производительность горячей перезагрузки безупречна: одно изменение пользовательского интерфейса занимает менее секунды, а среднее время перезагрузки 1000 классов колеблется всего в пределах 1 секунды.

Более того, эксперимент доказал, что Flutter может перезагружать крупные проекты корпоративного масштаба с тысячами классов, где среднее время горячей перезагрузки составляет менее 8 секунд. Несмотря на то, что производительность горячей перезагрузки может быть не совсем удовлетворительной в гигантских проектах (сценарий с 50 000 классов), Flutter прекрасно с ними справляется.

Несомненно, Flutter Hot Reload повышает эффективность работы , перестраивая виджеты в дереве виджетов проекта, что упрощает достижение желаемых результатов в мгновение ока. Благодаря Hot Reload разработчики Flutter могут своевременно обрабатывать сложные изменения дизайна (даже те, которые затрагивают все приложение).

И последнее, но не менее важное: горячая перезагрузка — это лишь один из факторов, влияющих на общую производительность платформы (постоянно проверяемый сообществом Flutter и улучшаемый Flutter Dev). Изучение лучших инструментов разработки Flutter необходимо для эффективного создания высококачественных кроссплатформенных мобильных приложений. Поэтому я настоятельно рекомендую вам исследовать производительность Flutter — как посредством экспериментов и тестов, так и в коммерческих клиентских проектах. Именно этим мы и занимаемся в Miquido — постоянно расширяем портфолио проектов PoC и проектов по разработке кроссплатформенных приложений корпоративного уровня.