Всем привет, за клавиатурой я, Вика — 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, но самое главное, что тут нет верстки в привычном плане.
В верстке на Flutter большая вложенность, все стили нельзя вынести отдельно от верстки, из-за этого в коде происходит мешанина стилей, размеров, отступов, цветов и верстки.
Но какие же классные инструменты Flutter предоставляет для анимации. Одно удовольствие делать их с нуля, или выбирать одно из готовых решений, которые уже есть во флаттере. Можно использовать виджет, который сразу нацелен на анимацию, например, перемещения, поворота или каких-то более сложных вещей.
Плюсы и минусы обоих фреймворков
Альтернатив для Flutter и React Native немного, поэтому они — лучшие кандидаты для разработки кросс-платформенных приложений. Однако Flutter современнее, чем React Native, с более высокой производительностью, с лучшей документацией и возможностью настройки. Рассмотрим достоинства и недостатки этих фреймворков более детально.
Советы и хелперы
- Главный совет прост, но тем не менее, важен: не бойтесь исследовать новое, не зацикливайтесь на старых и привычных технологиях.
- Наша компания топит за менторство. Если это возможно, обратитесь к кому-нибудь более опытному за помощью. Так новый фреймворк покорится вам намного легче.
- Если не учили, то время выучить ООП (Объектно-ориентированное программирование). В Java Script и React спокойно можно без него обойтись или с минимальными знаниями, а вот во Flutter с Dart от него никак не уйти.
- Что касается полезных материалов, то советую хороший плейлист от Google. Тут кратенько и красивенько рассказывают про свои виджеты.
- Проходите курсы и смотрите вебинарчики, например, этот и вот этот.
Заключение
Если вы давно уже используете React Native, но все еще сомневаетесь: переходить на Flutter или нет, то мой вам совет — дерзайте и не бойтесь осваивать новые технологии. Новичкам советую оценить все за и против обоих фреймворков и выбрать тот, что вам ближе. Возможно, кому-то не зайдет Flutter, и придется вернуться на React Native. А я и дальше продолжу покорять Flutter на интересных проектах нашей студии.
Делитесь в комментариях своим опытом, а если вас интересует проект на Flutter, то вэлком к нам, обсудим и разберем все вопросы :)
Автор не пользовался ни тем ни другим, текст написан вообще не программистом.
Это не автор, а авторка!
"React Native принадлежит Facebook, и большинство приложений, таких, как Instagram, Skype и, собственно, сам Facebook, созданы с помощью этой технологии."
Это неправда, все эти приложения – нативные, с небольшими частями малозначимого и редкоиспользуемого функционала написанного на реакте (типа настроек приватности в ФБ).
Скайп нативный?
Судя по тексту в вашей студии нет ни одного программиста, максимум верстальщики, которым Javascript, цитирую: «позволяет всякие глупости» и эти глупости ложатся в код несчастных клиентов.
Еще и советы блин дает. Это просто смешно. Вот и вам совет: учите программирование или не занимайте место.
Я не удивлюсь если их "Программисты" даже не знают, что такое лексическое окружение и замыкание.
"В верстке на Flutter большая вложенность, все стили нельзя вынести отдельно от верстки, из-за этого в коде происходит мешанина стилей, размеров, отступов, цветов и верстки."
это было сильно. остальное не читал.
Там у девочки в голове еще HTML не уложился как надо, а ее во Flutter понесло.
Чел, в нативной разработке что под iOS что под android есть отдельный формат файлов с описанием чисто представления, к элементам по ид уже в коде обращаешься, в реакте внешку описываешь через jsx/tsx, это как минимум блин отделение представления от логики, и то что этого нет во flutter я тоже не понял
Это просто от неумения на компоненты разбивать.
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
Комментарий недоступен
Flutter - это какой-то набор закрывающих скобок. И не дай бог упустить запятую или точку с запятой после одной из них.
И ничего страшного не произойдет. К тому же Android studio пишет большую часть кода за тебя, все дополнит, где надо.
Спасибо, интересная статья. Для себя выберу флаттер
Удачи вам, яростный минусовальщик )) надеюсь именно у вас получится отделить стили от верстки 🤣🤣🤣
Очень по делу
мерси, Виктория.
Хороший посыл про дисциплину.
Как человек, который регулярно пасет разные команды, могу определенно сказать, что "креатив" девелоперов, которые считают, что фреймворк можно и нужно обходить- это бич проектов. Typescript помогает, но против лома нет приема :)
Какая же бредятина. Не знаешь, о чем пишешь - не давай советов бородатым дядям
Автор не знает про typescript, skia и reanimated/2, увы и ах!
Так и не понял чем Flutter лучше React Native.
Я могу сказать чуть по другому.
React Native дает обертку над нативными контролами, но если писать на нем кроссплатформенный апп, то начиная с какого-то момента начинается геморой с тем что сам низлежащий слой разный, его пытаются привести к более-менее единому API, да еще и в самих этих обертках баги/неполнота.
Flutter рисует все сам, за счет этого у него полный контроль над всем экраом и каких-то сложных проблем с View уровнем быть не должно.
Бегло ознакомился - с каждым годом языки программирования становятся всё проще, ткое чувство, что скоро можно будет из кубиков приложение собрать
Примерно то же можно было сказать где-то в 1998 году о Delphi ))
И ничего страшного не произойдет. К тому же Android studio пишет большую часть кода за тебя, все дополнит, где надо.
У typescript типизация мощнее чем в dart. Обеденения типов например в дарте нету
К слову, в Typescript система типов сильнее, чем в JS, но сильно слабее, чем в Dart. Как раз за счет объединений и пересечений типов ну и структурной типизации в целом.
Непонятно вообще зачем использовать Джаву))
У флаттера только одна проблема - dart. А react тормозит.
На React в моменты тормозов надо просто сесть, аккуратно подключить на время отладки что-то типа библиотеки why-did-it-render и удивиться как несколько каких-нибудь мелочей, умноженные на количество элементов в списке дают тормоза.
Жаль ты не показала вёрстку radio-баттона в самом обыкновенном html, короткий простой код получился бы)
У каждого должно быть свое мнение, и это нормально. Но прежде, чем писать про производительность, нужно хотя бы какую-то аналитику, бенчамарки и т.д. провести между технологиями. А так это пустые слова.
Виктория, благодарю за статью!
В среде разработчиков редко встретишь такое изложение сути. Да, пожалуй самое важное отличие dart/flutter от react это строгая типизация. Для суровых программистов без творческо-дизайнерской жилки это не аргумент, но для других аргумент весомый.
"Можно спокойнее дышать"
Это и нужно творческому разработчику. У которого в голове не только код по т.з. и бэкенд но и дизайн и архитектура проекта.
А вообще очевидное скажу.. Да, популярность того или иного инструмента в веб разработке отражается на выборе. Но надо понимать что flutter и react это только инструменты. И как и везде, в веб разработке важнее подход, умение и опыт.
До чего же дичь пошла, бестолковая*
Radio кнопку flutter рисует с помощью painter, и чек боксы и ещё кучу виджетов. После таких статей, справедливо, что к девушкам-программистам относятся предвзято...