React Native против Flutter: что лучше

YouTube-блог Fireship сделал обзор на React Native и Flutter, чтобы выяснить, какой фреймворк лучший в мобильной разработке.

Вот, о чём идёт речь в видео:

1. Существуют два основных инструмента для создания кроссплатформенных мобильных приложений: Flutter и React Native.
2.  Flutter и React Native позволяют разрабатывать приложения для iOS, Android и веб из одной кодовой базы, но они сильно различаются по механизму работы и опыту разработчика.
   
3. Автор сравнил оба инструмента, создав одно и то же чат-приложение с использованием Firebase в качестве бэкенда.
   
4. React Native использует JavaScript или TypeScript, в то время как Flutter использует язык Dart, оптимизированный для компиляции на разные платформы.
   
5. Flutter поставляется с обширной библиотекой виджетов и плагинов, в то время как React Native предоставляет базовые компоненты и полагается на сторонние библиотеки.
   
6. React Native использует родные компоненты платформы и JavaScript-мост для взаимодействия с ними, в то время как Flutter использует собственный движок для рендеринга виджетов.
   
7. Разработка в React Native может включать больше сторонних зависимостей и решений, в то время как Flutter предлагает более унифицированный и интегрированный набор инструментов.
   
8. Инструменты разработки Flutter, такие как горячая перезагрузка и сильная типизация, обеспечивают удобную и надежную разработку.
   
9. Flutter, как правило, обеспечивает более высокую производительность по сравнению с React Native благодаря компиляции непосредственно в машинный код без необходимости JavaScript-моста.
   
10. Для большинства приложений различия в производительности между Flutter и React Native будут незаметны для конечного пользователя.
    

Ниже — транскрибированный перевод ролика на русском языке.

Если вы сегодня создаете кросс-платформенное мобильное приложение, то существуют два главных игрока, борющихся за ваше внимание. В красном углу у нас Flutter, а в синем углу у нас React Native.

Эти инструменты могут достичь той же основной цели: создание приложений для нескольких платформ, таких как iOS, Android и веб, из одного исходного кода.

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

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

К концу видео вы точно узнаете, какой из них лучше подходит для вашей идеологии. Но это не урок построчного кодирования. Если вы хотите научиться создавать эти приложения с нуля, я создал два отдельных профессиональных урока на Fireship, которые научат вас создавать их пошагово.

Языки программирования для React Native и Flutter

Давайте начнем с сравнения языков программирования между этими двумя фреймворками. В React Native мы пишем приложения на JavaScript, при этом React является обязательной библиотекой пользовательского интерфейса, поэтому это почти как расширение языка JavaScript. Также поддерживается TypeScript, если вы хотите добавить систему типов поверх JavaScript. JavaScript на самом деле никогда не был разработан для создания мобильных приложений, поэтому Flutter был реализован с использованием другого языка, называемого Dart, который оптимизирован для компиляции в несколько платформ с компиляцией как во время выполнения, так и до. Это приводит к различным преимуществам производительности, но это язык, который знают не так многие люди за пределами Flutter. У него синтаксис, который в чем-то напоминает TypeScript, поэтому разработчикам, привыкшим к фигурным скобкам, легко начать работу с ним. Но это главный вопрос, который вам нужно задать себе.

Хочу ли я изучить совершенно новый язык, или хочу придерживаться того, что я уже знаю?

Экосистема React Native и Flutter

Теперь давайте посмотрим на экосистему за этими фреймворками. Оба из них являются двумя из самых активно разрабатываемых репозиториев на GitHub в мире.

React Native от F******k, которую критикуют за то, что она является зловредной технологической корпорацией, в то время как Flutter от Google, которую также критикуют за то, что она является зловредной технологической корпорацией. Создание высококачественных кросс-платформенных мобильных приложений - это чрезвычайно сложная техническая задача, и поэтому вам нужно привлечь зловредную технологическую корпорацию, чтобы сделать все правильно.

Философия разработки на React Native и Flutter

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

У Dart также есть менеджер пакетов под названием Pub, и также существует огромная экосистема пакетов с открытым исходным кодом для Flutter. В конечном итоге у них обоих есть огромные сообщества, чтобы сделать практически все, что вы можете себе представить.

Архитектура React Native и Flutter

Теперь давайте посмотрим на их базовые архитектуры. Во-первых, как работает React Native? Под капотом он запускает два отдельных потока JavaScript. Один - основной поток для запуска вашего приложения на любой нативной платформе, а другой - поток для выполнения бизнес-логики вашего приложения.

Эти потоки изолированы друг от друга, но иногда им нужно взаимодействовать, поэтому между ними есть мост, через который они могут передавать сериализованные сообщения туда и обратно. Здесь хорошо то, что это позволяет JavaScript-приложению взаимодействовать с нативной платформой. Таким образом, когда React Native рендерит компонент, это действительно нативный компонент на соответствующей платформе. Это не просто веб-сайт React, упакованный как мобильное приложение, это действительно рендеринг нативных компонентов. И это означает, что ваш пользовательский интерфейс будет выглядеть точно так же, как задуманы эти нативные компоненты, даже когда что-то меняется в будущем. Теперь, как работает Flutter? Вместо использования нативных компонентов пользовательского интерфейса, у Flutter есть собственный высокопроизводительный движок рендеринга, построенный на C++ и Skia, который рендерит свои собственные пиксели на экране с скомпилированным нативным кодом, что позволяет ему рендерить пиксель-перфектные версии виджетов iOS и Android, а также позволяет рисовать свои собственные пиксели на экране. Вроде игрового движка, например, Unity. Это позволяет рисовать плавную графику без необходимости моста, хотя у него есть система под названием платформенные каналы, которая позволяет вам общаться с родной системой, когда вам нужны родные функции или если вы хотите интегрировать родной код. В конце дня, однако, архитектура не имеет большого значения. Важно, чтобы вы создали хороший пользовательский опыт и получили удовольствие от этого.

Опыт разработки на React Native и Flutter

Итак, теперь давайте сравним опыт разработчика, начиная с начальной настройки. Чтобы начать работу с React Native, вы можете создать новое приложение, запустив npx react-native-init из командной строки, и при желании передать шаблон с чем-то вроде native base, чтобы получить красивый интерфейс изначально. И здесь вы также можете использовать Expo вместо стандартного React Native CLI, чтобы получить более полную отправную точку. Когда вы откроете приложение, вы заметите немало файлов здесь в корневом каталоге.

Это в основном файлы конфигурации, такие как Metro и Watchmen для горячей перезагрузки. Buck - ваш инструмент сборки, а Babel - для транспиляции вашего JavaScript. Он даже поставляется с flow по умолчанию, поэтому он очень похож на F******k. Исходный код приложения содержится в одном файле app.js, если мы перейдем и откроем этот файл, вы заметите кучу кода React. Это может показаться знакомым, если вы веб-разработчик, и единственное реальное отличие в том, что мы импортируем специальные компоненты из React Native и используем их в JSX вместо типичных элементов HTML. Это наша отправная точка для React Native. Теперь давайте посмотрим на Flutter. После установки Flutter SDK запустите flutter create из командной строки. Вы заметите, что это значительно быстрее, потому что ему не нужно обращаться к NPM для загрузки кучи пакетов.

Откройте проект в VS Code и убедитесь, что у вас установлено расширение Flutter. Оно фактически автоматически управляет любыми дополнительными пакетами, которые вы устанавливаете, в фоновом режиме. Структура проекта здесь немного упрощена. Ваш основной файл конфигурации - это файл pubspec.yaml, который эквивалентен package JSON в проекте React Native. Здесь вы регистрируете и устанавливаете сторонние пакеты. Исходный код приложения содержится в файле main.dart. Теперь, если вы веб-разработчик, который никогда не работал с TypeScript, этот код может показаться немного сумасшедшим, с ключевыми словами, такими как extends, super и override.

Но если у вас есть опыт работы с TypeScript, Java или C Sharp, то вы, вероятно, будете чувствовать себя как дома с этим кодом.

Инструменты разработки в React Native и Flutter

Теперь, когда у нас есть настроенный проект, я хочу поговорить о инструментах, которые действительно важны при создании кросс-платформенных мобильных приложений, потому что без хороших инструментов ваша жизнь будет мизерной. Давайте начнем с запуска приложения React Native. У меня запущен эмулятор Android, затем мне нужно выполнить эту команду ADB, чтобы подключиться к нему. Затем я запускаю npm start, чтобы запустить Metro для отслеживания изменений в моем коде в фоновом режиме. Затем в отдельном терминале введите npm run android, чтобы построить приложение Android. Это установит приложение на эмулятор и будет отслеживать изменения кода в фоновом режиме для автоматического обновления приложения.

Мы также можем ввести R в терминал watchman, чтобы горячая перезагрузка приложения. Это чрезвычайно полезно, потому что оно сохраняет состояние приложения, сохраняя при этом ваши изменения кода, если вы работаете над дизайном. Это существенно, но когда речь идет о инструментах с React Native, это действительно история "создай свое собственное приключение". Это просто JavaScript ...проект, поэтому вы можете добавить TypeScript или вы можете использовать Ignite CLI для автоматической генерации каркаса, или использовать Expo для быстрого запуска приложения на своем устройстве.

Приятно иметь много вариантов, но это также может привести к усталости от принятия решений и чрезмерной зависимости от сторонних поставщиков. Теперь, если мы переключимся на приложение Flutter, вы заметите кнопку здесь в VS Code, которая позволяет нам взять эмулятор, настроенный в локальной системе. Затем мы можем открыть терминал и ввести flutter run, и мы также можем горячую перезагрузку, потому что Dart поддерживает компиляцию во время выполнения, также введя R в терминал. Теперь, поскольку у Dart есть звуковая система типов, он способен предоставлять действительно хорошие инструменты при написании вашего кода. Обратите внимание, как при наведении на любой класс он предоставляет полную документацию для него. Но, что более важно, Dart делает действительно сложным написание кода, который приводит к ошибкам во время выполнения.

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

Код на React Native и Flutter

И это особенно важно для мобильных приложений, потому что вы живете и умираете от отзывов в магазинах приложений. Теперь вы также можете добавить TypeScript к React Native, чтобы получить похожие результаты, но Dart делает другие вещи, такие как безопасность null, чтобы сделать ваш код еще более надежным. Еще одна интересная вещь в коде заключается в том, что обе фреймворки создают дерево компонентов или виджетов. В React Native это выглядит как HTML или JSX, где у вас есть тег, например, view, и затем вы добавляете другой компонент внутрь этого, а затем, возможно, еще больше компонентов внутри этого.

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

При ручном кодировании перестройка становится более сложной, на мой взгляд. Вы не можете просто скопировать и вставить компонент, как вы бы сделали в React. Однако у Flutter снова есть очень хорошие инструменты, которые позволяют обернуть и переместить виджеты, просто щелкнув кнопку в VS Code. После создания чат-приложения с обоими фреймворками, одним из недостатков, который я обнаружил в Flutter, является то, что я часто получал глубоко вложенные деревья виджетов, которые трудно... вы всегда можете выделить эту логику в свои собственные пользовательские виджеты, но я просто не нахожу процесс таким интуитивно понятным, как в React, где вы просто создаете новую функцию для каждого пользовательского интерфейса. Теперь проблема с React заключается в том, что часто нет компонента, который делает именно то, что вы хотите сделать.

Это означает, что вам нужно начать с базового компонента, а затем заставить его делать то, что вы хотите, или установить сторонний пакет. Кроме того, многие библиотеки React несовместимы с React Native. Например, если вы хотите потрясающие анимации с frame или motion, это не сработает в React Native.

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

Теперь последнее, что я хочу рассмотреть, это производительность. Возможно, вы задаетесь вопросом, быстрее ли Flutter, чем React Native?

И ответ, скорее всего, да. Цель обычно состоит в том, чтобы рендерить 60 кадров в секунду. И поскольку приложения Flutter компилируются непосредственно в машинный код и не требуют моста JavaScript, они, как правило, работают лучше, основываясь на большинстве тестов, которые я смог найти в интернете.

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

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