Flutter - це технологія, яка в даний час викликає ажіотаж в мобільній розробці. Його стали частіше вибирати для створення нових застосунків, а деякі розробники переписують на Flutter навіть старі застосунки, по суті, без якихось видимих на те причин.
Я провів з Flutter кілька місяців на продакшн проєкті, і хочу поділитися досвідом, порівнявши його з React-Native, з яким у мене досить багатий досвід.
Я хотів би детальніше зупинитися на тому, що, що вам потрібно враховувати, якщо ви переходите на багатоплатформовий нативний підхід, і хочете зрозуміти, що вам найбільше підходить - Flutter або React-Native.
Зазвичай у вас є 3 варіанти мобільного застосування: повністю рідне з Kotlin/Swift, повністю веб-застосунок (PWA або контейнер WebView) і щось середнє. Ми називаємо цей варіант Cross Platform Native, оскільки це не веб-застосунки, а Native Apps, які тим не менше використовують багатоплатформовий підхід.
Обидві технології надають схожі можливості, проте використовувати Flutter зараз трохи ризиковано через його незрілість, нестачі бібліотек і не дуже великої, поки ще, спільноти.
Критерії оцінки
Я не буду заглиблюватися в суть технологій, а оціню їх з точки зору застосування в проеєктах і їх можливостей в цілому. Я розглянув наступні аспекти:
- Збірка і розгортання.
- Доступність бібліотек і віджетів.
- Інструменти та тестування.
- Продуктивність.
- Досвід розробників.
- Можливості мережі.
- Можливості медіа.
- Безпека.
Збірка і розгортання
Обидві технології - кросплатформені і використовують один і той же підхід: у них є власні частини для Android і iOS, і включають кросплатформені середовища виконання, будь то JavaScript або Dart. Це можна представити таким чином:
Збірка
Обидві платформи використовують інструменти мобільної операційної системи для збирання: Gradle і Xcode build для Android і iOS відповідно. В цьому плані різниці між ними та рідними застосунками немає.
Хоча є різниця в швидкості збірки. Це не так важливо для розробки, проте критично під час збирання CI і архівування застосунків в Xcode. У мене немає точних цифр, але у мене застосунок «Hello, World» на Flutter збирається мірно в 3 рази швидше, ніж в React Native. Причина в тому, що Flutter поставляється як iOS Framework, а React Native перекомпілюється з вихідних кодів.
Управління залежностями
👍 React Native використовує пакети NPM для включення залежностей, включаючи сам React Native. Крім NPM, можна використовувати Yarn для установки і управління своїми залежностями. Залежності, які вимагають коду Kotlin/Java/Swift/Objective-C, зв'язуються за допомогою модулів gradle і пакетів CocoaPods. React Native включає функцію автоматичної лінковки, яка дозволяє уникнути ручної зміни файлів gradle і Podfile.
👍 Flutter, в свою чергу, використовує менеджер пакетів dart, також відомий як інструмент pub. Пакети поставляються у вигляді вихідного коду і компілюються разом з основним застосунком. Як і в RN, ці пакети можуть мати власні залежності, але в цьому випадку може знадобитися вручну додати ці залежності в файли gradle і Podspec, хоча на практиці особисто я з цим не стикався. Можна також використовувати неопубліковані пакети , забираючи їх з папки або git сховища.
Публікація
Описана вище архітектура означає, що необхідно перетворити або скомпілювати загальний код, включити його в остаточний apk/ipa і відправити результат в магазин застосунків. Процес може виглядати наступним чином:
Однак між RN і Flutter все ж є відмінності.
React Native підтримує технологію Code Push, що дозволяє відправляти оновлення коду JS без повторної публікації apk/ipa через те, що React Native запускає пакет коду JS під час виконання і може його замінити.
По суті, це можна вважати якоюсь проблемою безпеки. Команда Flutter, прийнявши це до уваги, взагалі вирішили не підтримувати цю функцію .
Наявність бібліотек і віджетів
Бібліотеки та сторонні компоненти
👍 React Native присутній на ринку вже більше 5 років і має в своєму розпорядженні тонни бібліотек для різних випадків, починаючи з push-повідомлень, відтворення відео і компонентів матеріалів, закінчуючи камерою (включаючи Firebase ML Kit) і інтеграціями Apple HealthKit і Google Fit. Існує ретельно підібраний список високоякісних сторонніх компонентів, які можна використовувати в своєму застосунку, під назвою awesome-react-native .
👍 React Native також сильно виграє від того, що він заснований на React і має можливість використовувати бібліотеки, створені для React, наприклад Redux або axios, або привносити сучасні функції, такі як React Hooks.
👎 Flutter існує всього 2 роки, проте він стає все популярнішим з кожним днем, що безумовно мотивує ентузіастів розробляти для нього бібліотеки. Вже існують деякі рішення для навігації, слайдери, компоненти для користувача інтерфейсу, інтеграції Firebase і так далі. Однак багато можливостей все ще знаходяться на базовій стадії. Існує також ретельно підібраний список бібліотек для Flutter, який називається awesome-flutter. Можна помітити, що цей список в 3 рази менше, ніж у RN. Звичайно, це не показник, але це дає уявлення про перспективу розвитку технології.
Крім того, Dart рідко використовується поза Flutter, а сам Flutter не грунтується на будь-якій іншій бібліотеці фреймворка, що також не допомагає з готовими до використання частини та підходами.
Віджети
👍 React-Native має велику бібліотеку компонентів інтерфейсу для користувача: календарі, засоби вибору дати, кнопки, компоненти матеріалів, підтримку SVG і багато іншого.
👎 Flutter поставляється з компонентами Material і Cupertino з коробки. Але ось бібліотека призначеного для користувача інтерфейсу знаходиться на ранній стадії. Можливо, з нестачею компонентів ви і не зіткнетеся, проте кількість бібліотек компонентів для React Native набагато більше. Це зміниться в найближчому майбутньому, оскільки все більше і більше розробників працюють з Flutter.
Інструменти та тестування
Мені здається, що в цьому обидві приблизно технології рівні. Обидва стека включають:
- Інструменти стилю і якості коду (eslint, tslint, prettier vs dartanalyzer).
- Unit-тести (з Jest-тестом і Flutter-тестом).
- Тести компонентів (знімки, Enzyme-тести і віджет-тести, «золоті тести»).
- e2e тестування (Detox vs e2e).
Продуктивність
Продуктивність слід розглядати з кількох точок зору:
- продуктивність рендеринга
- власне взаємодія
- час запуску
Продуктивність рендеринга
👎 React Native використовує рідні віджети платформи (Native Views) і передає події через JavaScript. Це впливає на продуктивність рівня уявлення, однак 60 fps в секунду все ще досяжні, хоча продуктивність залежить від версії ОС і самого пристрою.
👍 Flutter, з іншого боку, рендерить все, використовуючи власний 2D-рушій Skia, уникаючи будь-якого спеціального з'єднання між представленням і іншим кодом. Це робить рендеринг неймовірно швидким. У нього можуть бути проблеми з iOS, але ця проблема повинна бути вирішена за допомогою недавньої підтримки Metal .
Взаємодія з платформою
Зараз я нічого не можу сказати, оскільки для цього потрібен мікробенчмаркінг обох рішень на різних пристроях. Це тема для окремої статті.
Час запуску
👎 У React Native є проблема з цим. Взагалі, час запуску - це поширена проблема, якщо ви прагнете до досконалості свого мобільного застосунку. RN повинен завантажити віртуальну машину JS, а потім JS код. На Android це стає складним завданням. Версія React-Native 0.60 забезпечує підтримку Hermes: нової експериментальної віртуальної машини JS для Android, яка призначена для швидкого завантаження.
👍 Flutter, здається, вже вирішив цю проблему.
Досвід розробника (DX, Developer Experience)
👎 У React Native є функція Fast Refresh , яка дозволяє миттєво бачити зміни на симуляторі/емуляторі або реальному пристрої, це скорочує цикл зворотного зв'язку практично до нуля, на відміну від нативної розробки. Розробка зазвичай виконується за допомогою VSCode або WebStorm (це найпопулярніші інструменти). Обидва включають в себе можливості для запуску та налагодження коду, запуску тестів, перегляду покриття і забезпечення автозаповнення. На мій погляд у RN автозаповнення обмежена (я думаю, через JavaScript), тому я повернувся до запуску збірки або з npx react-native run-ios або через Xcode, тому що запуск через WebStorm був дуже нестабільним. Також час від часу падав сам пакувальник. Типовий спосіб налагодження - це запуск Google Chrome і використання його консолі, що є неоптимальним
👍 У Flutter відмінний DX. Оскільки це продукт Google, він дозволяє інтегрувати IDE (Android Studio, але я віддаю перевагу IntelliJ Idea як більш стабільній) відразу з набором інструментів. Швидке завантаження майже таке ж, як і швидке оновлення, і навіть краще. Заповнення форми працює на ура, оскільки Dart строго статичний і збірний, що створює підтримку стабільності середовища розробки IDE. Тут треба зробити зауваження, що Dart з коробки надає велику свободу в плані типів, ви можете їх взагалі не писати, тому рекомендується його доналаштувати в своєму проєкті.
Крім того Flutter показує причини помилок, тому їх легко виправляти. Налагоджувач в IDE теж працює дуже добре. VSCode також підтримує Flutter, але не має функцій налагодження і VCS
Мережеві можливості
👍 React Native працює з базовим протоколом htt (s) з поліфілією fetch, вбудованою підтримкою WebSockets і клієнти з axios (ще один приклад чистої бібліотеки js!) І rn-fetch-blob. React Native також парсить json з коробки, тому що це теж JavaScript. Це також означає, що можна створювати свої типи за допомогою Open Api.
👎 У Flutter є тільки вбудовані клієнти http(s) і WebSockets. Клієнт Axios знаходиться в стадії розробки (я навіть думаю про створення власного, скажімо, «fluxios»)). Парсинг JSON (звичайно, якщо ви не використовуєте кодогенерацію) потрібно робити вручну. Підтримка відкритого API існує, але вона не оновлювалася 15 місяців. Існують пакети Dio і Chopper для спрощення роботи з http, і швидше за все, з'являться ще.
На жаль, як виявилося, використання кодогенераціі для OpenApi для Dart викликає певні проблеми, прочитати про які можна тут .
Медіаможливості
Обидві технології сильно залежать від базових платформ. Ніякі фреймворки для Android/iOS самі по собі нічого не роблять в плані медіа, а скоріше використовують медіакомпоненти, доступні в системі. Питання лише в тому, наскільки добре підтримуються можливості платформи.
👍 React Native підтримує відтворення і запис як аудіо, так і відео. Можна, наприклад, показувати відео в різних форматах (в основному всі вони підтримуються ExoPlayer (Android) і AVPlayer (iOS)), відображати елементи керування для пошуку, зациклення і т.д. Також можна відображати субтитри SRT і VTT для відео «з коробки». Цей функціонал поставляється з такими компонентами, як react-native-video, react-native-video-controls і іншими.
👎 В основному Flutter має тільки пакет video_player для відтворення відео. Його версія 1.0 все ще знаходиться на розгляді і може відображати всі формати відео, що надаються мобільними ОС, а ось субтитри - лише SRT, субтитри VTT відсутні в дорожній карті. VTT субтитри проте підтримується окремим пакетом. Для основних елементів управління необхідно використовувати пакет Chewie.
Безпека
👎 React Native зав'язаний на js і застосунок на його основі містить js bundle. Але його завжди можна витягти і зрозуміти логіку програми, або змінити її. Схоже, це серйозна проблема.
👍 З Flutter набагато складніше змінити застосунок, так як Dart код заздалегідь компілюється в бінарний код для цільової архітектури.
Висновок
Як завжди, вибір залежить від функціональних вимог, але я б рекомендував при цьому враховувати:
- Недолік бібліотек для Flutter.
- Навчання Dart новим розробникам, так як таких розробників на ринку немає/мало.
- Неповні медіа можливості для Flutter.
- Довший час запуску React-Native.
- Нижча безпека для React-Native.
Переклад статті «Flutter vs React-Native: comparison in depth»
Ще немає коментарів