Прежде чем начнем, не забудьте уволить вашего CTO/Тимлида, если вы до сих пор не используете Flutter.
Кто я такой и зачем пишу эту статью?
Меня зовут Адрианов Алексей и я пишу на Flutter с первого релиза (декабрь 2018). За эти 5 лет я реализовал 4 коммерческих продукта различной направленности, участвовал в двух стартапах на старте карьеры, а также реализовал примерно десяток приложений “для себя”. Кроме того, имею большой опыт в собеседовании кандидатов на позиции в разные компании и оценке знаний сотрудников на основе собственной грейдовой сетки.
Написать данную статью меня подтолкнули размышления разработчиков, которые в 2024 году не понимают, почему Flutter существует и зачем нужен. Материал статьи может быть полезен менеджерам или стартаперам, запускающим новый проект, чтобы определиться почему стоит использовать Flutter, а также разработчикам, которые уже давно пытаются протолкнуть идею фреймворка в компании, где ее не воспринимают всерьез.
Статья не преследует цели сравнивать Flutter с другими технологиями, поскольку автор в них не разбирается на глубоком уровне (как и вы, возможно, во Flutter). Я хочу подсветить сильные стороны фреймворка и развеять мифы, которые так прочно сидят в сознании людей, даже спустя столько времени после релиза.
Так что же такое Flutter? В 2024 году многие уже слышали о нем, поэтому сильно вдаваться в определение не буду, но для тех, кто сталкивается с ним в первый раз, вот краткая справка. Flutter - мультиплатформенный фреймворк компании Google, который позволяет разрабатывать приложения любой сложности (говорю из личного опыта), делая большой акцент на визуальной составляющей.
Статья содержит много ссылок, поэтому подготовьте заранее спасательный круг, чтобы не утонуть в море информации. А теперь к сути.
Dart
О языке
Итак, начнем с основ. Если вы знаете хоть один С-подобный язык, то Dart не станет чем-то сложным. Язык учится быстро и спустя неделю, а то и несколько дней изучения Language Tour вы сможете без проблем заниматься разработкой.
Кроме того, команда разработки Dart работает совместно с командой Flutter, что позволяет языку соответствовать требованиям фреймворка (например, spread operator), регулярно обновляться и обзаводиться новыми фишками и синтаксическим сахаром.
Часто встречаемая фраза “Это же детище Google, когда-то они его точно забросят” не была бы такой забавной, если бы Google не был основным мейнтейнером андроида (just think about it). Теоретически, возможно все, что угодно: даже мордокнига (запрещенная в России организация) может забросить RN и уйти во Flutter. Dart активно развивается, что говорит о серьезном настрое разработчиков в отношении платформ, поэтому в ближайшие годы точно не стоит ожидать закрытия проекта. Кроме того, большое количество приложений с использованием Flutter публикуются в сторы.
Злостные ненавистники Dart в качестве аргумента против использования этой технологии, упоминают однопоточность. Давайте разберемся, что на самом деле это означает и почему агрессоры неправы.
Если вкратце - да, Dart однопоточный, но не совсем. Для логики, выполняемой в рамках Event Loop разработчику по прежнему стоит помнить об этом, однако, например, запросы в диск происходят через ThreadPool у DartVM, а не в EventLoop, в котором лишь ожидается получение данных.
Асинхронные операции с сокетами выполняются на главном потоке с использованием OS специфичного механизма неблокирующего I/O (epoll on Linux, kqueue on Mac, overlapped io on Windows). Сокеты OS уведомляют, когда во входящем буфере есть данные, которые можно прочитать без блокировки, или когда есть место в исходящем буфере, чтобы записать данные. Само чтение из буфера / запись в буфер осуществляется синхронным read/write syscallом на главном потоке. Это, правда, обычно быстрая операция. (Спасибо @mraleph за пояснения)
Flutter также имеет ряд потоков, которые отвечают за растеризацию и UI. Из выше сказанного можно сделать вывод, что бОльшая часть внешнеориентированного кода, который разработчик пишет на Dart почти никогда не блокирует UI так сильно, как об этом рассказываю злостные хейтеры. А если разработчик делает расчеты Фибоначчи в главном изоляте, то тут умрет что угодно. Но даже если нужно выполнить сложные операции, можно использовать изоляты (отдельные потоки), о которых ненавистники почему-то не говорят.
Для читателей, владеющих английским, предлагаю также ознакомиться со статьей об устройстве DartVM от уже знакомого разработчика нашего любимого языка.
А еще не забывайте, на сколько у Dart’а прекрасная документация, в которой вы никогда не потеряетесь и найдете ответы на множество вопросов.
А если Вы разработчик на kotlin/swift/js (подставь свой язык) и не понимаете, как можно писать на Dart (ведь там есть точка с запятой и нет data-классов), то просто смиритесь с тем, что язык - это инструмент, к нему можно привыкнуть и адаптироваться.
Pub
Люди, знакомые с JS знают, как тяжело работать, когда нет единого общепризнанного источника зависимостей.
К счастью, в Dart эта проблема решена. Команда разработки языка сделала пакетный менеджер, названный Pub (уже видите связь о том, что в пабах играют в дартс?)
Чтобы добавить зависимости в проект, нужно всего лишь создать pubspec.yaml файл и указать в нем все, что вам нужно. А чтобы найти нужные пакеты или плагины (да, есть различие) достаточно зайти на официальный сайт менеджера и в поиске вбить ключевые слова. Если с экосистемой вы не знакомы, то подойдет поиск в гугле, наверняка на StackOverflow уже были подобные вопросы.
“Да там же огромное количество пакетов, чем это лучше JS?” - спросят непогруженные читатели. “Системой оценки” - отвечу я. В мире, где все быстро меняется и одни пакеты заменяют другие, не только новичку, но и опытному разработчику бывает сложно найти подходящий пакет. Но разработчики Dart учли и эту проблему. Кому-то она может показаться неидеальной, но спустя время, можно с уверенностью сказать, что эта система работает и позволяет значительно сократить время поиска пакета, если вам вдруг понадобилось что-то нестандартное, а времени копаться в исходниках, чтобы найти идеальный вариант, у вас нет.
Разумеется, не все пакеты идеальны, какие-то из них заброшены и для решения задачи придется форкать и дорабатывать, но бОльшая часть критически важных пакетов находится на достойном уровне.
Бывают случаи, когда разработчику задали нетипичную задачу, которую до него никто в комьюнити не решал, пакетов соответствующих не найдено и остается только реализовать самостоятельно. Но даже в таких условиях Dart&Flutter не бросят вас на амбразуру, ведь взаимодействие с платформой в разы проще, чем кажется (а если задача вовсе не требует связи с платформой, то намотай сопли на кулак и сделай сам 😉 )
Flutter
О фреймворке
В качестве очевидных плюсов Flutter, можно отметить следующее:
простота реализации любого дизайна
интеграция и написание любой функциональности, даже “тяжелой” (смотри раздел “Работа с платформой”
легкость изучения, для вкатывания во фреймворк понадобится 1-2 месяца работы, а за 4-5 месяцев регулярной работы получится дойти до уровня премидл-мидл
пока другие технологии обещают стать убийцей кроссплатформы, Flutter стал убийцей мультиплатформы.
А теперь давайте рассмотрим некоторые, не совсем корректные комментарии разработчиков.
“Интерфейс создается с помощью кода, из-за чего грань между логикой и дизайном гораздо меньше”. Удивительное замечание, в особенности, когда передовые платформы переходят на этот формат верстки (раз и два). Но эта проблема решается грамотным проектированием и явным разделением слоев в проекте (хороший вариант). А здесь, разумеется, нужен опыт, умение мыслить абстрактно и понимать планы на развитие продукта.
“Получившееся приложение на Flutter слишком большое” - говорят они. Ну, если в 2024 году разработчику жалко добавить 5 МБ в исходный пакет, то перестаньте использовать JS и упаковывать в один файл. Были случаи, когда разработчики не удостоились прочитать документацию и заявляли, что apk файл с минимальной сборкой весит 100+МБ. Читайте документацию, не стоит бросаться непроверенными высказываниями.
“А где же нативное поведение анимаций и компонентов?” Тут вопрос заключается в том, что разработчики хотят видеть полноценную библиотеку виджетов cupertino во Flutter. Но зачем? Нет, если надо, вы можете использовать ее и бОльшую часть задач она закроет, но Flutter предлагает разрабатывать собственную дизайн систему, чтобы соответствовать корпоративному стилю, что дает больше свободы выбора. Но если вы стартап и ну очень нужно делать платформенное поведение, то используйте, например, такой пакет.
“Не, ну вы видели, сколько в официальном репозитории гитхаба issue висит?” Видели, а какой процент их этих issue является критичным? Сколько из них мешают фреймворку работать и развиваться? Эти вопросы почему-то задавать не принято. Еще в давние времена, после релиза фреймворка, разработчики насыпали много однотипных вопросов, связанных с их личной глупостью, поскольку они не умеют читать документацию. Разве от этого фреймворк становится плохим? Также хейтеры не обращают внимание на то количество issue, которые закрываются с каждым релизом (эта информация есть в каждой статье, посвященной выходу новой версии).
“Flutter непроизводителен, потому что использует Skia”. Да, Flutter использует (в скором времени будет в прошедшем времени) Skia для рендера, но это не мешает рисовать картинку с частотой, соответствующей частоте экрана (даже 120 FPS). Проблема с шейдерами была, но как временное решение использовали прогрев, а импеллер и вовсе решает эту проблему (смотри раздел Производительность). Dart и Event Loop в контексте производительности уже обсудили выше. Для нормальной скорости рендера разработчику достаточно придерживаться простых правил для верстки, которые приведены в разделе Производительность.
Ладно, с комментариями закончили, а теперь давайте вспомним, на сколько у Flutter потрясающая документация. Удивительно, но комьюнити переняло опыт качественного документирования кода и большинство пакетов, даже маленьких, будут объяснять, как их использовать (А если и не будут, то это видно в системе баллов и, скорее всего, вы не добавите его к себе в проект).
Работа с платформой
Сложно поверить, но до сих пор находятся люди, которые заявляют, что Flutter это фреймворк для рисования, с его помощью глупо писать логику. “На Flutter нельзя написать банковское приложение или какой-нибудь видео-плеер, потому что там нужно … “. Но когда приводят пример, что на Flutter написаны как минимум СМП+МОБ банки (уже мертвые после поглощения), РСХБ банк (внутренний и сейчас запускается ДБО для физиков), видео-стриминг The Hole, крипто-кошелек EverWallet (или новая версия), Яндекс Go (и другие проекты компании) и многое другое, они не знают как парировать и меняют тему, либо продолжают отпускать тупые шутки по типу “Ну KMM все равно рвет ваш Flutter”.
Основная часть функционала описанных выше приложений пишется на языке Dart, а код платформенных взаимодействий реализуется либо на платформенных языках(Kotlin/Swift/JS, итд.) и с помощью MethodChannel интегрируется во Flutter, либо на низкоуровневых (компилируемых в С - C, C++, Rust, Go, итд.) языках и интегрируется с помощью ffi.
А если и этого мало, то вы можете интегрировать платформенные View прямиком во Flutter (раз, два, и аналогично для остальных платформ), как это сделано, например, с картами или WebView.
Разумеется, если приложение на 50+% состоит из платформенной функциональности, а плагин не удовлетворяет вашим запросам, то Flutter не лучший выбор для разработки приложения. Но если это единичные случаи, на которых нет большой завязки, то наверняка вас это устроит.
Прокручиваемые списки
Те, у кого есть опыт реализации прокручиваемых списков в Android или iOS (до модификаций верстки в декларативную), знают, как сложно это было, а уж если речь заходила о добавлении анимаций, то можно было вообще повеситься. Во Flutter создание списков не составляет никакого труда. Здесь присутствуют ListView, GridView и самый простой SingleChildScrollView (отличается от ListView, важно помнить). Если же необходимо добавить более сложную физику скролла, можно использовать механизм Sliver. И как это принято во Flutter, в SDK уже есть множество стандартных решений, которые позволяют добавить Sliver в приложение (также в пабе присутствует много пакетов, которые расширяют стандартное поведение). Но даже если не нашлось того, что нужно, сделать Sliver самому не составит труда. Достаточно создать Delegate (например, SliverPersistentHeaderDelegate или SingleChildLayoutDelegate) и вуаля!
Оптимизация у списков во Flutter прекрасная, поскольку в их основе лежит ViewPort. Разработчики могут на него немного влиять, например, увеличивая зону пре-кэша. Разумеется, можно встретить случаи, когда списки буду нещадно тормозить, но для этого есть следующий раздел.
Производительность
Раз уж Flutter в первую очередь является фреймворком для рисования, то он должен идеально рендерить. Так и есть. Если код UI написан хотя бы с базовым пониманием работы дерева элементов, фреймворк способен выдавать частоту кадров, сопоставимую с герцовкой монитора, на котором рисуется контент (это не касается PlatformView).
“На Flutter’e очень лагают шейдеры под iOS, а мы делаем бизнес, клиенты уходят, поэтому ваша кроссплатформа для нас не годится, мы лучше будем использовать RN.”
Все, кто скажут такое будут правы, но только частично, поскольку такое было на старых версиях, потому что обертка в виде Skia поверх Metal работала не очень хорошо. Но даже в те старые времена было решение в виде прогрева шейдеров. В 2024 году об этих проблемах говорить не принято, потому что разработчики написали собственный рендер движок, названный Impeller. Кстати, с его помощью во Flutter можно добавлять 3D сцены напрямую.
Если же вы столкнулись с проблемами производительности, стоит помнить несколько простых правил, которые часто помогают решить проблему:
запустить режим profile или release (в Debug она снижается)
проверить, что вы не обновляете большую часть дерева элементов на анимациях (самая частая проблема)
проверить, что у вас не загружаются картинки в гигантских размерах
если вы используете svg, то смотрите, чтобы там не было неадекватных полигонов и файл не весил мегабайты
помнить пару моментов по работе слоев
не выполнять объективно нагруженных процессов в главном изоляте (парсинг 10-20мб json можно сильно не заметить, но все же)
Поздравляю! Несколько несложных правил и с большой долей вероятности проблем будет гораздо меньше. Но если даже эти правила не помогли, то воспользуйтесь гуглом: скорее всего я что-то упустил, а в сообществе эту проблему уже решали. А если и это не помогло, воспользуйтесь DevTools, проанализируйте время билда и сделайте соответствующие выводы.
А теперь приведу субъективные плюсы и минусы, основанные на личном опыте.
Плюсы
Flutter позволяет реализовать любой задуманный интерфейс и анимации, поскольку он предоставляет прямой доступ к Canvas, а также огромное количество стандартных инструментов, упрощающих работу.
Flutter это не только рендер интерфейсов, но и полноценный инструмент для разработки приложений любой сложности.
В приложение на Flutter можно интегрировать платформенную логику, платформенные компоненты (View), а также низкоуровневое взаимодействие с C-компилируемыми языками (C, C++, Rust, Go, итд).
Минусы
Трудно найти квалифицированных разработчиков, которые отлично понимают предметную область.
Чтобы грамотно разрабатывать приложение под разные экраны, необходимо с умом спроектировать архитектуру. Она должна быть модульной и легко заменяемой. А это упирается в навыки разработчика.
Необходимо понимание не только Flutter, но и целевых платформ и умение писать для них код (но для небольших или даже средних проектов, скорее всего, не придется это делать, поскольку есть большое количество готовых пакетов).
В каждой технологии можно найти нюансы, которые будут критическими для того или иного проекта. Но утверждать, что Flutter вообще нельзя выбирать для разработки исключительно из соображений, что вы его не понимаете или слишком зациклены на своей технологии и лень изучать что-то новое, не стоит. Нужно с уважением относиться к любой технологии, которая решает задачи бизнеса и позволяет экономить огромное количество ресурсов компании.
Заключение
Flutter это далеко не только движок для рисования. С его помощью можно разрабатывать приложения любой сложности и направленности, но важно знать об особенностях работы, узких местах и способах оптимизации.
Flutter это лишь одна из многих технологий, которая позволяет разрабатывать приложения, но единственная, которая позволяет столь много, столь эффективно и столь просто.
Если найдутся эксперты, которые укажут на объективное расхождение текста статьи с реальностью, то буду признателен и с большим удовольствием внесу правки, указав автора.
Если вы сможете хорошо прокачать знания и будете понимать, как фреймворк работает, то вы сможете легко реализовывать любые приложения и крупные компании будут охотиться за вами (с копьем, разумеется).
Если вы только еще начинаете погружаться во Flutter, желаете повысить квалификацию или подготовиться к собеседованиям, то присоединяйтесь к моему каналу.
