Как и почему я перешла с React Native на Flutter

Всем привет, за клавиатурой я, Вика — Frontend-разработчик из веб-студии Pyrobyte. Разработчики, работающие на React Native периодически заглядываются на Flutter, и я не стала исключением. В этой статье я расскажу о личном опыте и подскажу, как сберечь пару-тройку сотен нервных клеток и привыкнуть к новому фреймворку.

React Native и Flutter, что еще за покемоны?

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

Flutter — бесплатный и открытый набор средств разработки мобильного пользовательского интерфейса, созданный компанией Google и выпущенный в мае 2017 года. Этот фреймворк написан на языке Dart, который имеет полноценные возможности наиболее крупных языков. Всю отрисовку UI он производит с нуля и своими силами. Flutter также позволяет написать единый код и использовать его при разработке кроссплатформенного приложения.

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

К известным приложениям, созданным на Flutter, относятся Google Ads, Ebay, продукты Яндекса: Про, Лавка, Go.

React Native — ещё один фреймворк с открытым исходным кодом, который предоставляет возможность разрабатывать кроссплатформенные мобильные приложения. React Native принадлежит Facebook, и большинство приложений, таких, как Instagram, Skype и, собственно, сам Facebook, созданы с помощью этой технологии. React Native использует JavaScript и React.js в качестве языков программирования.

Плюсом этого фреймворка является то, что он также подойдет для начинающих разработчиков мобильных приложений, либо для практикующих веб-разработчиков, которым не придется покидать зону комфорта привычного им фреймворка и единой кодовой базы JavaScript. Также React Native позволяет обратиться к нативной части любой платформы через мост и получить доступ к API, например к таким приложениям, как Камера, Календарь, Контакты, Галерея, или WiFi Manager на Android. Однако это может являться ахиллесовой пятой в производительности, но если знать тонкости, то проблем с этим не возникнет.

Юзала же React Native, что же меня на Flutter потянуло?

В React Native было очень просто втянуться, учитывая, что я почти не знала React и работала до этого с ванильной версткой или Vue. Спустя пару дней изучения уже писала простые экраны для приложения.

И все было нормально, но часто встречались НО. То приложение тормозило из-за чрезмерного количества эффектов, то приходилось использовать костыли для обхода ограничений, то баги самого React Native, которые Facebook не торопился решать, мешали работать. Ну и вывод ошибок в React Native — это было гадание на кофейной гуще, ничего не понятно, попробуй угадать, что пошло не так.

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

Пришлось изучать. И это было местами больно.

После свободного JavaScript, который позволял любые глупости, строгий Dart казался каким-то мучением ради мучения, то нельзя, это нельзя, тут ошибку выдам, там не дам проект собрать. Но в итоге эта строгость наоборот дисциплинирует, и разработчик совершает меньше ошибок, которые потом могут пройти в приложение, пока это не обнаружит тестировщик или клиент. Можно спокойнее дышать, потому что будет меньше случайностей, а больше определенности.

Но и сам Flutter тоже доставил неудобства. React Native похож на React, перейти с одного на другое не вызывает проблем. Но Flutter очень далек от React, React Native и вообще от веб-разработки. Да, язык Dart местами напоминает JavaScript, но самое главное, что тут нет верстки в привычном плане.

Верстка radio-баттона в React
Верстка radio-баттона в React Native
Верстка radio-баттона во Flutter

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

Но какие же классные инструменты Flutter предоставляет для анимации. Одно удовольствие делать их с нуля, или выбирать одно из готовых решений, которые уже есть во флаттере. Можно использовать виджет, который сразу нацелен на анимацию, например, перемещения, поворота или каких-то более сложных вещей.

Плюсы и минусы обоих фреймворков

Альтернатив для Flutter и React Native немного, поэтому они — лучшие кандидаты для разработки кросс-платформенных приложений. Однако Flutter современнее, чем React Native, с более высокой производительностью, с лучшей документацией и возможностью настройки. Рассмотрим достоинства и недостатки этих фреймворков более детально.

Советы и хелперы

  • Главный совет прост, но тем не менее, важен: не бойтесь исследовать новое, не зацикливайтесь на старых и привычных технологиях.
  • Наша компания топит за менторство. Если это возможно, обратитесь к кому-нибудь более опытному за помощью. Так новый фреймворк покорится вам намного легче.
  • Если не учили, то время выучить ООП (Объектно-ориентированное программирование). В Java Script и React спокойно можно без него обойтись или с минимальными знаниями, а вот во Flutter с Dart от него никак не уйти.
  • Что касается полезных материалов, то советую хороший плейлист от Google. Тут кратенько и красивенько рассказывают про свои виджеты.
  • Проходите курсы и смотрите вебинарчики, например, этот и вот этот.

Заключение

Если вы давно уже используете React Native, но все еще сомневаетесь: переходить на Flutter или нет, то мой вам совет — дерзайте и не бойтесь осваивать новые технологии. Новичкам советую оценить все за и против обоих фреймворков и выбрать тот, что вам ближе. Возможно, кому-то не зайдет Flutter, и придется вернуться на React Native. А я и дальше продолжу покорять Flutter на интересных проектах нашей студии.

Делитесь в комментариях своим опытом, а если вас интересует проект на Flutter, то вэлком к нам, обсудим и разберем все вопросы :)

0
56 комментариев
Написать комментарий...
Всвиторе

Так и не понял чем Flutter лучше React Native.

Ответить
Развернуть ветку
Георгий Хромченко

Я могу сказать чуть по другому.

React Native дает обертку над нативными контролами, но если писать на нем кроссплатформенный апп, то начиная с какого-то момента начинается геморой с тем что сам низлежащий слой разный, его пытаются привести к более-менее единому API, да еще и в самих этих обертках баги/неполнота.

Flutter рисует все сам, за счет этого у него полный контроль над всем экраом и каких-то сложных проблем с View уровнем быть не должно.

Ответить
Развернуть ветку
Всвиторе

На чём быстрее и приятнее написать подобные приложения?
https://play.google.com/store/apps/details?id=net.daylio&hl=ru&gl=US

К примеру Reactive Native меня подкупает более менее знакомой инфраструктурой. Я в курсе что это обёртка и вижу сходство с нативными контролами.

Flutter вроде симпатичен, но Dart всё портит. Так же непонятно что со сторонними библиотеками. Если на js библиотек куча, то как здесь ситуация?

Есть ещё Xamarin, но он толи помер, толи кровоточит. Непонятно...

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

Ответить
Развернуть ветку
Ваня Анисимов

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

Ответить
Развернуть ветку
Георгий Хромченко

Сейчас немного не так делаю. В expo запилили фичу что можно собирать с нативными либами прописав им конфиг.

Соответственно, цикл обновления выглядит так - обновляем expo sdk скриптом - достаточно безболезненно, затем, если надо, правим конфиги сторонних нативных либ - тоже пока ничего сложного не было.

Ответить
Развернуть ветку
Георгий Хромченко

Если как на видео - то на RN быстрее
Если захочется потом много анимаций и цветных теней - на Flutter

Ответить
Развернуть ветку
53 комментария
Раскрывать всегда