8 плюсов Flutter по сравнению с React Native

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



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

    На сайте проекта можно узнать, что Flutter активно использует не только сам Google, но также некоторые другие компании. Например, на Flutter написано новое приложение The New York Times, а также мобильные версии eBay и Aliexpress. Но в целом перечень выглядит не очень впечатляющим, ведь в него входит не больше 20 компаний.
    image
    Тем не менее, опыт разработчиков из нашей компании показывает, что в ряде случаев Flutter оказывается лучше и удобнее для создания мобильных приложений. Коллективный разум Neti в сумме насчитал 8 плюсов этого более молодого фреймворка.

    Производительность


    Приложения, разработанные на Flutter, работают намного быстрее, чем при использовании React Native. Преимущества в скорости достигаются за счет собственного движка и использования другого языка программирования. В отличие от React Native, который работает при помощи мостов (bridges) и языка Java Script, Flutter позволяет быстрее решать прикладные задачи, особенно связанные с пользовательским интерфейсом. В фреймворк уже встроены нативные компиляторы, и код, написанный на Dart, превращается в нативные инструкции для ARM-процессоров.

    Кстати, интересные сравнительные тесты проводили ребята из InVerita. В их статье на Medium сравнивалась производительность готовых приложений на реальных устройствах iPhone 6 и Xiaomi Redmi Note 5.

    image

    Как видите, тест Гаусса на iOS работает на Flutter даже быстрее, чем на Swift, а RN показывает отставание в 20 раз!

    image

    В случае с Android Flutter требует на 20% больше времени для завершения теста, чем Java и Kotlin, но все равно работает в 15 раз быстрее, чем RN.

    Размер приложения


    Как следствие предыдущего пункта, в приложениях, созданных на базе Flutter и написанных на Dart, содержится меньше промежуточных компонентов. Компиляция вплоть до нативных инструкций ARM позволяет не хранить ничего лишнего. В результате сами бинарники приложений занимают до двух раз меньше места на накопителе устройства, чем при разработке на React Native.

    Быстрая анимация


    В каком-то смысле этот плюс вытекает из предыдущего. Мы решили использовать Flutter для приложений, в которых встроено много анимации. Дело в том, что Flutter стабильно демонстрирует 60 FPS, а это значит, что пользователям не придется смотреть на дергающуюся картинку, как это часто бывает с React Native.

    Типизированный язык программирования


    Основа Flutter — это Dart, уже пользующийся популярностью в рядах энтузиастов типизированный язык программирования. На Dart кодинг превращается в объектно-ориентированное программирование… и тут, конечно, можно было бы вспомнить про TypeScript и возразить, что он тоже типизированный. Но, увы, в конечном счете, он транскомпилируется (transcompile) и все равно превращается в нетипизированный JavaScript. То есть все преимущества TS остаются на уровне удобства кодера и не влияют на производительность. Dart, напротив, является изначально типизированным. Язык программирования активно развивается, поддерживается коммьюнити. На Dart можно писать намного более структурный программный код, а значит — создавать более сложные приложения и иерархические структуры.

    Отличная документация


    Для тех, кто хочет разобраться с новой платформой в интернете есть видеоуроки, продуманы возможности по работе с кодом онлайн. Сообщество во главе с Google разработало исчерпывающие инструкции и руководства. Более того, в сети есть даже готовый рецепт перехода с React Native на Flutter. Посмотреть его можно по ссылке. Для React Native, конечно, тоже есть документация, но она часто бывает бесполезной из-за таких описаний, как например «removeClippedSubviews — This may improve scroll performance for large lists.» В комьюнити Flutter подход к документированию намного серьезнее.

    Единообразие UI


    Известным преимуществом React Native является возможность вести разработку сразу для нескольких платформ. Однако никто не гарантирует, что без доработки напильником вы сразу получите одинаковый интерфейс. Приложение, написанное на Flutter, напротив, выглядит и работает одинаково и на iOS, и на Android. Наши программисты ни разу не переписывали код, чтобы приложение работал на iOS точно так же, как на Android. В случае с React Native все иначе. Подобные доработки приходится делать с завидной регулярностью.

    Поддержка большого количества платформ


    Flutter уже поддерживает Android, iOS и Web. Судя по дискуссиям в коммьюнити, очень скоро появится поддержка MacOS, ChromeOS и Windows. И, что самое интересное, Flutter уже поддерживает будущую платформу Google Fuchsia. Так что любые разработки можно будет сразу же портировать на новую ОС.

    Инструменты разработчика


    Последнее, что хочется отметить — это развитые DevTools. Flutter может похвастаться хорошей экосистемой инструментов разработчика. Посмотреть на них можно здесь. Кстати, Facebook старается сделать что-то похожее, но насколько мы видим, у RN есть пока только бета-версия DevTools, и по функционалу они не дотягивают до аналогов Flutter.

    Пример кода


    Для примера ниже приведен код “Hello, World!” для фреймворков React Native и Flutter

    // React Native
    import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    
    export default class App extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Hello world!</Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
      }
    })
    

    А вот как этот код будет выглядеть в Flutter

    // Flutter
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(
        Center(
          child: Text(
            'Hello, world!',
            textDirection: TextDirection.ltr,
          ),
        ),
      );
    }
    

    Есть ли у Flutter минусы?


    Конечно, они есть. Flutter — молодая платформа. Готовых решений для нее достаточно мало. Для сравнения, у того же React Native уже найдется намного больше готовых шаблонов, рецептов, вариантов реализации.

    На написание UI на Flutter требуется больше времени. Да и само написание кода на Dart — более длительное. В React Native приложение собирается как конструктор из веб-компонентов. В Flutter все-таки требуется основательное программирование.

    Кроме этого Flutter требует наличия более глубоких навыков программирования. В случае с React Native можно поручить разработку любому специалисту со знанием Java Script. С Dart дела обстоят сложнее, так как этот язык имеет более высокий порог вхождения, чем JS. Программист должен обладать более глубокой подготовкой.

    Но при этом самих вакансий для разработчиков на Flutter пока достаточно мало. Доверия со стороны российских компаний к новой платформе пока нет. Однако нам это не мешает вести часть разработки именно на этом фреймворке. И результаты пока оказываются более чем позитивными. Если у вас есть опыт разработки на Flutter, пожалуйста, поделитесь впечатлениями в комментариях.

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    Что вы выбрали бы для разработки мобильного приложения с анимацией?

    • 56,9%Flutter144
    • 16,2%React Native41
    • 30,0%Нативная разработка для каждой платформы76
    • 7,5%Другое19
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 47

      –11
      Ни разу не слышал о том, что Flutter быстрее React Native от тех, кто использует оба инструмента. Они обычно говорят, что интерфейсы написанные и на том и на этом «тупят» одинаково.

      Доверия графикам никакого.

        +4
        На графиках там вообще числодробилку тестировали. И совершенно неудивительно, что React Native там тормозить будет нешуточно.
          +5
          У меня ситуация противоположная: все, кто использовал RN и Flutter в разработке говорят, что Flutter действительно превосходит RN в производительности. И нет, речь не про петпроекты и хеллоуворлд.
            +7
            Не может такого быть, что флаттер больше тупит. Так может сказать тот, кто им с ним не работал. «Тупит» он только в дебаг режиме из-за поддержки hot reload. В релизе все летает.
            –6
            О, это ещё не верх громких заявлений! Мне тут один адепт Флаттер доказывал, что производительность приложения под iOS на флаттер и на Свифт одинаковая.
              +3

              В чем противоречие? Если флаттер гоняет 60fps в интерфейсе?

                +1
                Ну вообще как минимум в теории ничего не мешает этого добиться, так как что тот что другой компилируются в нативный для платформы бинарь.
                  +2
                  Ну дык у флаттера, в принципе, оверхеда не должно быть никакого, у них нативный код получается и своя графическая подсистема (фактичестки, работает примерно как игрушки, которые сами рисуют весь свой UI), а не как React Native, транзит команд из JS на родные системные UI компоненты.
                  +1
                  О как, почему то был уверен что вы только 1с да ms dynamics занимаетесь.
                  У тайпскрипта кстати есть еще один минус. Даже если забыть что он в js транспайлится — и на этапе написания с js либами взаимодействовать приходится, а оттуда может динамика проползти.
                    0

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

                      0
                      Объясните непосвящённому, что плохого в том, что TS транспайлится в JS? Типы и интерфейсы нам нужны при разработке, а что там движок читает нам разницы никакой нет. Или я не прав?
                        +1
                        Ну во первых в изначальном комментарии я уже упомянул про интероп с js из которого динамика пролезет рано или поздно, во вторых результаты статически типизированного языка проще джитить или оптимизировать на этапе aot компиляции, так что потенциал для оптимизации производительности заложен более высокий.
                      +3
                      Я месяцев 8 как на Flutter, радует, что технология живая и развивается прямо на глазах. Практика использования еще не устаканилась как следует, и иногда даже весело смотреть на простыни кода. Но это детские болезни разработчиков, пройдет.
                      Dart, я бы сказал, даже несколько перегружен синтаксическим сахаром, что радует когда ты уже освоился, но на входе бодрит.
                        +2
                        Dart, я бы сказал, даже несколько перегружен синтаксическим сахаром, что радует когда ты уже освоился, но на входе бодрит.

                        Ну вот после Котлина не сказал бы, даже кое-чего не хватает.
                          0
                          прям с языка сняли
                            0
                            А какие там вкусности есть, которых нет в Dart?
                            Я с Котлином не знаком еще.
                            +1
                            5 лет вы ждали чтобы написать этот комментарий?
                              0
                              Уточните, что имеете ввиду.
                            +1

                            А вот как выглядит "Hello World!" на Kivy:


                            from kivymd.app import MDApp
                            from kivymd.uix.label import MDLabel
                            
                            class MainApp(MDApp):
                                def build(self):
                                    return MDLabel(text="Hello, World", halign="center")
                            
                            MainApp().run()

                            Помнится, фреймворк Kivy жутко ругали, что он имеет свой собственный движок для отрисовки UI и выглядит одинаково на всех платформах. Но когда новым инструментам потребовался пиар, этот минус быстро превратили в плюс, мол, это же круто — собственный движок для отрисовки UI, единый вид на всех платформах!

                              0
                              выглядит одинаково на всех платформах.

                              Так приложения на Flutter могут и не одинаково выглядеть, они могут и мимикрировать вполне неплохо под системный UI. В каком-то докладе от гугла по переключателю в меню приложение на лету меняло свой UI из Material Design в iOS-стиль, как бы он ни назывался.
                                0

                                Я из iOS элементов в официальном демонстрационном приложении Flutter видел только несколько кнопок и пару диалогов. Больше там ничего нет.

                                • НЛО прилетело и опубликовало эту надпись здесь
                                    +1

                                    А причем тут "из какого года"? Последнее обновление официального демонстрационного приложения — 7 февраля 2020 года. В разделе "Cupertino" (виджеты для iOS) всего пара-тройка iOS контролов и текстовых полей. Возможно, разработчики не посчитали нужным включать все, но я говорю о том, что вижу в официальном демо приложении.

                                      0

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

                                        0

                                        Пока не было вашего комментария, никто и не думал о "холиварах". А если уже на то пошло, то специфика данной статьи располагает (Flutter VS React Native). Реакт Нативщики негодуют, вот и вы подскочили… Особо радуют знания "специалистов" по Flutter, которые даже не в курсе, есть ли в этом фреймворке поддержка адаптации UI к особенностям платформы и все-таки натив или не натив. Но вы, видимо, как большой специалист, сейчас нас просветите...

                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0

                                          Я и написал — пара-тройка. Если быть точным — 11. А если отбросить элементы "Переключатель", который ничем не отличается от того же на Android, "Navigation bar", который на самом деле просто обычный список (не понятно, зачем его включили в раздел Cupertino), "Кнопки" (две), которые оказываются на самом деле просто RaisedButton и FlatButton из Android, "Activity indicator", который просто обычный спиннер, страшнючие текстовые поля (два), которые нормальный человек никогда не будет использовать в своем приложении, "Pull to refresh", который идентичен элементу в Android (опять же, не понятно, зачем его включали в раздел Cupertino), — то можете сами посчитать, сколько там виджетов для iOS. Я написал то, что увидел в официальном демо приложении от 2020 года. Ну и кто здесь врет?

                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              0

                                              Нет. Просто, видя ваш настрой, когда вы обвинили меня "во все лжи", и когда я привел вам аргументированные доказательства, вы, заявляя, что не будете скачивать оффициальное демо приложение и смотреть, где я вас обманул, все-таки согласны с моим мнением, что НИКАКОЙ поддержки iOS виджетов во Flutter нет!?

                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                0

                                                Или вы просто пустословите?

                                                  0

                                                  Можете привести доказательства моей неправаты?

                                                    –1

                                                    И не 11! Ты в своем уме!

                                                      –1

                                                      Если ты — адепт фреймворка, который никому не нужен, то умей предоставить аргументированные доказательства моим комментариям!

                                        +3
                                        Пишем на Flutter полтора года. В целом — довольны, получилось очень не плохо. Но есть минусы.
                                        МИНУСЫ:
                                        1. Сырой API. Могут поменять спецификацию «На лету».
                                        2. Не работают некоторые нативные вещи, которые должны работать из коробки. Например, до сих пор есть глюки в текстовых полях на некоторых моделях телефонов (задваивается текст). Решается костылями. А очень неприятно решать костылями то, что ожидаемо должно правильно работать из коробки.
                                        3. Нет НОРМАЛЬНОГО WYSIWYG-редактора (проект зефир скорее мертв чем жив).
                                        4. Виджеты. Пришлось писать на нативе. В итоге довольно сложная архитектура, т.к. виджет должен работать в паре с основным приложением, а поднимать дартовское приложение в фоне для виджета — это сразу большой расход памяти (напомню, у виджетов например на айфонах есть ограничение в 24 мегабайта). Выкрутиться можно, но архитектура получается довольно дремучая.
                                        ПЛЮСЫ:
                                        Мне понравился и язык, и типизация, и портабельность и скорость работы. Мы делали десктоп и PWA-версию на React (не Native, но все же...) и мобильную разработку на Dart. (Не сочтите за рекламу, потыкать можно тут singularity-app.com). Код мобильной версии получился в разы проще (в основном конечно не из-за языка, а, из-за того, что не нужно было делать типовые десктопные штуки, типа обработку хоткеев и всякие прелести, типа CMD+Z). Плюс паттерн BLOc, который проповедуют в мире Flutter, в итоге дает более понятный код и меньше слоев абстракции, чем Redux (тут очень спорно и холиварно, и все зависит от задачи, но в нашем случае это оказалось так; впрочем никто не мешает его использовать MOBx но в больших приложениях есть риск утонуть в отладке обзерверов).
                                        Итог такой, что лично я доволен Flutter. А минусы — везде есть )
                                          0

                                          А язык в сравнении с ES5/ES6/ESNext/TS? Сами сейчас рассматриваем альтернативы.

                                            0
                                            Мне нравится )
                                              0

                                              Всё-таки интересно, с чем идёт сравнение? Например, React приложение писали на ES5/ TypeScript/ReasonML? Это всё-таки большая разница)

                                            0
                                            прикольное приложение, Хаос менеджмент, залип на сайт — очень круто :)
                                            +1

                                            ReactNative зло которое должно умереть. Особую боль составляет его дебаг и попытка обновить любой проект сложнее hello world.


                                            Вообще проше JS закопать, чем решить все его проблемы

                                              +1
                                              Мы пишем приложение на react-native уже более 1.5 года.
                                              Оно весьма крупное (eComm + eCare) и всё у нас, в общем-то, хорошо. В том числе и с дебагом. Особенно приятно с hot-reload в версии >0.61 и тайм-тревеллом.
                                              Нерешаемых проблем не обнаружили, композиция компонент в реакт очень хорошо работает.
                                              Довольно легко подключаются сторонние либы. Мы подключили проприетарную нативную либу по распознаванию лиц и документов с потока видео из камеры и это не заняло у нас много времени. Работает хорошо и на андроид и на айос.

                                              Из проблем, столкнулись лишь с долгим временем запуска андроид приложений (на айос вполне нормально), т.к. для этого требуется запускать движок JS. Пробовали различные ухищрения, но они давали не очень существенный прирост. Сейчас смотрим в сторону Hermes, по заверениям, он может дать прирост х2

                                              И да, у react-native есть потрясающая фича — обновление приложения «на лету», даже не надо обновлять само приложение в магазинах (play market, ios store).
                                              Т.к. приложение запускает index.bundle.js, то его можно подгрузить с интернета во время запуска и пофиксить багу, без обновления основного приложения.

                                              Очень приятная плюшка, а flutter так может? )
                                              0
                                              Нужно было тут по-быстрому написать Android приложение, ну там REST-сервисы и всё такое. На нативном не было времени вникать, Flutter в принципе получше, но тоже не сильно меньше по времени занимал. В итоге набрёл на проект NativeScript в варианте в Angular и о чудо, через день уже приложение вполне себе нормально работало. Если есть представление в Angular, то очень рекомендую, хоть он там немного урезанный, но даже удивительно как они его вполне органично положили в качестве обвязки для нативных компонентов Андроида/iOS. Кстати, протестировал на довольно старом устройстве с Aндроидом 5, так вот, простое приложение на Flutter буквально поле ввода и кнопка — на нём вполне существенно тормозило при вводе — буквы появлялись очень медленно и иногда происходили пропуски нажатий, при этом аналогичное приложение на NativeScript вообще без вопросов работало.

                                              И отдельно хочется отметить различные варианты разработки. Ребята очень заморочились и разрабатывать можно: как обычным способом, запуская на устройстве/эмуляторе, так и используя специальное приложение NativeScript Playground, которое после сканирования QR из консоли (!) отображает разрабатываемое приложение с динамическим обновлением при изменении. Ну и совсем для ленивых — запуск в этом же вспомогательном приложении по QR коду вообще из браузера.

                                              В общем, советую попробовать: play.nativescript.org
                                                0
                                                почему не использовали PWA?
                                                0
                                                в твиттере мобайландерхуд писали, что флаттер меньше крешится чем РН
                                                  0
                                                  как и любая кроссплатформа флаттер является решением в пользу бедных.

                                                  первый же вопрос — как решение работает с разными жестами и системами навигациями на ведре,
                                                  второй — как быстро апп-ку можно будет адаптировать под ipad.
                                                    0
                                                    Ждем когда RN переведут на движки рендеринга. Тогда и посмотрим что лучше. Dart перегружен чрезмерно, и при всем этом почти полностью повторяет архитектуру JavaScript, за исключением наличия «правильного ООП». Если абстрагироваться от формы то он напоминает JS 10 летней давности. Мы уже во всю используем await, а Dart юзает Future. Я к тому, что сейчас JS становится все дружелюбнее, а Dart нет. TypeScript привычен и более гибок в настройке глубины типизации.
                                                      0
                                                      Ээээ… Вот строка кода. Dart:
                                                      dataModel = await dataController.getModel(myParam);

                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                    Самое читаемое