Переклад статті 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 Framework заснований на відкритих веб-технологіях, починаючи з веб-мов, які використовуються для створення додатків Ionic (HTML, CSS, JavaScript), і закінчуючи стандартними компонентами користувальницького інтерфейсу, що працюють всередині додатку.

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

Як працює Flutter

Основною мовою 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

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, для створення власної бібліотеки користувальницьких веб-компонентів. 

Який підхід вибрати

Тепер, коли ви трохи знаєте про Flutter і Ionic, давайте порівняємо їх по кільком важливим параметрам.

Продуктивність

Одна з речей, на які розробники часто ставлять в Flutter є продуктивність. Схоже, що нестандартний підхід в реалізації рендерингу окупився.

Але є кілька моментів:

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

По-друге, зверніть увагу на розмір пакета, який буде мати великий вплив при доставці додатку через інтернет. Як зазначалося вище, Ionic використовує стандартне середовище браузера і примітиви, тому розмір програми зазвичай дуже малий. Flutter вимагає величезної кількості коду для дуже простих додатків (1 МБ для демонстрації NYT, яку вони показують). 

Розгортання коду

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

Знання та навички

Саме тут відмінності між Ionic і Flutter дійсно стають очевидними.

По-перше, якщо ви не один з 1,9% розробників, які вже знають Dart, в порівнянні з 70%, які знають JavaScript, вам потрібно подумати про те, що ви хочете вивчити нову мову. Ще одна річ, яку слід враховувати, - це те, наскільки затребуваним буде ваш набір навичок, як тільки ви навчитеся Dart. JavaScript - це більш безпечна ставка для будь-якого розробника. Потреба в розробниках Dart, швидше за все, буде залежати виключно від успіху або невдачі Flutter як життєздатного рішення в довгостроковій перспективі.

Перспективи в майбутньому

Останнє, що потрібно враховувати - це термін життя вашого проекту, а також свобода і гнучкість, які ви будете мати в міру вдосконалення вашого додатку.

При розробці на Flutter ви робите ставку на 1 технологію. З Ionic ви робите ставку на веб, так що навіть якщо ви вирішите будувати на інших платформах в майбутньому, все, що ви будуєте, все одно буде засновано на відкритих веб-стандартах.