Как и почему я перешла с 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 комментариев
Написать комментарий...
Сергей Коновалов

Автор не пользовался ни тем ни другим, текст написан вообще не программистом.

Ответить
Развернуть ветку
Pavel Loginov

Это не автор, а авторка!

Ответить
Развернуть ветку
2 комментария
Панда Ву

Судя по тексту в вашей студии нет ни одного программиста, максимум верстальщики, которым Javascript, цитирую: «позволяет всякие глупости» и эти глупости ложатся в код несчастных клиентов.

Еще и советы блин дает. Это просто смешно. Вот и вам совет: учите программирование или не занимайте место.

Ответить
Развернуть ветку
Hoachnt

Я не удивлюсь если их "Программисты" даже не знают, что такое лексическое окружение и замыкание.

Ответить
Развернуть ветку
Золотой слон

"React Native принадлежит Facebook, и большинство приложений, таких, как Instagram, Skype и, собственно, сам Facebook, созданы с помощью этой технологии."

Это неправда, все эти приложения – нативные, с небольшими частями малозначимого и редкоиспользуемого функционала написанного на реакте (типа настроек приватности в ФБ).

Ответить
Развернуть ветку
Artem Petrenkov

Скайп нативный?

Ответить
Развернуть ветку
5 комментариев
Yaro Best

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

это было сильно. остальное не читал.

Ответить
Развернуть ветку
Панда Ву

Там у девочки в голове еще HTML не уложился как надо, а ее во Flutter понесло.

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

Чел, в нативной разработке что под iOS что под android есть отдельный формат файлов с описанием чисто представления, к элементам по ид уже в коде обращаешься, в реакте внешку описываешь через jsx/tsx, это как минимум блин отделение представления от логики, и то что этого нет во flutter я тоже не понял

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

Это просто от неумения на компоненты разбивать.

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

React Native

- На React Native написан Coinbase и какие-то аппы Shopify. Из Facebook только Marketplace, как он там куда встроен - хз. Но все равно это больше тысячи экранов.
- На фронте React Native все таки лучше использовать TypeScript или хотя бы учесть возможность. Я чет понимаю что был сильно молодым и дерзким когда на чистом JS писал
- React Native, в отличие от Flutter - не продукт, а просто выхлоп внутренней разработки Facebook. Причесывание его в удобоваримый вид и дописывание нужных библиотек идет с помощью сторонних компаний - Expo, Software Mansion, Infinte Red. Хорошо это или плохо - хз, но поддержка никакая.
- Зато все богатство наработок app state management из React доступно. И всякие приятные библиотеки вроде react-hook-form

Flutter
- Господи, ну почему Dart, неужели Kotlin нельзя было допилить.
- Когда пробовал последний раз - хот релоад периодически подглюкивал и приходилось как-то рестартовать апп.
- Анимация неожиданно стремно дергалась на iOS, это при том что обещали вообще Metal, 60fps
- Очень порадовала библиотека контролов, прям хорошие. И анимации программировать по сравнению с RN - просто сказка. Reanimated 2 правда пока не пробовал.
- После скорости и удобства разработки прототипов в Expo - все это адски долго и муторно. Отсутствие обновлений по воздуху, релиз каналов - на каждый чих собирать билд. Вообщем если надо что-то спрототипировать то в RN можно двигаться в разы быстрее.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Дмитрий Бочаров

Так есть же kotlin native https://kotlinlang.org/docs/native-overview.html

Ответить
Развернуть ветку
1 комментарий
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Alexander Plyonkin

Flutter - это какой-то набор закрывающих скобок. И не дай бог упустить запятую или точку с запятой после одной из них.

Ответить
Развернуть ветку
Дмитрий Бочаров

И ничего страшного не произойдет. К тому же Android studio пишет большую часть кода за тебя, все дополнит, где надо.

Ответить
Развернуть ветку
Aleksey

Спасибо, интересная статья. Для себя выберу флаттер

Ответить
Развернуть ветку
Панда Ву

Удачи вам, яростный минусовальщик )) надеюсь именно у вас получится отделить стили от верстки 🤣🤣🤣

Ответить
Развернуть ветку
Yuri Gridin

Очень по делу
мерси, Виктория.
Хороший посыл про дисциплину.
Как человек, который регулярно пасет разные команды, могу определенно сказать, что "креатив" девелоперов, которые считают, что фреймворк можно и нужно обходить- это бич проектов. Typescript помогает, но против лома нет приема :)

Ответить
Развернуть ветку
Александр Куликов

Какая же бредятина. Не знаешь, о чем пишешь - не давай советов бородатым дядям

Ответить
Развернуть ветку
Nikita Antonenko

Автор не знает про typescript, skia и reanimated/2, увы и ах!

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

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

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

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

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

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

Ответить
Развернуть ветку
4 комментария
Jonathan Lynn

Бегло ознакомился - с каждым годом языки программирования становятся всё проще, ткое чувство, что скоро можно будет из кубиков приложение собрать

Ответить
Развернуть ветку
Max B

Примерно то же можно было сказать где-то в 1998 году о Delphi ))

Ответить
Развернуть ветку
Дмитрий Бочаров

И ничего страшного не произойдет. К тому же Android studio пишет большую часть кода за тебя, все дополнит, где надо.

Ответить
Развернуть ветку
Sergey Zhukov

У typescript типизация мощнее чем в dart. Обеденения типов например в дарте нету

Ответить
Развернуть ветку
Панда Ву

К слову, в Typescript система типов сильнее, чем в JS, но сильно слабее, чем в Dart. Как раз за счет объединений и пересечений типов ну и структурной типизации в целом.

Ответить
Развернуть ветку
Михаил Павлов

Непонятно вообще зачем использовать Джаву))

Ответить
Развернуть ветку
Leonidos Makolkin

У флаттера только одна проблема - dart. А react тормозит.

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

На React в моменты тормозов надо просто сесть, аккуратно подключить на время отладки что-то типа библиотеки why-did-it-render и удивиться как несколько каких-нибудь мелочей, умноженные на количество элементов в списке дают тормоза.

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

Жаль ты не показала вёрстку radio-баттона в самом обыкновенном html, короткий простой код получился бы)

Ответить
Развернуть ветку
Артем ASDEV

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

Ответить
Развернуть ветку
Денис Гоновичев

Виктория, благодарю за статью!
В среде разработчиков редко встретишь такое изложение сути. Да, пожалуй самое важное отличие dart/flutter от react это строгая типизация. Для суровых программистов без творческо-дизайнерской жилки это не аргумент, но для других аргумент весомый.

"Можно спокойнее дышать"
Это и нужно творческому разработчику. У которого в голове не только код по т.з. и бэкенд но и дизайн и архитектура проекта.

Ответить
Развернуть ветку
Денис Гоновичев

А вообще очевидное скажу.. Да, популярность того или иного инструмента в веб разработке отражается на выборе. Но надо понимать что flutter и react это только инструменты. И как и везде, в веб разработке важнее подход, умение и опыт.

Ответить
Развернуть ветку
Secret Name

До чего же дичь пошла, бестолковая*

Ответить
Развернуть ветку
Dar'ya Kolpakova

Radio кнопку flutter рисует с помощью painter, и чек боксы и ещё кучу виджетов. После таких статей, справедливо, что к девушкам-программистам относятся предвзято...

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