По итогам нашего с вами небольшого голосования кворум не набрался, поэтому на данном этапе предлагаю поставить запятую и продолжить завтра. Если что, я тут до конца дня, не стесняйтесь писать в комменты. А с постами на сегодня всё)
Stay tuned, всех обнял

И снова здравствуйте. С места в карьер, сегодня у нас по плану идут оды Flutter’у. Но мне кажется, что просто рассказать, какой он хороший, как-то недостаточно. Лучше это будет чувствоваться на контрасте, поэтому сначала расскажу вам, какие проблемы у меня были с React Native 😈

Сходу обозначу, что если вы любите JS, вам нравится складывать мапу с массивом и получать 0, а основное направление — это веб, то можете игнорировать моё дальнейшее брюзжание. Без шуток, мне лично нравится кодить на Swift и копаться в XCode, не мне вас судить. Так вот, если вы балдеете с JS, пишите фронтенд на своём уютном React’е, но однажды к вам пришли и сказали: «айда писать мобилку», а вы сказали: «а чо бы и нет», — то это прекрасно. Возможность написать мобильное приложение, вообще не погружаясь в мобильную специфику и почти не изучая ничего нового — это то, за что мы должны быть благодарны Facebook*.

Вопросы начинаются, когда RN становится основным инструментом разработчика, а написание мобилок занимает 100% рабочего времени. Не потому, что приложения, написанные на RN, плохие. Вообще нет, на RN можно написать ультра-крутые штуки. Прост как по мне, это бессмысленно. Если вы хотите развиваться в мобилках, готовы вкладывать в это время и силы, то зачем оставаться с технологией, которая при сравнимом результате предоставляет куда менее приятный DX, а местами ограничивает в возможностях? У меня лично сложилось впечатление, что React Native меня просто не уважает)

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

Ладно, хватит полемики, дальше приведу конкретные примеры, почему мне с RN было не по пути.

#underhood

*принадлежит Meta, признанной в РФ экстремистской организацией.

Итак, пункт первый. Сам по себе React Native достаточно ограниченный. Я понимаю, когда чтобы отрисовать географическую карту, или показать вебвью, нужно подтянуть библиотеку, это ок. Но в RN библиотеками нужно дотягивать и какие-то совсем базовые вещи, вроде анимаций.

Чтобы делать крутые, кастомные анимации в React Native, да еще и завязанные на жестах, вам необходимы дополнительные библиотеки: react-native-reanimated и react-native-gesture-handler. У RN есть и собственная система для создания анимаций и работы с жестами, но она не тащит. Коробочные подходы опираются на бридж, и гоняют по нему данные каждый кадр, что приводит к заметным просадкам. Есть конечно оптимизация в виде флага useNativeDriver, но его использование весьма ограничено. Я не могу с его помощью анимировать ширину и высоту, цвет, и многие другие параметры. «Мы позволим вам делать анимации в 60 фпс, но не везде и не всегда». Ну что ж, спасибо конечно, но небольшое.

Чтобы решить эту проблему, гениальные ребята запилили пару либ, упомянутых выше. Эти либы умеют трекать жесты и делать анимации полностью на стороне платформы (кажется, в среде RN принято говорить «в UI треде»). Когда я увидел такое волшебство в 18-ом году, это был подарок судьбы. Как говорится, технология, неотличимая от магии, особенно после превозмогания с Animated и попытками подгонять анимации под те, что позволяют использовать useNativeDriver.
Но то было тогда, а сейчас меня не покидает один вопрос: почему это сделали крутые ребята из опенсорса, а не Facebook*, и почему сам React Native всё еще не умеет также? Я могу понять, почему у RN нет встроенной навигации, философия у React такая, мол мы только рисуем, а дальше вы сами. Но анимации и жесты, как по мне, это настолько ультра-важные штуки для мобильной разработки, что без нормальной их поддержки как-то даже неуютно.

Также React Native не предоставляет из коробки возможности нарисовать что-то своё. Только композиция заранее прописанных нативных компонентов. Если вы хотите не просто вьюшки перемещать, но и кастомную красоту рисовать и морфить, то нужна еще какая-нибудь react-native-noscript или react-native-skia (А skia, на секунду, это графический движок в основе Flutter, смешно же).

#underhood

*принадлежит Meta, признанной в РФ экстремистской организацией.

Вас еще, кстати, не задолбала ремарка про экстремистскую организацию? Понимаю, меня тоже. А вот Google, между прочим, не экстремисты. Писали бы мы все на Flutter, и проблем бы таких не было. Подумайте об этом.

#underhood

На счет списков. Когда я писал на RN в последний раз, ванильными средствами нельзя было сделать бесконечный список с разновысотными элементами, который бы при этом справлялся с отрисовкой при очень быстром скролле. Как я понимаю, за это время кардинально ничего не поменялось (поправьте, если ошибаюсь), зато появились библиотеки, решающие эту проблему, например https://shopify.github.io/flash-list/

Бенчмарк, кстати, выглядит многообещающе. Разумеется, если это правда)

#underhood

Learn Once, write anywhere

Мне нравится этот слоган React Native. Он честный и ни на что не претендует. Никаких тебе “Write once, run anywhere”. И в общем-то это справедливо. Поскольку в RN за одним интерфейсом прячутся 2 совершенно разные реализации, никогда нельзя долго разрабатывать и дебажить лишь на одной оси, потому что когда вы запустите сборку под другую ось, вас будут ждать очень неприятные сюрпризы. Поехавшая верстка, неожиданное поведение, краши, что угодно.

Это, к слову, касается не только кода, за которым стоит какая-то нативная реализация. К JS у меня тоже есть вопросы. На разных платформах и в разных окружениях, приложение исполняется на различных JS движках, которые могут по-разному интерпретировать код. Понятно, что есть стандарты и каждый день вы такие сюрпризы находить не будете, но когда найдете – они будут незабываемы. Проблема воспроизводится только на iOS и только в релизе? Удачи с дебагом)

#underhood

Поддержка фреймворка

Тут я хотел ныть, что фреймворк очень уныло поддерживается в последние годы, но я выбрал для этого неудачное время, ведь буквально недавно выкатили новую архитектуру и завезли Hermes на iOS. Это круто. Смущает только, что Hermes на Android вышел еще в 2018, а архитектуру планировали развернуть в 2019 году. Но здорово что эти проекты дожили до релиза. Поздравляю всех причастных)

Осталось только дождаться, когда произойдет полная миграция. Как я понял, теперь весь груз ответственности по миграции лежит на разработчиках библиотек. А нам остаётся лишь ждать, когда они вернутся к своим творениям. Сейчас список мигрирующих популярных библиотек выглядит несколько удручающе, но уверен, что всё впереди. Список кстати, можете глянуть тут: https://reactnative.dev/blog/2022/06/16/resources-migrating-your-react-native-library-to-the-new-architecture

В общем, сейчас жаловаться на поддержку фреймворка было бы не очень своевременно, я вернусь к этому вопросу через год-два 😅
А вот на что всегда имеет смысл жаловаться, так это DX…

#underhood

Кстати, открыл свежайшую доку про миграцию, и увидел код с классовыми компонентами. Я думал теперь модно на хуках писать. Почему так?
https://reactnative.dev/docs/next/new-architecture-library-intro

#underhood

Про Developer Experience

Когда я писал на React Native, каноничным способом дебага было открывать Google Chrome и использовать его DevTools. Было ли это удобно? Нет. Вы пишете код в IDE, приложение у вас на телефоне, а дебаггер в браузере. Мало того, чтобы приступить к дебагу, нужно было еще и провести ритуал: потрясти девайс и включить этот самый дебаг. Приложение при этом начинало ощутимо подлагивать.
В общем, отлаживать можно, но процесс вызывал вопросы.

Уже после того, как я завел трактор в сторону Flutter, релизнулся Flipper – новый инструмент для отладки React Native приложений. Говорят даже, что он лучше и удобнее. Не тестил, но заочно буду считать, что он крутой.
Однако, меня всё ещё смущает, что это отдельное приложение для дебага. Как на счет плагина для IDE? Динозавры на Си с допотопных времен пишут и дебажат код в одной и той же среде, но React Native к этому еще не пришел 😢

Последняя ремарка про React Native. Долгое время большой болью с точки зрения DX было обновлять версию RN на проекте. Настолько, что местами было проще пересоздать проект и перенести свой код, чем пытаться обновиться. Позже появился сайт-помощник по миграции (решение сомнительное, если честно), а сейчас, как я вижу, для этого представлена CLI команда. Опять же, не знаю, как работает, но верю и надеюсь, что всё хорошо. Если есть опыт, расскажите, пожалуйста, в комментариях.

#underhood

После такого огромного полотна про RN, про Flutter остаётся написать не то чтобы много. Он просто решает почти все эти проблемы, и делает это хорошо. Без проблем, разумеется, тоже не обошлось, но о них завтра 😅

Flutter позволяет вам нарисовать любую анимацию. Flutter позволяет привязать эту анимацию к жестам. Он также позволяет вам нарисовать что угодно. Без единой библиотеки и без просадок по кадрам. По крайней мере пока вы не рендерите тысячи анимировано-переливающихся звёздочек, летающих по всему экрану. Тут бы и я охренел такое отрисовывать.

Также у Flutter мощнейший на моей памяти инструмент по работе со списками. Sliver’ы – это любовь. Можно запилить практически любой scroll-experience, и, зачастую, сделать это достаточно просто (о некоторых исключениях расскажу завтра).

С Flutter у вас будет на порядок меньше ситуаций, когда код, протестированный на одной платформе, внезапно откажется работать на другой. По большей части, интерфейс и логика пишутся на чистом Dart, а значит, что поведение на обеих платформах будет одинаковым. Dart, конечно, тоже может транслироваться во всякое разное, и я не могу ручаться, что таких проблем не будет, если одно и то же приложение будет исполняется на мобилках и в вебе. (В вебе Dart транслируется в JS). Но у меня ни разу не было такого, чтобы написанный на Dart код отработал по-разному на iOS и Android.

Также очевидно, что если вы задействуете нативный плагин или вьюху, то там таких гарантий нет. Их придётся протестировать на обеих платформах. Разница тут в том, что в случае с RN на обеих платформах нужно тестировать практически весь код, а на Flutter, до тех пор, пока я не добавляю новую нативную библиотеку, я могу тестировать код только на одной платформе, и ни о чем не переживать.

На всякий случай добавлю, что такой код не отправляется сразу в прод. У нас еще есть замечательная команда QA инженеров, которая выловит косяки, если они есть. Но практика показывает, что если код не опирается на нативные плагины, то косяки либо платформонезависимые, либо их вообще нет.

#underhood

Самое сладкое в конце - DX. Google любит Flutter разработчиков, и старается сделать так, чтобы им нравилось пользоваться фреймворком. Как только вы начнете разработку на Flutter, вас попросят поставить плагин для IDE. Линтинг, автоформатирование кода, дебаггер в IDE, Hot Reload при сохранении файла, тулзы для редактирования разметки (свапы, вставка виджета в разметку и тд), мощные DevTools для инспекции UI, замеров перфоманса и многое другое. Всё это (ну или почти всё) есть и в RN, не спорю, но по отдельности, и зачастую делается какими-то сторонними решениями. А когда оно всё All inclusive, чисто по-человечески уже как-то приятнее код писать 🙂

Самая сладкая мякотка - это Hot Reload. Он позволяет вам смотреть, как меняется разметка и поведение прямо в запущенном приложении. Забавно, что вскоре после релиза Flutter, у RN появился свой Fast Reload, но когда я его пробовал, работал он не так хорошо, как хотелось бы. Расскажите, его доработали?

#underhood

Думаю, пора закругляться)
Я могу рассказать еще много хорошего про Flutter, и не только в сравнении с React, но на сегодня хватит. Думаю, главную мысль я уже донёс: Flutter крутой.

Вернусь к вам завтра, но на этот раз Flutter я буду больше ругать, чем хвалить 😅
А сейчас пора сворачиваться. Спасибо тем кто осилил. Всем удачи, всех обнял!

#underhood

Солнца ясного, дня прекрасного, я снова на связи. Сегодня у нас по плану претензии от нативных разработчиков, мои личные проблемы с Flutter, и, внезапно, тестирование. Погнали)

Самые популярные претензии от нативных разработчиков под iOS и Android, с которыми я сталкивался, выглядят так:

💀 Flutter – это очередной кандидат на кладбище Google, долго ему прожить не суждено, а значит и время в него вкладывать смысла нет.


Первые год-два это имело смысл. Кладбище гугла, действительно, известная штука, и Flutter не был застрахован от попадания туда. Но сейчас он набрал критическую массу, и теперь, мне кажется, Google даже при желании не сможет его убить. Технология получила уже третью мажорную версию, активно развивается, используется самим Google в своих проектах и греется в лучах любви от комьюнити. Ставлю доширак, что Flutter еще всех нас переживёт.

#underhood

💀 Нужно учить новый язык ради одной технологии.

Да, но это не большая проблема. Дело в том, что если у вас есть опыт использования Си-подобных языков, особенно JavaScript, то вы уже знаете Dart, вам осталось только найти в себе это скрытое знание.

Язык, на мой взгляд, представляет из себя смесь Java и JavaScript, ушедшую несколько вперед от обоих. От Java достались общий стиль и строгость, привычное ООП и человеческая типизация, от JS – ёмкость, функциональные штучки и асинхронный рантайм.

💀 Dart хуже чем Swift/Kotlin

Ну что сказать, каждому своё)
В Dart меньше синтаксического сахара, а из-за отсутствия рефлексии во Flutter, многие вещи приходится делать через кодогенерацию. Зато тут есть настоящая асинхронность, и Dart развивается также быстро, как и Flutter. Яркий пример: еще недавно Kotlin и Swift могли похвастаться нулобезопасностью, а теперь и сам Dart её поддерживает.
А еще он просто классный. Это чувство сложно описать, но его разделяет большая часть комьюнити – на Dart очень приятно писать.

#underhood

💀 У вас скролл лагает.

Не лагает 😁
Проблемы со скроллом давно устранены. В том числе сейчас поддерживается и ProMotion. Но даже у такой странной претензии есть 2 справедливых момента:

Во-первых, в нативных iOS приложениях, и даже на React Native, тот же ProMotion работал с самого начала и не требовал пересобирать приложение с фиксом.

Во-вторых, на Flutter всё же не так сложно запихать что-то тяжелое в список, чтобы заставить его подлагивать. Полагаю, большинство приложений в проде хотя бы раз сталкивалось с тем, что со скроллом что-то случилось, и надо бы его оптимизировать. Поэтому за перфомансом надо периодически поглядывать и вовремя фиксить. Но это актуально не только для Flutter.

Кстати о скролле: чтобы узнать, написано ли приложение на Flutter, попробуйте поскролить его 2 пальцами. Flutter приложение станет скролить список в 2 быстрее. Это известная “не баг, а фича”, фиксить её, вроде как, пока не собираются.

#underhood

💀 Нативное приложение всегда будет работать лучше, чем кроссплатформа.

Грех спорить. В плане производительности, потребления памяти и пожирания батареи, даже среднее нативное приложение будет превосходить самое вылизанное приложение на Flutter и React Native. Увы, нельзя брать от жизни всё и сразу, и за экономию на разработке двух нативных приложений заплатит в конечном итоге пользователь. Мы лишь можем сделать так, чтобы он этого не заметил.

На этот счет у меня есть небольшой пример. Когда я проходил курс Hacking with Swift, первым проектом был список картиночек, каждую из которых можно было открыть в отдельном экране. Так вот, этот проект с картиночками в релизной сборке потреблял ~23мб оперативы, в то время как простейший стартовый счётчик на Flutter (текстовый лейбл + кнопка) на том же девайсе кушал уже 60-70мб. Стоит держать в голове, что на больших приложениях эта разница будет не так заметна, но развидеть такое сложно.

Я хотел еще собрать простейший проект на React Native, чтобы посмотреть сколько он жрёт в минималке, но в неравном бою лень одержала победу, поэтому для RN цифр сегодня не будет 🙁

#underhood

У меня тоже есть некоторые проблемы с Flutter, помимо озвученных выше. После серии вчерашних постов, было бы нечестно о них умолчать. Но сначала краткий ликбез.

Главная фича Flutter — это графический движок Skia под капотом. Фреймворк сам занимается отрисовкой абсолютно всего. Нативные приложения и React Native используют компоненты, предоставляемые системой, а Flutter’у на это пофиг. Если он сказал, что у карточки должна быть огромная розовая тень, то она будет, даже если приложение запущено на пожилом Android, у которого тени управляются одним скромным параметром.

Технически, Flutter — это очень крутой подражатель. Все те виджеты и поведенческие паттерны, которые ощущаются нативно, на самом деле воссозданы с нуля в самом Flutter. С одной стороны, это даёт небывалую свободу, а с другой приводит нас к первому минусу.

Заключается он в том, что Flutter вечно будет догоняющим. Наиболее очевидно это в случае с iOS. Apple явно не предупреждают Google о том, что они собираются выпускать, поэтому, думаю, и дальше будут случаться ситуации как с ProMotion: не поддерживается на старте, но быстро фиксится и попадает к разработчикам. Причем ладно Apple, но кажется даже Google внутри себя договориться не может, ибо Flutter всё еще не поддерживает новое поведение при оверскролле на Android 12 (там всё прикольно вытягивается). UPD: поправили в комментариях, уже поддерживается 😁

#underhood

Кстати, буквально этой ночью Flutter обновился до версии 3.3.0. Ура, товарищи! 🎉

И это подводит нас к еще одной минорной проблеме — иногда бывают сложности при обновлении. Не подумайте, до опыта React Native тут как до Луны, но глупо не признавать, что косяки случаются.

Уже после того, как коллеги обновили версию и поправили замечания линтера, моё обновление прошло относительно гладко. Сначала у меня перестало собираться приложение, но я быстро выясниснил, в чем дело. В pubspec.lock под шумок решила обновиться транзитивная зависимость, и видимо именно это обновление было несовместимо с новым Flutter. Откатил, зафиксировал версию, и всё снова работает. Даже не пришлось создавать новый проект и переносить туда сорцы 😅

#underhood

Следующий минус: использование нативных вьюшек во Flutter имеет ощутимый оверхед. Поскольку в отличие от React Native, для Flutter нативные вьюшки чужеродны, разработчикам пришлось использовать весьма хитрые подходы, чтобы это реализовать. Нативные вьюхи рендерятся в текстуру, после чего Flutter встраивает эту текстуру к себе в дерево, попутно разруливая проблемы с передачей жестов, аксесабилити и прочей мишурой.

Если вы иногда, при необходимости, встраиваете такие вьюшки в свой UI - проблем не будет, но злоупотреблять не стоит. Ну и если всё приложение по вашему замыслу состоит из географических карт, вебвьюшки и видео-плеера, то Flutter – такой себе вариант, лучше взять React Native. Особого профита на таком приложении вы не почувствуете, а проблем можете хапнуть.

#underhood

А еще, иногда виджеты из стандартной библиотеки Flutter - отстой. Бывает такое, что нужно тебе какое-то специфичное поведение, находишь подходящий виджет, начинаешь его подстраивать по себя, и обнаруживаешь, что он абсолютно деревянный. То есть его можно использовать, и будь это личный пет-проект – ты бы забил и оставил как есть, но у тебя есть дизайн, а эта штука явно не пройдет дизайн-ревью.

Заканчивается это тем, что ты стираешь только что написанный код и идёшь писать собственный велик, благо обычно это не сложно. Самый яркий пример такого виджета - DraggableScrollableSheet, или боттом шит, если на рабоче-крестьянском. Его постоянно допиливают и улучшают, но у меня еще ни разу не получилось им воспользоваться. Последняя попытка была буквально на той неделе.

Менее приятная ситуация возникает, когда речь идёт о виджете, который просто так не напишешь. Топ-1 моего личного анти-рейтинга – NestedScrollView (https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html). Абсолютно поломанная штука, которую сложно использовать за пределами стандартных кейсов, описанных в документации.

Когда я пытался использовать его в проекте, это закончилось тем, что мне пришлось копипастить его сорцы, чтобы накатывать заплатки. Какие-то фиксы можно было скопипасть из баг-репортов на GitHub, а что-то пришлось фиксить самому. Некоторые фиксы были абсолютно отмороженные, до сих пор ими горжусь.

Но даже после всего этого, мы всё еще не смогли включить NestedScrollView в релиз, а у меня в бэклоге валяются баги, от которых кровь стынет в жилах. Боюсь того дня, когда про эту фичу вспомнят и достанут тикеты из бэклога.

#underhood