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

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

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

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

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

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