Сравнение Ionic и Flutter для разработки мобильных и прогрессивных приложений

Я разрабатываю мобильные приложения на Ionic Framework и меня периодически спрашивают почему не пишу на Flutter. Наткнулся на отличный материал от разработчиков Ionic и решил его перевести.

Перевод статьи Ionic vs Flutter: A Comparison.

Flutter был выпущен в конце 2018 года и многие спрашивают, какой подход лучше. Чтобы помочь разработчикам принять правильное решение, мы объединили это краткое руководство, чтобы объяснить сходства и различия. В частности, мы поговорим о том, что, несмотря на то, что Ionic и Flutter имеют схожую миссию и видение, наши представления о технологиях имеют концептуальные различия.

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

Принцип Ionic заключается в использовании веб-платформы и применении открытых стандартов везде, где это возможно.

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

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

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

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

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

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

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

Различия между Ionic и Flutter начинаются с основной философии каждой команды; которая, как вы увидите, расходиться в применяемых технологиях.

Во всем, что мы делаем в Ionic, нашим руководящим принципом является «использование платформы», охватывая открытые веб-стандарты и возможности. На самом деле, когда вы выбираете Ionic, вы на самом деле не ставите на Ionic. Вы делаете ставку на веб технологии, самое проверенное временем универсальное решение в мире. Это связано с тем, что Ionic Framework основаны на открытых веб-технологиях, начиная с веб-языков, которые вы используете для создания приложений Ionic (HTML, CSS, JavaScript), и заканчивая стандартными компонентами пользовательского интерфейса, работающими внутри вашего приложения.

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

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

Основным языком Flutter является Dart, малоизвестный язык, относящийся к 2011 году. Хотя он существует уже некоторое время, немногие разработчики знакомы с ним сегодня (менее 2%, согласно опросу StackOverflow в 2019 году), и он редко используется за пределами сообщества Flutter.

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

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

Хотя Flutter заявляет о полной переносимостью вашего приложения, развертывание приложения Flutter в виде сайта (все еще в техническом предварительном просмотре) требует некоторой творческой акробатики. Flutter использует тот же компилятор Dart для генерации JavaScript, который будет отображаться в браузере. Затем они заменяют графический движок и средство визуализации текста на основе Skia пользовательским механизмом визуализации, а затем перестраивают основные примитивы веб-браузера. Здесь есть сходство с Adobe Flash.

Поддержка десктопных приложений также находится в альфа версии, и команда Flutter ожидает, что в конечном итоге она будет поддерживать Windows, Mac, Linux и Chrome OS.

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

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

Ionic приложения создаются с использованием языков веба: HTML, CSS и JavaScript. Таким образом, если вы знаете, как создать базовое веб-приложение, вы уже знаете, как строить с помощью Ionic.

С помощью Ionic можно развернуть собственное приложение iOS или Android, собственное десктоп приложение или веб-приложение из одной общей кодовой базы.

При работе на мобильных устройствах Ionic работает внутри собственного контейнера с использованием Cordova или, в последнее время, Capacitor, которые обеспечивают полный доступ к любым собственным функциям устройства или API. Пользовательский интерфейс вашего мобильного приложения Ionic работает в WebView, который фактически является браузером, невидимым для пользователя. В настольной реализации Ionic работает внутри собственного десктопного контейнера, такого как Electron, или непосредственно в любом мобильном или настольном браузере в качестве прогрессивного веб-приложения.

Компоненты пользовательского интерфейса, используемые в приложении Ionic, используют стандарт веб-компонентов, поэтому они будут работать в любом веб — браузере и совместимы с любой платформой JS, включая React, Vue и Angular-или вообще без платформы. Ionic предоставляет библиотеку из более чем 100 компонентов пользовательского интерфейса, которые вы можете настроить с помощью CSS в соответствии с вашими рекомендациями по бренду. Вы также можете использовать Stencil, компилятор веб-компонентов с открытым исходным кодом от команды Ionic, для создания собственной библиотеки пользовательских веб-компонентов. Фактически, любой веб-компонент пользовательского интерфейса или веб-библиотека будут работать в Ionic приложении, предоставляя вам свободу использовать что-либо в интернете для вашего проекта.

Теперь, когда вы немного знаете о Flutter и Ionic, давайте сравним их по нескольким важным измерениям. Затем вы можете решить, какой из них подходит именно вам.

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

Но есть несколько моментов:

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

Во-вторых, обратите внимание на размер пакета, который будет иметь большое влияние при доставке приложения через интернет. Как отмечалось выше, Ionic использует стандартную среду выполнения браузера и примитивы, поэтому размер приложения обычно очень мал (см. недавнее приложение TODO, которое мы построили с чистыми веб-компонентами с использованием Stencil One, объем в 3 кб). Flutter требует огромного количества кода для очень простых приложений (1 МБ для демонстрации NYT, которую они показывают), потому что вы упаковываете всю эту среду выполнения, хотя в браузере уже есть базовые элементы, доступные почти для всех. Таким образом, если вы хотите достичь стандартов производительности Google для прогрессивных веб-приложений (PWAs) или высоко ранжировать страницы результатов поиска, вы не сможете их достичь текущими показателями производительности для Flutter.

Когда дело доходит до развертывания приложения на мобильных устройствах и настольных компьютерах, Ionic и Flutter отображаются равномерно. Ранние демонстрации Flutter показывают, что вы можете создавать отличные приложения для iOS и Android из одной кодовой базы. И хотя их настольная поддержка все еще находится в техническом предварительном просмотре, демонстрации, которые мы видели, показывают, что вы можете скомпилировать свое приложение для запуска на нескольких настольных платформах.

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

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

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

Именно здесь различия между Ionic и Flutter действительно становятся очевидными.

Во-первых, если вы не один из 1,9% разработчиков, которые уже знают Dart, по сравнению с 70%, которые знают JavaScript, вам нужно подумать о том, что вы хотите выучить новый язык. Еще одна вещь, которую следует учитывать, — это то, насколько востребованным будет ваш набор навыков, как только вы научитесь Dart. JavaScript – это более безопасная ставка для любого разработчика. Потребность в разработчиках Dart, скорее всего, будет зависеть исключительно от успеха или неудачи Flutter как жизнеспособного решения в долгосрочной перспективе.

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

Напротив, когда вы программируете с Ionic, вы не обязательно изучаете Ionic. Вы учитесь создавать веб-приложения в целом. Вы учитесь писать с помощью JavaScript, стиля с помощью CSS и создавать высокопроизводительные интерфейсы со стандартными веб-компонентами. В этом смысле навыки, которые вы изучаете, создавая с Ionic, принесут вам пользу в любом месте, пока вы используете веб-платформу.

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

При разработке на Flutter вы кладете все свои яйца в корзину, то есть, если Google закроет проект (они никогда этого не делают, верно?), вы останетесь с набором навыков и кодовой базой, которые фактически бездомны.

С Ionic вы делаете ставку на веб, так что даже если вы решите строить на других платформах в будущем, все, что вы строите, все равно будет основано на открытых веб-стандартах. И, поскольку Ionic полагается на веб-компоненты, вы можете использовать его с любым JS framework. Это важно, с Ionic у вас будет свобода воспользоваться тем, что принесет завтрашний день, например Vue или React.

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

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

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

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