В чем разница между React Native, Flutter и Felgo?

С момента выпуска фреймворка Google Flutter для разработки мобильных приложений в сообществе разработчиков возникла большая шумиха вокруг него. Многие из вас спрашивали нас:

«Чем Flutter отличается / лучше, чем React Native, Felgo и другие фреймворки для разработки мобильных приложений?»

а также

«Какая сегодня самая лучшая платформа для мобильных приложений?»

Итак, приступим к ответам на эти вопросы.

Что нового и особенного во Flutter?

Или, как сказал Wm Leeler, адвокат разработчиков и старший инженер-программист в Google в этой статье - Что революционного во Flutter??

Примечание. В этом посте мы будем довольно подробно ссылаться на статью Wm, поскольку она отлично объясняет некоторые ключевые особенности Flutter.

Пользовательский рендерер Flutter

Ядро Flutter основано на C ++ и использует OpenGL ES для эффективного рендеринга своего контента на iOS и Android. Это ключевое различие между подходом, выбранным React Native, Angular / Ionic или другими. Давайте углубимся немного глубже, чтобы выяснить, почему это важно, а также какие преимущества и недостатки имеют разные подходы.

Различия между нативным рендерингом, пользовательским рендерингом и рендерингом WebView

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

1. Веб-рендеринг - например, Cordova (Phonegap), Angular, Ionic.

На ранних этапах разработки кроссплатформенных мобильных приложений контент отображался в WebView, который является окном браузера в приложении. Самым популярным фреймворком, использующим этот подход, был Phonegap, позже переименованный в Cordova.

Как разработчик, вы должны определить, например, кнопку, и затем эта кнопка будет стилизована с помощью CSS таким образом, чтобы она выглядела как обычная кнопка в iOS и Android.

Основные недостатки этого подхода:

Производительность WebView сильно различается между смартфонами, поскольку они внутренне полагаются на версию WebView, используемую в версии операционной системы (например, Android 4.0 против 6.0).
Вы зависите от Apple (iOS) и Google (Android), чтобы добавить функции и улучшить производительность WebView.
Поддерживаемые функции, такие как определенные поля CSS или поддерживаемый стандарт JavaScript, зависят от используемого веб-движка (WebKit и Chromium используются в iOS и Android соответственно). Это, в свою очередь, затрудняет сопровождение, так как вам необходимо поддерживать несколько версий и типов браузеров WebView, что похоже на проблемы, с которыми сталкиваются веб-разработчики и кошмары от ... поддержки Internet Explorer, как вы сказали?

Наиболее существенным недостатком является производительность, которая также была основной причиной, по которой Facebook отказался от веб-подхода для своих собственных приложений и переписал свои мобильные приложения в 2012 году для iOS и Android - с двумя отдельными кодами. базы и отдельные команды.

2. Нативный рендеринг - например, React Native или NativeScript.

Давайте снова возьмем Facebook в качестве примера, посмотрев на историю разработки своих внутренних приложений. Это отличный индикатор изменений в ландшафте разработки мобильных приложений. После разработки собственных приложений для iOS и Android ключевой недостаток разработки собственных приложений (длительное время разработки) привел к появлению собственной структуры, которая должна была решить ключевую проблему веб-рендеринга (низкая производительность), и все же позволяют работать с общей кодовой базой для обеих платформ. Вот почему React Native был запущен на внутреннем хакатоне Facebook в 2013 году и был выпущен для широкой публики в виде бета-версии в январе 2015 года.

React Native использует совершенно другой подход к веб-рендерингу: вместо рендеринга контента в WebView или мобильном браузере контент рендерится с помощью собственных OEM-виджетов, предоставляемых платформой. JavaScript по-прежнему используется для логики приложения, чтобы иметь возможность повторно использовать одну и ту же логику на разных платформах. Рендеринг, который является наиболее чувствительной к производительности частью, выполняется с помощью собственных компонентов именно по этой причине: высокая производительность.

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

Однако у «гибридного нативного подхода к рендерингу» есть и недостатки:

Для iOS и Android необходимо написать собственный пользовательский интерфейс отдельно. Это также означает, что анимацию пользовательского интерфейса необходимо разрабатывать отдельно, что приводит к двум отдельным ветвям кода, дополнительным усилиям по добавлению новых функций, исправлению ошибок и т. Д.
Создание настраиваемых пользовательских интерфейсов с поддержкой тем при таком подходе сложно, поскольку вы ограничены тем, что виджеты платформы предоставляют с точки зрения стиля.
Производительность: всякий раз, когда в отображаемых данных происходит изменение, приложение должно сначала сравнить разницу с его текущим состоянием в JavaScript, и, если оно обнаруживает изменение, распространить это на собственное представление с помощью JavaScript Bridge. Это узкое место в производительности, которое вы можете наблюдать в приложениях React Native.

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

3. Пользовательский рендеринг - например, Flutter, Felgo и Qt.

Flutter устраняет недостатки гибридного нативного рендеринга с помощью следующего решения:

В чем разница между Flutter и React Native?

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

Вы также можете увидеть это при параллельном сравнении:

Пользовательский рендерер, используемый во Flutter и Felgo

Native Renderer, используемый в React Native:

Отличия Flutter и React Native

Подводя итог, самое большое различие между Flutter и React Native - это способ отображения контента на экране:

Flutter использует настраиваемый рендерер. Это гарантирует, что ваше приложение будет иметь одинаковый макет на iOS и Android с одним исходным кодом. Это также означает, что у него не будет 100% нативного опыта.
React Native требует, чтобы вы разработали отдельный пользовательский интерфейс для iOS и Android. Пользовательский интерфейс будет вести себя точно так же, как собственные виджеты.

Зачем мне использовать код макета для iOS и Android?

В FAQ по Flutter это довольно хорошо описано:

«Вы можете реализовать различные макеты приложений для iOS и Android. Разработчики могут свободно проверять мобильную ОС во время выполнения и отображать различные макеты, хотя мы считаем, что такая практика встречается редко. Все больше и больше мы видим, что макеты и дизайн мобильных приложений развиваются, чтобы быть более ориентированными на бренд и унифицированными для разных платформ. Это подразумевает сильную мотивацию к совместному использованию макета и кода пользовательского интерфейса для iOS и Android. Идентификация бренда и настройка эстетического дизайна приложения теперь становятся более важными, чем строгое соблюдение эстетики традиционной платформы. Например, для дизайна приложений часто требуются пользовательские шрифты, цвета, формы, движение и многое другое, чтобы четко передать их фирменный стиль. Мы также видим общие шаблоны макетов, развернутые в iOS и Android. Например, шаблон «нижняя панель навигации» теперь естественно найти в iOS и Android. Похоже, что на мобильных платформах происходит сближение дизайнерских идей ».

Мы можем только полностью согласиться с этим! На современном рынке фирменный пользовательский интерфейс - лучший вариант.

Чтобы доказать это, вот коллекция приложений, удостоенных награды за дизайн:

Источник: Почему Flutter не использует OEM-виджеты

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

Когда лучше использовать Flutter или React Native?

Этот вопрос сводится к требованиям вашего приложения. Самым большим преимуществом React Native является то, что у вас есть более «традиционное» приложение, в котором используются собственные элементы с небольшими возможностями расширения стиля или анимации. Идеальные варианты использования - это приложения для социальных сетей, такие как сам Facebook, или приложения для обмена сообщениями, такие как Slack или WhatsApp.

Flutter отлично подходит, когда вы хотите сделать более современный пользовательский интерфейс, индивидуальный стиль и анимированные пользовательские интерфейсы. Отличным примером для этого являются такие приложения, как Spotify или Airbnb (см. Выше).

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

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

Опыт команды разработчиков. С каким языком программирования ваша команда работает больше всего? См. Сравнение языков в следующем пункте, чтобы понять, какой фреймворк для кого лучше.
Существующий исходный код. Есть ли у вас существующий исходный код, который вы планируете использовать повторно? Это языки программирования, поддерживаемые каждым инструментом соответственно:
JavaScript: и React Native, и Felgo поддерживают JS. Для JS доступно множество библиотек и компонентов.
Java / Dart: Flutter поддерживает эту кроссплатформенность. Доступность библиотек и встроенных SDK для Dart ограничена, поскольку это гораздо более молодой, менее известный и используемый язык программирования, чем C ++ или JavaScript.
C ++: Felgo имеет лучшую поддержку C ++, чем React, благодаря расширенным возможностям фреймворка Qt и лучшей интеграции C ++ со сценариями.
Собственный код iOS на Obj-C / Swift или собственный код Android на Java / Kotlin: все 3 фреймворка поддерживают интеграцию собственного кода iOS или Android. Имейте в виду, что вам нужно будет поддерживать этот код отдельно для каждой платформы, если вы хотите его сохранить.
Наем новых разработчиков: нанять разработчиков JavaScript проще, чем разработчиков C ++ или Dart. Также следует учитывать время, необходимое для изучения нового фреймворка - Flutter и Felgo значительно легче изучить и освоить, чем React Native.

The Flutter Hype - Почему Flutter НЕ является революционным

Flutter - не единственный и не первый фреймворк, использующий подход индивидуального рендеринга. Фактически, Felgo, основанная на фреймворке Qt, использует этот подход с 2012 года! Фактически все игровые движки и игровые фреймворки используют этот подход настраиваемого средства визуализации на основе C ++, чтобы иметь возможность получить требуемую производительность для игр.

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

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

Оба варианта использования объединены в Felgo SDK, доступном для загрузки здесь. Чтобы поддержать упомянутые выше тенденции, мы начали разработку компонентов приложения в Felgo в 2015 году и с тех пор сосредоточили большую часть наших исследований и разработок в этой области.

В чем разница между Flutter и Felgo?

Цели. И Flutter, и Felgo были разработаны для создания современных мобильных приложений, требующих плавной анимации пользовательского интерфейса и превосходного пользовательского интерфейса. Компоненты Flutter были разработаны, чтобы максимально ускорить разработку пользовательского интерфейса, потому что это часто занимает больше всего времени в процессе разработки приложения. Точно так же Felgo использует QML - реактивный язык сценариев, который можно комбинировать с JavaScript и C ++, который был специально разработан с нуля с целью добиться успеха в одном: разработке пользовательского интерфейса.

Там, где возможности Flutter заканчиваются разработкой для мобильных приложений, Felgo также позволяет разрабатывать игры, встроенные платформы, настольные и веб-приложения с одним и тем же SDK и смешивать эти API в одном приложении. Кроме того, Felgo позволяет рендерить 3D-контент в вашем мобильном приложении, что становится все более важным с появлением пользовательских 3D-интерфейсов. Но также потому, что визуальные эффекты, такие как шейдерные эффекты, становятся все популярнее в разработке мобильных приложений, чтобы ваше приложение выделялось - все эти требования поддерживаются в Felgo.

Язык программирования: Flutter использует Dart, расширение Java от Google. Felgo использует QML для реактивного (декларативного псевдонима) определения элементов пользовательского интерфейса и JavaScript или C ++ для реализации логики приложения. QML расширяет JavaScript с помощью функций безопасности типов (аналогично TypeScript) и функций реактивного программирования - так называемых привязок свойств в QML - для повышения эффективности с меньшим количеством кода.

Поддерживаемые платформы: Flutter поддерживает iOS и Android. Felgo также поддерживает iOS и Android, а также настольные платформы Windows, Mac OS и дистрибутивы Linux, такие как Ubuntu. Felgo также поддерживает встроенные платформы на базе Linux, такие как Raspberry Pi или Arduino. В настоящее время мы также работаем над добавлением функции экспорта для Интернета, которая позволит вам использовать один и тот же исходный код на всех платформах.

Инструменты разработки: во Flutter вы разрабатываете свое приложение в Android Studio или Visual Studio Code. Felgo является расширением Qt Creator IDE, в котором есть визуальный редактор пользовательского интерфейса с поддержкой перетаскивания компонентов приложения и параллельным представлением кода и визуального редактора.

Felgo также поддерживает Live Reloading на рабочем столе для быстрой имитации пользовательского интерфейса на мобильных устройствах. А также мобильное приложение для перезагрузки в реальном времени, которое поддерживает перезагрузку кода, который вы только что сохранили в IDE на своем мобильном телефоне. Это значительно сокращает время разработки, так как вы экономите время на повторное развертывание всего приложения каждый раз. Flutter также поддерживает горячую перезагрузку. Преимущество Felgo заключается в том, что вы можете моделировать мобильные пользовательские интерфейсы для различных платформ в настольной сборке и даже можете изменять стиль платформы во время выполнения.

Скомпилированный код и производительность: Dart и, следовательно, Flutter используют виртуальную машину Java (JVM) для предварительной компиляции вашего кода. Felgo использует механизм QML для компиляции кода сценария в код C ++ во время выполнения. Для публикации приложения вы можете включить опережающую компиляцию с помощью Qt Quick Compiler: затем код QML предварительно анализируется, и для него генерируется байт-код C ++. С точки зрения производительности скомпилированный код Java работает медленнее, чем сгенерированный код C ++, однако код JavaScript для логики приложения, используемый в QML, медленнее, чем код Java. Вот почему мы рекомендуем разрабатывать критически важные для производительности части кода приложения на C ++, что обеспечивает лучшую производительность.

Однако для большинства приложений логика приложения будет в основном содержать запрос данных с веб-сервера и отображение их с помощью настраиваемого средства визуализации. В этом случае достаточно производительности логики приложения на JavaScript. Если у вас есть требования к данным, которые вы обрабатываете в реальном времени, например, анализ видеопотока, эту часть следует выполнять с помощью C ++ и путем создания API для среды сценариев, чтобы уведомлять, например, о завершении обработки. Вы можете найти пример кода для этого сценария здесь.

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

Felgo основан на фреймворке Qt, который имеет выпуски с длительной поддержкой (LTS), которые гарантированно получают исправления ошибок в течение 2 лет. Это позволяет вам выбрать, хотите ли вы сохранить свой проект на более старых версиях Qt, которые все еще содержат исправленные ошибки и гарантированно остаются совместимыми с API (эти две темы являются основным отличием здесь!). Или вы можете выбрать обновление до последней версии Qt, чтобы использовать новейшие функции.

Таблица сравнения функций Flutter, React Native и Felgo

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

Недостатки Felgo по сравнению с Flutter

Для честного сравнения мы также хотели бы описать недостатки, которые Felgo (в настоящее время) сравнивает с Flutter.

Лицензирование

Это FAQ по Flutter о лицензировании:

Flutter включает в себя два компонента: движок, который поставляется как динамически связанный двоичный файл, и фреймворк Dart как отдельный двоичный файл, который загружается движком. Движок использует несколько программных компонентов с множеством зависимостей; просмотреть полный список Фреймворк полностью автономен и требует. Кроме того, любые используемые вами пакеты Dart могут иметь свои собственные лицензионные требования. только одна лицензия . здесь .

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

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

Felgo основывается на Qt Framework, и поэтому применяются те же условия лицензирования, что и Qt. Qt доступен в виде LGPL v3 и коммерческих лицензий.

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

Так что же такое ЛУЧШАЯ платформа для разработки кроссплатформенных мобильных приложений?

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

У вас есть кодовая база, которую вы хотели бы использовать повторно? Если да, выберите технологию, позволяющую повторно использовать ваш код. В частности, инструмент должен поддерживать тот же язык программирования, на котором написана ваша существующая кодовая база.
Есть ли у вашей команды разработчиков (положительный) опыт выпуска приложений с технологией? В таком случае вам будет труднее заставить их попробовать другой инструмент. Вы можете найти некоторые допустимые аргументы в следующих элементах списка.
Каковы требования к вашему приложению? Это самый важный вопрос. Каждый из инструментов отлично подходит для разных приложений. Должен ли он иметь пользовательский интерфейс или собственный интерфейс? Смесь двух? См. Рекомендации в таблице функций выше.
Планируете ли вы привлечь на борт новых разработчиков? Какие языки программирования знают ваши существующие разработчики?

Таким образом, не существует единого лучшего решения для всего. Это действительно зависит от вашего варианта использования. Для компаний, которые полагаются на стабильность и ценят выделенный уровень корпоративной поддержки, единственным вариантом является Felgo & Qt, что также является причиной, по которой многие из компаний из списка Fortune 500 полагаются на него.