Почему я ушёл с React Native и перешёл во Flutter: Часть 1

    Всем привет. Меня зовут Дмитрий Андриянов. Два года писал на React Native, сейчас я разработчик в Surf и уже полтора года пишу на Flutter. Когда я только решил серьёзно взяться за Flutter, я бы очень хотел найти статью от разработчика, который перешёл с React Native на Flutter и узнать его мнение. Теперь этот разработчик — я.

    Скорее-всего вы видели такие отзывы о React Native и как компании отказываются от него. Я поделюсь своим личным мнением со стороны одного разработчика, а не компании.

    Эта статья для тех, кто:


    • Не знаком с кросс-платформой и хочет понять основную разницу между технологиями.
    • Пишет на React Native и хочет узнать, что он выиграет при переходе на Flutter.
    • Не писал на React Native, а только на Flutter.

    Ниже расскажу почему в своё время я выбрал React Native, поделюсь причинами ухода во Flutter и приведу основные различия между React Native и Flutter, которые, на мой взгляд, наиболее важны. Со времени ухода с React Native прошло много времени — что-то изменилось и исправлено. Я постарался это учесть, но что-то мог упустить из виду.



    Почему я выбрал React Native


    В React Native я пришёл из Web-разработки на React.js в 2017 году. Компании нужен был именно React / React Native разработчик.

    Причины:

    • Тот же язык — JavaScript.
    • Те же правила построения UI и компонентная система.
    • Кросс-платформа.

    Почему ушёл во Flutter


    React Native хорош до тех пор, пока не начнёшь делать что-то весомое, с множеством экранов и нарастающей логикой — приложение начнёт работать всё тяжелее. Пробовал различные способы повышения производительности: shouldComponentUpdate, PureComponent, использование ключей, мемоизация, оптимизация циклов и т.д, начал задумываться о замене JSCore (Hermes на тот момент ещё не было). В итоге наткнулся на совет попробовать Flutter.

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

    Плюсы React Native, из-за которых я начал с ним работать


    1. В React Native используется удобная компонентная структура React.js.

    React.js:

    function App() {
        return (
            <div className="App">
                <header className="App-header">
                    <Image
                        logo={logo}
                    />
                    <p>
                        Edit <code>src/App.js</code> and save to reload.
                    </p>
                    <AppLink>
                        Learn React
                    </AppLink>
                </header>
            </div>
        );
    }
    function Image({logo}) {
        return <img src={logo} className="App-logo" alt="logo" />
    }
    function AppLink({children}) {
        return (
            <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
            >
                {children}
            </a>
        );
    }
    
    export default App;
    



    React Native:

    function App() {
        return (
            <>
                <StatusBar barStyle="dark-content" />
                <SafeAreaView>
                <ScrollView
                    contentInsetAdjustmentBehavior="automatic"
                    style={styles.scrollView}
                >
                <Header />
                </ScrollView>
                </SafeAreaView>
            </>
        );
    }
    
    function Header() {
        return (
            <View>
                <Text>head</Text>
            </View>
        );
    }
    
    const styles = StyleSheet.create({
        scrollView: {
            backgroundColor: Colors.lighter,
        },
    });
    
    export default App;
    



    2. Нет WebView и HTML — используются родные (OEM) виджеты платформы. Общение между JS и нативной частью происходит через мост.

    Года два назад писал приложения с частью UI на стороне WebView. В итоге самой большой проблемой было привести его в «нативный вид», особенно отклик компонентов и прокрутку. И использование OEM виджетов автоматически избавляет от этих проблем.

    3. CodePush. Позволяет практически сразу изменить код приложения у пользователей без обновления версии из магазина.

    4. За время существования для React Native появилось очень много библиотек.
    Один из сборников библиотек.

    На моём первом React Native проекте, использовалась библиотека react-native-fcm для Push-уведомлений, требовались только уведомления и ничего больше. В другом проекте уже использовали react-native-firebase, т.к. помимо уведомлений нужна была аналитика.

    Плюсы Flutter


    1. Релиз.

    Стабильная и надёжная версия. Одновременные релизы Dart и Flutter гарантируют, что новая версия Flutter использует самые последние наработки Dart. Так как они разрабатываются одной компанией — Google. Подробнее про Dart можно почитать в другой нашей статье — "Почему Flutter использует Dart, а не Kotlin или JavaScript".

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

    UI отрисовывается на собственном движке Skia. Во Flutter имеется свой собственный набор Material и Cupertino виджетов, которые являются копией OEM компонентов платформы. Это позволяет одновременно использовать их на обеих платформах. Больше информации о работе виджетов в статье «Flutter под капотом».

    Пример запуска iOS виджета на обеих платформах:



    Нет OEM компонентов и затрат на взаимодействие с ними. Хоть они и являются преимуществом React Native перед технологиями, использующими WebView, но проигрывают по гибкости и производительности виджетам Flutter. Недавно работал над приложением, использующим для Android и iOS в основном Material виджеты, но платформозависимые DatePicker.

    Пример UI на обеих платформах:



    3. Hot Reload — внедрение обновленных файлов исходного кода в работающую виртуальную машину Dart. После этого Flutter перестраивает дерево виджетов, сразу отображая изменений без перезапуска приложения. Это сильно экономит время при верстке UI и написании логики.

    4. Компиляция Flutter.

    В React Native только JIT-компиляция. Flutter использует JIT только в режиме разработки — это обеспечивает работу Hot Reload. В релизной сборке Flutter используется AOT-компиляция в нативные файлы платформы, что более безопасно и производительнее чем React Native, где можно в релизе получить доступ к JavaScript коду. Релизная сборка Flutter намного быстрее релизной React Native.

    Сравнение производительности Native vs Flutter vs React Native.

    5. Изоляты.

    Во Flutter и React Native 1 процесс с 1 асинхронным потоком и тяжелые задачи заблокируют UI.

    Выход из ситуации:

    • Разбивать на асинхронные операции. Они не блокируют UI, но исполняются в том же потоке.
    • Выносить в изолят — это независимый процесс со своим потоком, что позволяет не волноваться этой блокировке основного потока.

    У Flutter Dev Podcast есть отличный выпуск про изоляты и библиотеки для работы с ними.

    6. Всё является виджетом.

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

    Пример: кнопка содержащая AppBar с title в виде Switch.

    RaisedButton(
      padding: const EdgeInsets.all(10),
      child: AppBar(
        title: Row(
          children: <Widget>[
            Switch(
              value: false,
            ),
            Text('text'),
          ],
        ),
      ),
    ),
    



    Написать свой виджет можно:

    • Комбинацией виджетов.
    • Используя Canvas, для более сложной геометрии.
    • Используя слой рендера, когда нужно специфическое поведение.

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

    Статья про слои рендера.

    Минусы React Native


    1. Все ещё не 1.0.0.

    Обычно в проекте оставались на определённой версии RN. Обновление часто влекло за собой поломки библиотек или внутреннего устройства RN. Инструменты автоматического обновления версии не справлялись. Быстрее было заново создать проект на новой версии, так как в аутсорсе заказчики не платят за время потраченное на обновление.

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

    Создаём проект React Native на v0.61.5 (предпоследняя на данный момент).
    react-native init test_version --version 0.61

    Запускаем:



    Всё в порядке.

    Инициализируем репозиторий, так как upgrade работает поверх Git и без него будет ошибка:



    Запускаем npx react-native upgrade:



    Чистый проект при обновлении выдаёт ошибку.

    Пройдём по ссылке предлагаемой в треминале. Список файлов, которые нужно будет обновить вручную:

    • package.json
    • .gitattributes
    • .flowconfig
    • App.js
    • app.js/android/app/build.gradle
    • android/app/src/debug/java/com/rndiffapp/ReactNativeFlipper.java
    • android/app/src/main/AndroidManifest.xml
    • android/app/src/main/java/com/rndiffapp/MainApplication.java
    • android/build.gradle
    • android/gradle.properties
    • android/gradle/wrapper/gradle-wrapper.properties
    • android/gradlew
    • ios/Podfile
    • ios/RnDiffApp.xcodeproj/xcshareddata/xcschemes/RnDiffApp-tvOS.xcscheme
    • ios/RnDiffApp.xcodeproj/xcshareddata/xcschemes/RnDiffApp.xcscheme
    • ios/RnDiffApp/AppDelegate.m

    Обновив файлы, запускаю upgrade:



    Запускаем npm install. Готово. Проект обновился.

    Главный критерий — время. Оно тратится на обновление и исправление проблем, либо на пересоздание проекта с нуля. На Flutter же пишем в консоле «flutter upgrade» и готово. Flutter обновится для всех проектов сразу. Могут быть ломающие изменения, но обычно их пара штук на весь проект и они очень просто чинятся.

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

    Её оказалось недостаточно. Всё ещё не так быстро, как хотелось бы. Тестировщики постоянно ставили в баги низкую «не нативную» производительность. Не всегда спасали оптимизации. С ростом приложения больше данных сериализуется для моста и тем меньше отзывчивость.

    3. Так как используются нативные компоненты, то на Android и iOS они выглядят по-разному.
    Чтобы достичь единообразия придётся писать аналог компонента для одной из платформ или с нуля для обеих. Либо проектировать дизайн с учетом этих особенностей и различий.

    Один и тот же UI. Слева iOS, справа Android.



    Дополнительно


    JavaScriptCore


    В React Native долгое время был старый JS Core для Android. С появлением Hermes ситуация улучшилась, но судя по отзывам знакомых разработчиков и тестам — всё не так однозначно.

    Сравнение JS движков.

    Expo


    Его сложно отнести к плюсам и минусам. Он предоставляет из коробки важные библиотеки и функциональность, но у него есть свои проблемы, нивелирующие его плюсы. Если нужна какая-то отсутствующая в Expo функциональность на уровне платформы или внешняя библиотека, использующая нативный код, то придется выталкивать проект и плюсы Expo либо исчезают, либо превращаются в его минусы. React Native init vs Expo.

    Минусы Flutter


    Несправедливо было бы их не отметить. Всё же, это не серебряная пуля.

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

    2. Количество библиотек меньше, чем в React Native.
    Из-за того, что Flutter более молодая технология, то и библиотек для неё куда меньше, но их количество активно растет. Но за год с лишним работы это не доставило мне особых проблем, так как есть все нужные библиотеки.

    3. Не подходит для:
    • Игр.
    • Приложений, завязанных на работе с железом.
    • Приложения с дополненная реальностью. Так как нужно реализовывать логику отдельно для каждой платформы.


    Но если много общего UI, возможно, подойдет вариант использования каналов платформы для взаимодействия с нативным кодом или интегрировать Flutter в нативное приложение.

    Документация


    В React Native достаточно хорошая документация, которая отвечает на многие возникающие вопросы. Она постепенно улучшается (раньше можно было наткнуться на пустые страницы: заголовок есть, а контента нет) и материал становится лучше.
    Во Flutter же документация шикарна. Примеры, объяснения, рецепты с примерами, видео. Если есть проблема с использованием чего-либо — документация способна её решить.

    Порог вхождения


    В обоих случаях порог вхождения довольно низкий.

    • React Native — нужно знать JS, React и можно начинать.
    • Flutter — если вы знаете JS / Java / Kotlin / Swift / C (а если JS и любой из остальных — это вообще идеальный вариант), Dart дастся очень легко.
      А если есть ещё и опыт на React Native, то декларативная верстка Flutter не вызовет сложностей.


    Итог


    React Native


    • Больше библиотек.
    • Больше разработчиков.
    • Проблемы с производительностью.
    • Не безопасен.
    • Низкий порог вхождения.

    Flutter


    • Библиотек меньше, но их число растёт. А необходимые есть.
    • Разработчиков меньше, но переучиться несложно.
    • Производительность.
    • Безопасен.
    • Низкий порог вхождения.

    Пользователю неважно, что вы используете для сетевых запросов Http или Dio.
    Искали вы JS-разработчика день или Flutter-разработчика месяц. Главное, чтобы приложение выполняло требуемые задачи и было производительным. Flutter позволяет отвечать этим требованиям гораздо эффективнее.

    Разбор решения одних и тех же задач используя Flutter и React Native будет во второй части статьи. Сравнение их основных характеристик с точки зрения студии Surf можно прочитать в статье Flutter vs. React Native: что выбрать для вашего мобильного приложения.

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

    Страница курса по Flutter

    Подробная статья о курсе и учебном процессе
    Surf
    Мобильные приложения и цифровая трансформация

    Comments 97

      0
      Cпасибо!

      А как у Native с играми? Слышал, что что-то больше змейки там тоже не стоит делать.
        +1
        Я не пробовал на нем их писать.

        Так как основная идея RN это использовать JS для написания приложения, то от нее и будем отталкиваться.

        Все исполняется в JS потоке и через мост дергаются OEM виджеты — то однозначно будет лагать.
        Но если использовать движки и/или либы для написания игр — то опять вопрос к передаче данных между JS потоком и движком.

        А если убрать JS поток — то это уже и не React Native вовсе.
          +1

          ReactNative это не про игры, это по большей части про UI.
          Если хотите кросс-платформенные игры, то лучше уж искать подходящий вам кросс-платформенный игровой движок.


          P.S. Лично я в принципе советую держаться подальше от ReactNative – из плюсов в нём только то, что это React и вы его скорее всего уже знаете. В остальном это боль, страдания и ощущение, что RN это огромных размеров костыль (сугубо личное мнение, никому не навязываю)

            +1
            из плюсов в нём только то, что это React и вы его скорее всего уже знаете

            ИМХО знания React.js одинаково полезны и для начала работы с RN и для Flutter.
            Я вот в свое время RN попробовал тоже потому что "ну я же уже знаю React". И был удивлен, что как-то не очень эти знания мне помогли. На Flutter пересесть было примерно также, а учитывая большее удобство самого инструмента, куда лучшую интеграцию с Android Studio и т.п., то наверное даже легче.
            Так что и этого плюса нет :)

              0
              Зная React.js не нужно вникать в компоненты, жизненный цикл, хуки. То есть в то что досталось RN от React.js.

              После React Native было просто перейти на Flutter. Тоже декларативно. Dart похож на JS (один поток, EventLoop, Async/Await).
                0

                Я подразумевал под "уже знаете", что при знании react порог вхождения уже не "с нуля". В остальном да, чуть шаг в сторону от "отрисовать данные с сервера на экране" начинаеются пляски с бубнами.

                  0

                  Ну, мой поинт, что при выборе RN vs Flutter нюанс знания React-а не стоит воспринимать как жирный плюс в пользу RN, так как даже с учетом этого плюса, начать использовать Flutter, весьма вероятно, окажется проще, чем RN.
                  Это для тех, кто стоит перед таким выбором, читая этот коммент :)

                    +1

                    Я с вашей точкой зрения согласен. Щупал flutter(сам я фронтендер, до промышленной разработки на flutter если и дойду, то не знаю когда), мне понравилось. Коллега android-разработчик попробовал flutter, он тоже в восторге.


                    нюанс знания React-а не стоит воспринимать как жирный плюс

                    А я и не говорил, что он жирный. Скорее "плюсик". И то для определенных ситуаций

                      0

                      Скажите, имея поверхностные знания js (совсем поверхностные) и нулевой опыт в мобильной разработке и фронтенде, но имея хорошие зания и опыт в C и относительно неплохое понимание C++, с чего проще начать, с RN или Flutter? На сколько высок порог вхождения совсем издалека?

                        0

                        Мне сложно ответить, т.к. с C не работал вообще.
                        Но по моим ощущениям с вашими вводными лучше начать с flutter.
                        В RN порог вхождения низкий(весьма относительно низкий) если знать js и React. Но мне, имея опыт и в js и в React, RN не понравился от слова совсем.
                        Мне кажется что знанием C порог вхождения во flutter вам будет проще преодолеть(но это скорее по моим субъективным ощущениям)

            +1
            Сейчас точно в таком же переходе.

            Понял что следующий крупный проект точно не хотелось бы делать на RN, а обещания про светлое будущее без бриджа — когда они еще сбудуться. И проблемы с качеством просто достали.

            Ну и точно сложность — как перейти меняя стек, тем более с позиции техлида.

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

            Особенно впечатляет уровень контроля над UI, который является следствием архитектуры flutter. То что у scrollTo у какого-нибудь scrollView можно задать и easing, и duration — просто восторг.
              0
              Ну и у Flutter есть ништяки из коробки. Например: навигация, изоляты, готовый анимации.
              0

              Подскажите плиз, что вы подразумевали под термином "Кросс-платформа"?

                +1
                Написание приложения с единой кодовой базой на несколько платформ.
                Приложение на React Native запускается на Android и iOS.
                  0

                  В светлом будущем еще и в вебе :)

                    0
                    И на десктопах.
                0
                Про Expo — я отношусь к нему как к инструменту, который позволяет сэкономить большое число человеко-часов на сборку, + там обновления по воздуху тоже сделано.

                Также очень удобно когда у QA в каком-то инструменте есть все feature-branches для тестирования, не надо ничего пересобирать или публиковать в сторах.

                Как такое сделать с Flutter мне пока даже непонятно :)

                Также мы перешли просто на ejected expo в какой-то момент, но все равно expo — это позволяло снизить количество геморроя при обновлении версий.
                  0
                  Поэтому и сложно было отнести к плюсам или к минусам.)

                  Кому-то он пригождается, мне наоборот нет — так как в каждом проекте была хотя бы одна либа с нативной частью или свой нативный код.
                    0
                    Можно делать require в рантами, и определять среду выполнения, мокая нативный код если мы определили что мы в Expo. Если это не визуальный компонент (или не какой-то Apple Pay), то все равно в итоге первый QA, показы для обсуждений были в Expo.
                      0
                      На RN была прилага со специфичными картами и там был свой нативный код.
                      В этой ситуации Expo вообще никак не поможет.
                      Так как замокать основную фичу приложения не выйдет.

                      Но он, собственно, и не серебряная пуля.)
                  +4
                  Удивляет пункт «не подходит для игр» в списке минусов Flutter. При том, что у RN такого нет в списке минусов. При этом относительно Dart/Flutter связки скорее стоит сказать, что «не является популярным инструментом для разработки игр». Есть пара движков (Flame и StageXL), на которых можно написать игру. Скорее всего, на Unity или при помощи Defold или <название инструментария для разработки игр> игра получится с меньшим количеством трудозатрат. Но всё-таки можно.
                    +1

                    К субъективным минусами я бы еще отнёс "кашу виджетов" Бороться в ней легко, производя рефакторинг выкидывая куски-переростки в отдельный виджет. По началу было не очень а потом привык. Flutter мне зашел очень даже.

                      0
                      То же самое.
                      Мы дробим.
                        0
                        После реакта привычка постоянного дробления на более мелкие компоненты гармонично перетекла в деление на отдельные виджеты во Флаттере.
                        0

                        Поправьте, если где-то не в том направлении думаю.


                        Представим, есть человек с некоторым багажом знаний программирования только-только приходит в мобильную разработку. Вот он самостоятельно учит принципы вёрстки, бизнес-логику и создаёт первый серьезный рабочий прототип, который не стыдно показать случайному человеку. А дальше как быть? Как юный мобил-девелопер на флаттере может попасть в некий более-менее крупный проект (которых ещё нет), чтобы изучить внутреннюю кухню девелопинга, пайплайны, разделение труда и все такое прочее.


                        Напрашивается вывод: учить реакт и идти пилить приложухи на нем, т.к. на реакте проекты точно найдутся.


                        А как устроиться на работу с Флаттером? Я недавно лениво листал хеху и там все как-то грустно, всем хочется рн с Флаттером сверху зачем-то.

                          0
                          Начинать с Flutter рискованно, потому что вакансий меньше. И из-за этого я бы с него сейчас не начал.

                          Но разработка это же не «выучил одно — вечно работаю». Знания в целом пригождятся.

                          Если описанный разработчик взялся за React Native, то он должен хорошо знать JavaScript и React.js. В первую очередь он JavaScript разработчик.

                          Если говорить о JS, я бы на таких вводных пошел сперва в Web или React Native. А потом можно во Flutter.

                          Тем более что после RN верстка во Flutter, его асинхронная работа и EventLoop даются очень легко, что-то вообще 1 в 1.
                            0
                            Я думаю так — смотрю на Google Trends, да сам понимаю что если RN будет продолжать в том же духе, то постепенно заглохнет.

                            Я думаю следующий шаг — это взять какой-то заказ на проект посерьезнее, чтобы сделать не то что «придумалось», а что-то в соответсвии с требованиями.

                            Ну и всегда можно продолжать учить Flutter и искать крупный проект на нем.
                            0
                            Хех, я два года назад начал задумываться о переходе с 1с в мобильную разработку или бекенд. По мобилкам смотрел на флаттер и натив под андроид. К сожалению тогда флаттер еще не релизнулся, да и работы было ноль, потому полтора года назад в натив перешел. Сейчас вот снова поглядываю на флаттер краем глаза. После котлина дарт конечно слабоват, но вроде как у разработчиков в плане добавить некоторые очень нужные плюшки, думаю все таки серьезно заняться когда хотя бы null safety во флаттер завезут.
                              0
                              Док по Dart null safety.
                                0
                                Эта ссылочка у меня даже подсвечена как посещенная. Потому и жду, что во флаттере пока как таковой ее нету все же, хоть в дарт уже и подвезли. Это же немало работы по адаптации.
                                Эх, еще бы аналоги sealed классов, прямо в тот же момент забросил бы читать статейки про натив и пошел активно флаттер осваивать).
                                  0
                                  Dart активно развивается. Если на что-то будет спрос — сделают.
                                  Ну вы это и так знаете.)
                                    0

                                    Если вы хотите серьезно заниматься мобильной разработкой, то не советую "забросил бы читать статейки про натив". По моему глубокому убеждению, внедрение любого кросс-платформенного фреймворка людьми, не имеющими опыта в нативной разработке, чревато неприятными последствиями.


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

                                      0
                                      В общем то как написал выше, я полтора года назад перешел с 1с на нативный андроид. На фуллтайм. До того был крупный проект с мобильным приложением на 1с которое немного с нативом дружил (плюс там же на сервере к 1с компоненту небольшую на плюсах прикручивал). Так что дружить ежей с ужами я вполне умею и не думаю что если возьмусь за флаттер у меня будет необходимость так же часто как сейчас статьи по нативу читать. Достаточно для известной платформы прям совсем избранное читать и об обновлениях. А вот другие платформы да, придется конкретно изучить.
                                      Просто если бы взялся за флаттер тратить по паре часов в день свободного времени как раньше на продолжение изучения натива никак бы не вышло. Потому и написал в такой манере.
                                  0

                                  Посмотрите в сторону Kotlin Multiplatform, раз вы уже в Котлине.

                                    0
                                    Ну они все таки для разных целей. Мне конечно котлин очень нравится, но боюсь до того момента когда на котлине можно будет писать и под мобилки и под десктопы еще далеко. А у флаттера это уже очень близко. Да и под 4-5 платформ отдельный UI делать было бы не просто и не быстро.
                                      0
                                      Видео с Мобиуса о совместном использовании Flutter и Kotlin Multiplatform.
                                    0
                                    Полезная статья. Спасибо!

                                    Пишете насчёт производительности.
                                    Я так понял, чем свежее и мощнее девайс, тем лучше. Приложения написанные на этой платформе, всегда подтормаживают?

                                    А какого типа приложения пишут на RN и Flutter?
                                      0
                                      А какого типа приложения пишут на RN и Flutter?

                                      Для Flutter можно посмотреть тут

                                        0
                                        «На этой» — вы какую имеете ввиду? RN или Flutter?

                                        По идее, RN подходит для тонкого клиента, но на деле даже тут без гарантий. Но часто слышал что кроме как для прототипа он не подходит.

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

                                        Мой личный рецепт когда использовать RN:
                                        — Нет выхода.
                                        — В арсенале только JS.
                                        — Нужно просто и быстро. Немного экранов.

                                        Flutter:
                                        — Общий UI на 2 платформы.
                                        — Нужно быстро верстать.
                                        — Тяжелые вычисления — отдать в изолят, либо в натив через каналы (это делается проще чем в RN).
                                          0
                                          Недавно был у меня кейс когда надо было по-быстрому доделать прилагу на RN. Это была пытка. То то отвалится, то это. Нужная либа обновилась и новые доки так себе.
                                          В итоге в течении часа перевел все приложение на Flutter и допилил.

                                          Для меня это был момент, после которого я даже думать не хочу о возврате на React Native.
                                            0
                                            А зачем вы обновляли либы, чтобы доделать приложение?)
                                              0
                                              Нужно было добавить функционал.
                                              И версия с которой я уже был знаком стала устаревшей, а новая с новым Api.
                                        0
                                        Спасибо за интересное начало сравнения!
                                        Не работал еще с Flutter — есть вопрос по сборке.
                                        Мой последний RN проект собирался более получаса для iOS из-за множества зависимостей, доставшихся по наследству. Во Flutter есть преимущества в этом? Или та же пляска с Xcode и кучей галочек?
                                          0
                                          Релиз или дебаг?
                                            0
                                            Оба варианта. Именно сборка (как релизная, так и в TestFlight) — и там, и там долго было.
                                              0
                                              Зависит от количества кода.
                                              По моим наблюдениям Flutter собирается быстрее.
                                            0
                                            Проект билдится нативными средствами. То есть под iOS запускается xcodebuild. Естественно, он вообще не торопится работать.
                                            0

                                            Еще в минусы Flutter можно отнести бардак при работе с темами. Там часть документированного функционала тупо не работает: при смене темы часть её параметров не применяются к компонентам и приходится костылями вручную выставлять.


                                            Addon: Хотя, 8 дней назад закрыли таск в рамках которого обещали пофиксить: https://github.com/flutter/flutter/issues/54776 Огонь! :)

                                              0
                                              У нас определены основные элементы темы, но, в основном, мы напрямую стилизуем виджеты.
                                              +1
                                              В React Native только JIT-компиляция

                                              Должен сказать что React Native не использует jit на iOS. Вот пруф (https://reactnative.dev/docs/javascript-environment)


                                              Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.

                                              То есть это значит что на iOS реактовский diff большого дерева компонентов будет тормозить потому что js будет интерпретироваться а не компилироваться в более оптимизированную версию как на android. Даже cordova будет быстрее потому что она использует webview со встроенным safari-движком а это единственное приложение которому iOS разрешает jit, соотвественно реакт c кордовой будет быстрее чем с react native

                                                0

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

                                                  0
                                                  Ну такое.)
                                                  Меня больше напрягает не соответствие UI, что я привел в статье. Да, это обусловлено OEM виджетами, но результат удручает. И вместо того чтобы создавать один UI на две платформы, приходится местами писать его для каждой.
                                                  0
                                                  Спасибо за статью, порадовала информация о «Безопасности» во Flutter! Давеча копнул, так ли оно в самом деле безопасно? И вот что накопал: в документации Dart и Flutter как-то маловато информации на эту тему, а та, что есть, настораживает, ибо речь в ней идет о некой необходимости обфускации кода (и отсутствии возможности обфускации для десктопных приложений), что вряд ли согласуется представлениями о ТРУЪ безопасности как в С++, напрмер.
                                                    0
                                                    Это вы еще на React Native с этой точки зрения не смотрели :)
                                                      0
                                                      Тут как раз разработчик из Яндекс рассказывает про то по чему выбрали Flutter и затрагивает тему безопасности React Native.
                                                        0
                                                        Ой, спасибо!
                                                      +1

                                                      А какая в C++ ТРУЪ безопасность? В самом языке ни чего такого нет.

                                                        0
                                                        Нас в универах учили, что там такая безопасность, что аж деваться некуда. Типа, компилируется в машинный код, который разберут только отцы реверс-инжиниринга (что бы то ни значило). Мне хватило бы безопасности как у Microsoft Word, который все ломают, но всё же.
                                                          0
                                                          Ну тащем та дарт тоже компилируется в машинный код, хотя есть режимы и с jit компиляцией и виртуальной машиной, но то для дебага.
                                                            0
                                                            Классно. А тогда зачем обфускация? flutter.dev/docs/deployment/obfuscate
                                                              0
                                                              Ну видимо чтобы даже в бинарном коде имена классов и методов скрыть. Инструкции может и машинные, но насколько помню даже если C компилировать там имена функций в бинаре сохраняются. Чтобы по ним определять какой кусок кода дергать при использовании бинарника.
                                                              К тому же может и еще какую инфу дополнительную дарт сохраняет.
                                                            0
                                                            Скомпиленный без оптимизаций, C++ легко декомпилируется обратно в С++ код легко. Скомпиленный с оптимизациями декомпилируется труднее, но тут уж просто более дорогой декомпилятор нужен. К тому же, чтобы «взломать», не обязательно понимать весь код.

                                                            Потому даже на C++ существуют обфускаторы кода, обфускаторы машинного когда, шифровальщики и прочее, прочее, прочее.

                                                            Но большинство этих утилит, мне кажется, без проблем применятся и к скомпилированному в машинный код Dart.
                                                        +1
                                                        Я сейчас работаю над довольно большим приложением на RN. Особых тормозов не заметил, но я фанатично отношусь к оптимизации вызовов рендера компонентов. Из недостатков могу отметить:
                                                        — ощущение какой-то хрупкости, особенно при сборке на Андроид, постоянные падения, необходимость постоянно чистить кэши…
                                                        — очень большое влияние на приложение рекомендуемого компоненты для организации роутинга React Navigation, плюс он жрет память как не в себя и не очень охотно ее высвобождает, альтернативный роутер есть, но его я не пробовал — текущий очень тесно интегрирован в приложение и заменить его не просто.
                                                        Это основное.

                                                        Флаттер пробовал. Но он как-то не впечатлил. Весь этот коллбекхелл из виджетов напоминает мне React без JSX. Много есть желающих писать на нем? Я ни одного не видел. Да, можно их делать и все такое и писать свой код на этом будет вполне ок. Но я врагу не пожелаю попасть на поддержку написанного кем-то другим проекта. А ведь год-полтора и все вот эти проекты, на которых сейчас люди учатся и хвалят Флаттер перейдут к другим разработчикам. И им не позавидуешь.
                                                          0
                                                          В последнем обновлении Flutter еще больше улучшили потребление ресурсов.
                                                          Встроенный навигатор предоставляет хороший функционал роутинга.

                                                          По моим ощущениям Flutter норм читается, но сначала было непривычно.
                                                          0

                                                          Нужно отметить что Dart еще как язык заметно проще JavaScript.

                                                            0
                                                            Ну сложность JS это не его минус. Благодаря его гибкости можно крутить очень классные штуки.

                                                            Например:

                                                            var obj = {
                                                                name: 'Иван',
                                                                age: 21
                                                            }
                                                            
                                                            obj = new Proxy(obj, {
                                                                get(target, prop) {
                                                                    if(prop in target) return target[prop]
                                                                    if(!prop.includes('_')) return '';
                                                                    return prop.split('_').map(p => target[p]).join(', ')
                                                                }
                                                            })
                                                            
                                                            console.log(obj.name) // Иван
                                                            console.log(obj.name_age) // Иван, 21
                                                            console.log(obj.age_name) // 21, Иван
                                                            console.log(obj.name_age_name) // // Иван, 21, Иван
                                                            
                                                              0

                                                              Ну навскидку как-то так:


                                                              class Proxy {
                                                                var _data;
                                                                dynamic Function(dynamic, String) _handler;
                                                              
                                                                Proxy(this._data, this._handler);
                                                              
                                                                @override
                                                                dynamic noSuchMethod(Invocation invocation) {
                                                                  return _handler(_data, invocation.memberName.toString().split('\"')[1]);
                                                                }
                                                              }
                                                              
                                                              void main() {
                                                                dynamic obj = {
                                                                  'name': 'Иван',
                                                                  'age': 21,
                                                                };
                                                              
                                                                obj = Proxy(obj, (dynamic data, String prop) {
                                                                  if (data.containsKey(prop)) return data[prop];
                                                                  if (!prop.contains('_')) return '';
                                                                  return prop.split('_').map((p) => data[p]).join(', ');
                                                                });
                                                              
                                                                print(obj.name);
                                                                print(obj.name_age);
                                                                print(obj.age_name);
                                                                print(obj.name_age_name);
                                                              }
                                                                0
                                                                Круто. Я как-то совсем забыл про noSuchMethod.
                                                                В JS, правда, еще можно на ходу лепить функции через new Function, но в проде никогда этим не пользовался. Как и динамической сменой прототипа через __proto__.
                                                                  0
                                                                  В JS, правда, еще можно на ходу лепить функции через new Function, но в проде никогда этим не пользовался

                                                                  Dart тоже позволяет подобное https://dart.dev/guides/language/language-tour#functions-as-first-class-objects


                                                                  но в проде никогда этим не пользовался

                                                                  А классной штукой, приведенной выше, пользовались?)

                                                                    0
                                                                    Тоже нет.)
                                                                    По ссылке передача функции через параметры.

                                                                    Я имел ввиду это:
                                                                    var f = new Function('a', 'b', 'console.log(a * b)');
                                                                    f(2, 5)
                                                                    

                                                                    А вот call и apply в проде использовал, но редко. Но, в качестве исключения, часто юзал такую конструкцию:
                                                                    Object.prototype.toString.call
                                                                    
                                                                      0
                                                                      По ссылке передача функции через параметры.

                                                                      Я имел в виду это (чуть ниже написано):


                                                                      var loudify = (msg) => '!!! ${msg.toUpperCase()} !!!';
                                                                      assert(loudify('hello') == '!!! HELLO !!!');
                                                                        0
                                                                        Не, это не то.
                                                                        Тут функция вызывается с параметрами.
                                                                        А там именно собирается функция.
                                                                        var f = new Function('a', 'b', 'console.log(a * b)');
                                                                        console.log(f)
                                                                        // ƒ anonymous(a,b) {
                                                                        //     console.log(a * b)
                                                                        // }
                                                                        
                                                                          0
                                                                          Думаю в теории ничего не мешает написать и запихнуть простой компилятор который бы умел по описанию функцию в .so собрать, и на лету эту «библиотеку» подключить и дергать функцию. По крайней мере в андроиде по идее сработать должно. Но не факт что такое пропустят в сторы. Да и сложно и не нужно.
                                                            +1

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

                                                              +1
                                                              Я часто встречал к кросс-платформе требование к скорости. Можно сказать, оно было одним из самых основных.
                                                              • UFO just landed and posted this here
                                                                  0
                                                                  Я не замечал. Есть примеры тормозов Dart о которых вы говорите?
                                                                  Ну Dart хоть и известен меньше, но его создатель не какая-то компания новичок и работа над ним ведется активная.
                                                                  • UFO just landed and posted this here
                                                                      0
                                                                      Меньше, но крупные есть.
                                                                    0
                                                                    По поводу этих приложений:
                                                                    Насколько мне известно, внутренняя версия RN Facebook отличается от той что open-source.
                                                                    Также крупные компании форкают RN и поддерживают свою версию.
                                                                    А Airbnb вообще отказалась от React Native.
                                                                      0
                                                                      Да, эта именно та ситуация, когда примеры приложений, разработанных большими компания, нельзя считать валидными. Идея в том, что с таким количеством ресурсов, как в представленных компаниях, я могу организовать написание своего собственного фреймворка, который будет работать аналогично RN или даже лучше (я серьезно, учитывая опыт с Cordova).
                                                                      Airbnb плюсую. RN годится только для простых приложений (в т.ч. макетов) с учетом того, что в определенный момент развития (если еще будет такое) целесообразно будет выпустить нативные версии и развивать их. Для сложных приложений, которые развиваются быстро, все равно надо будет кодить нативно (JS разработчики и кодить не смогут быстро (или вообще не смогут), и не будут знать многих нюансов платформ), так как RN сообщество развивает только некоторые отдельные библиотеки — остальные устаревают и выпадают из зависимостей (на последнем RN проекте при обновлении версии RN даже пришлось форкать некоторые либы и переписывать).
                                                                      • UFO just landed and posted this here
                                                                          0
                                                                          К теме скорее относится тот факт, что крупные компании форкают RN (с чего бы это). А с Flutter такой потребности нет.
                                                                          • UFO just landed and posted this here
                                                                              0
                                                                              Опять же аргумент в пользу выбора крупных компаний невалиден.
                                                                              Как корпоративное звено, могу ответить просто — RN очень легко «продать» (получить спонсорство, финансирование). То есть я могу легко собрать пять статей, где его расхваливают, рассказать про одно приложение на две платформы силами только дешевой JS разработки, большое стабильное сообщество со звездами у репозиториев, множество библиотек, универсальные автотесты, примеры от многих компаний. Все это под соусом позитива (хотя в каждом пункте есть нюансы, которые уничтожат возможность развития продукта на каком-то этапе).
                                                                              Flutter на данный момент я не могу «продать», не хватает материала для убеждения, статей, где кто-то брызжа слюной доказывает (аналогия с RN), что он космос.
                                                                              Вот и все.
                                                                                0
                                                                                Flutter может помочь продать только развеивание ожиданий

                                                                                Вот это все про «JS разработчиков которые легко включаются в проект». С таким «легко» они и в Dart включатся, не в JS сложность.
                                                                                  0
                                                                                  Dart после JS дается легко. Даже легче чем после Java. А если знания ООП языков то легче легкого.
                                                                                0
                                                                                Официальный список компаний использующих Flutter.
                                                                                И я бы не сказал что эти компании маленькие или ноунеймы.
                                                                                • UFO just landed and posted this here
                                                                                    0
                                                                                    Флаттер еще и на десктопах планируется. В вебе тоже — но там я лично в него не верю. А еще это прикольно и интересно.
                                                                                      0

                                                                                      В вебе флаттер вполне способен занять нишу разработки PWA. Понятно, что какой-нибудь блог на нем вряд ли кто делать будет, ну так для блога и реакт – не самый лучший выбор.

                                                                                      0
                                                                                      А кто, по вашему, 1 эшелон?
                                                                                      Если Flutter закроет потребности которые не сможет React Native.
                                                                                      Или нужно говорить юзерам «Миритесь с проблемами, зато у нас React Native»?

                                                                                      На RN можно допилить нативно, — но это уже трата дополнительных ресурсов. А мы, вроде как, хотели сэкономить. На Flutter тоже иногда приходится лезть в нативную часть, но куда реже.
                                                                      +1
                                                                      Первое. В статье приведены тесты производительности, там прогоняются CPU-intensive задачи. Я думаю, это невалидный аргумент в споре RN vs Flutter, т.к. на практике 99% всех задач, которые будут ставится перед RN или Flutter, не включают в себя сложных CPU задач.

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

                                                                      Если вы их используете для создания игр, real time machine learning, 3d графики и пр., то вы просто используете неподходящий инструмент.

                                                                      Второе. У меня за плечами разработка большого приложения (порядка 30 экранов) с команде из 3 разработчиков, которое работает на базе RN и при этом занимало и занимает топовые позиции в каталоге App Store. Мне кажется, это подтверждает аргумент, что можно делать крутые приложения на RN, которые нравятся пользователям.
                                                                        0
                                                                        > на практике 99% всех задач, которые будут ставится перед RN или Flutter, не включают в себя сложных CPU задач

                                                                        Откуда утверждение про 99%? А если будут, тогда что? На Swift переписывать?
                                                                          0
                                                                          Потому что в типовых приложениях, для которых используется RN, я не видел и не могу представить CPU intensive задачи. То есть 99% исходят из опыта и из понимания сферы «пригодности» фреймворков.
                                                                          Если все же есть такая потребность, но у RN неплохая документация, как написать подключить к RN произвольный нативный модуль. Этим тоже мы нередко занимались, подключая внутренние нативные модули нашей компании.
                                                                          Если ли же в вашем приложении процентное соотношение другое, то, конечно, стоит присмотреться к другим вариантам.
                                                                          0
                                                                          А вы форкали себе RN и допиливали или работаете на стандартной версии?

                                                                          Советую еще посмотреть это видео.
                                                                            0
                                                                            Не форкали, но пару патчей накладывали, сопровождая их, конечно, соотв. PR в React Native. Там, кстати, весьма все дружелюбно и, как правило, в след. минорной версии были уже наши правки и убирали патчи.

                                                                            Видео гляну, спасибо.

                                                                        Only users with full accounts can post comments. Log in, please.