React Native vs Flutter: що обрати для кросплатформної розробки?

На тлі глобальної тенденції до загальної цифровізації бізнес змушений йти до онлайну. При цьому замість створення сайтів дедалі більше підприємців обирають розробку застосунку, адже на 1 комп'ютер у світі вже припадає 5 смартфонів та планшетів. Найпрактичніші роблять ставку на кросплатформні застосунки, тобто здатні працювати як з гаджетами на Android, так і з гаджетами на iOS. Але навіть зважившись на розробку мобільного застосунку та зробивши вибір на користь його кросплатформності, замовник стикається з новим завданням: на якому фреймворку проводити розробку?

Щоб відповісти на це питання, зробімо невеликий огляд популярних кросплатформних фреймворків – React Native та Flutter.

Що таке Flutter? - Огляд

Говорячи про популярні фреймворки, неможливо не згадати Flutter. Це безплатний та відкритий набір інструментів для розробки мобільного інтерфейсу, який компанія Google представила в травні 2017 року. Варто нагадати, що Flutter використовує мову Dart, після чого написане компілюється C++. На виході маємо код із незалежним рендерингом, який чудово виконується на будь-якій платформі.

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

Варіанти використання Flutter

Flutter швидко набув поширення серед розробників. Серед фахівців-початківців його популярність взагалі зашкалює - майже 70% джуніорів сьогодні починають вивчати кодинг з цього фреймворку. Широкий набір бібліотек та інструментів Flutter роблять його універсальним фреймворком для створення застосунків.

Зокрема, його використовують для розробки:

• Застосунків з Material Design;
• Мобільних MVP-застосунків;
• Застосунків із функціями, вбудованими в ОС;
• Простих доповнень до ОС з просунутішими функціями;
• Інтерфейси користувача з розширеними віджетами.

Які популярні застосунки створені за допомогою Flutter?

Google Ads

Список продуктів, створених за допомогою Flutter, варто розпочати з Google Assistant та Google Ads. Застосунок Google Ads – це повноцінна мобільна платформа для цифрового маркетингу. Вона надає можливість користувачеві оперативно адмініструвати свої компанії, відправляє термінові повідомлення, розповідає, як оптимізувати рекламну кампанію та виконує докладний аналіз ефективності реклами, у тому числі дані про конверсію, перегляди та кліки.

Alibaba

Ще одним яскравим прикладом можливостей Flutter стало його використання під час розробки застосунку Xianyu – другої за розміром роздрібної платформи Alibaba Group. Цей застосунок було завантажено понад 100 мільйонів разів й щодня він може похвалитися 10 мільйонами активних користувачів. Вибір цього фреймворку допоміг компанії заощадити час, оскільки з єдиною базою коду розробники могли легко створювати та підтримувати програму.

Варто зазначити, що Alibaba на той час вже мав готовий застосунок, тому робота почалася з поетапного впровадження функцій Flutter й додаткового функціонала.

eBay

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

Що таке React Native? - Огляд

Також не варто забувати й про React Native - ще один фреймворк з відкритим кодом, що дозволяє розробляти кросплатформові мобільні застосунки. React Native належить компанії Meta (колишній Facebook), тому мобільні програми компанії, такі як Instagram, й клієнт соцмережі Facebook, створено завдяки цій технології. У якості мов програмування React Native використовує React.js та JavaScript.

Безперечний плюс цього фреймворку - він ідеально підходить для початкових розробників мобільних застосунків, оскільки працює на єдиній кодовій базі JavaScript. Крім того, React Native надає можливість звернутися до нативної частини будь-якої платформи за допомогою технології JavaScript bridge та отримати доступ до API, наприклад, до стандартних програм на Android.

Варіанти використання React Native

React Native – серйозний конкурент Flutter. Розвиток React Native ефективно підтримується холдингом Meta, а сам він має велике ком'юніті по всьому світу. Технологія постійно вдосконалюється та набирає обертів.

Фреймворк React Native дозволяє створювати мобільні програми, що функціонують як Native Apps – повністю нативні застосунки, з урахуванням особливостей Android та iOS. Це дозволяє зменшити строки реалізації проекту, знизити бюджет та заощадити на підтримці програми після запуску за збереження високого рівня якості, надійності та функціональності продукту.

Цей фреймворк використовують для створення:

• Масштабних соціальних мереж;
• Впровадження елементів соцмереж до мобільних застосунків;
• Інтерфейсів менеджерів та додаткового функціонала;
• Інтерфейсів месенджерів;
• Дашбордів - застосунків для збирання, аналізу та візуалізації даних;
• Систем e-commerce - інтернет-магазинів та маркетплейсів;
• Планувальників завдань, проектів, часу, командної роботи;
• CRM-систем для автоматизації бізнес-процесів

Які популярні застосунки створено за допомогою React Native?

Facebook

Топ-3 масштабних застосунків на основі React Native очолює Facebook - найбільша та популярна соціальна мережа у світі з 2 мільярдами активних користувачів на місяць. Соцмережа дозволяє своїм користувачам розміщувати текстовий та візуальний контент, спілкуватися з іншими користувачами, купувати та продавати товари і послуги.

Простота й інтуїтивно зрозумілий інтерфейс забезпечили застосунку мільярдну аудиторію, адже будь-хто може миттєво навчитися ним користуватися.

Компанії по всьому світу також оцінили можливості Facebook та активно використовують можливості застосунку для пошуку нових клієнтів та збільшення конверсії.

React Native дозволив покращити та переписати деякі функції застосунків компанії для Android та iOs. Зараз Marketplace, Ads Manager та інші популярні застосунки від Facebook функціонують на React Native.

Walmart

Американська транснаціональна роздрібна компанія Walmart також обрала фреймворк React Native для розробки свого мобільного застосунку.

Повністю володіючи операціями в Канаді, Аргентині, Південній Африці та Чилі, Walmart не зупиняється на досягнутому та постійно розширюється на нові країни, у тому числі завдяки всім онлайн-платформам.

Компанія обрала React Native, оскільки дуже хотіла покращити роботу своїх застосунків для користувачів по всьому світу. Перед цим Walmart хотів спробувати кілька варіантів включення інтегрованих web view. Тестування показало, що серед усіх учасників лише React Native продемонстрував успішну реалізацію.

За результатами роботи Walmart Labs повідомила, що використання фреймворку React Native допомогло їм покращити графічну продуктивність, підвищити швидкість, прискорити та спростити виправлення помилок.

Bloomberg

Фінансове видання новин Bloomberg, з мільйонною аудиторією по всьому світу, також йде в ногу з часом.

Компанія зупинила свій вибір на React Native для розробки нових мобільних застосунків для Android та iOs. Фреймворк використовувався для створення застосунку з нуля. Це дозволило читачам легко та зручно отримати доступ до контента користувача та каналів на Bloomberg Media в режимі реального часу.

React Native проти Flutter у розробці

Під час порівняння React Native vs Flutter, помітно, що вони мають схожі риси - обидва фреймворки безплатні та з відкритим кодом. Також вони дозволяють розробляти кросплатформні програми й вирізняються постійною підтримкою, гнучкістю, оптимальним інтерфейсом користувача, гарячим перезавантаженням та швидкою економічною розробкою.

Задля створення інтерфейсу користувача React Native використовує нативні компоненти інтерфейсу користувача Android та iOs. Тому компоненти програми, створеної на цьому фреймворку, виглядають аналогічно компонентам використаної платформи. І якщо під час оновлення ОС змінить їх зовнішній вигляд або функції, це може порушити роботу створеної на React Native програми.

Flutter замість нативних елементів пропонує використовувати створені з нуля віджети, які можна налаштовувати. Тому розробка UI на Flutter надає можливість широкої кастомізації. Для створення нативного інтерфейсу можна як використовувати бібліотеку віджетів Cupertino, так і створити щось повністю індивідуальне. Таким чином, Flutter дозволяє вибрати - використовувати будь-який віджет із бібліотеки або розробляти власне рішення.

Мова програмування

У протистоянні React Native vs Flutter складно вибрати "улюбленця". Обидва є відмінними фреймворками для кросплатформи, але використовують різні мови програмування. Зокрема, React Native покладається на JavaScript, а Flutter – на Dart.

Звичайно, JavaScript добре зарекомендував себе й став основою динамічної веб-розробки. Але з іншого боку, Dart - це сучасна мова програмування, яка завдяки компіляторам ahead-of-time та just-in-time може подвоїти продуктивність у порівнянні з JavaScript.

Архітектура

Під час складання створених на Flutter або React Native застосунків використовують два основних шаблони, а саме - Flux та Redux. Перший розроблений компанією Facebook, натомість другий популярніший серед розробників. У процесі розробки обидва шаблони наслідують односпрямовану схему потоку даних й забезпечують збереження стану програми в центральній базі даних. Розробників дуже радує відносно нова функція React Native для управління станом – Context API.

Своєю чергою, Flutter набагато частіше покладається на архітектуру BloC - це фактично інтерпретація базової MVC-архітектури під особливості фреймворку, її рекомендують використовувати навіть творці Flutter з Google.

Встановлення та початкова конфігурація

Продовжуючи порівняння Flutter vs React Native, варто зазначити, що почати роботу з ними не складно, але тільки за умови, що ви програміст.

Наприклад, React Native можна встановити простою командою за допомогою диспетчера пакетів npm. Для цього потрібно встановити Node.js та npm-менеджер. Крім фреймворку, також знадобляться такі інструменти, як Android JDK та SDK.

Для встановлення Flutter спочатку потрібно завантажити його з офіційного сайту до потрібної теки та розархівувати. Після цього потрібно додати цю теку до змінної PATH. Тут також, як і у випадку з React, знадобляться додаткові компоненти. Одним словом, для налаштування обох фреймворків знадобиться приблизно однаковий час.

Інструменти розробки та документація

Що стосується React Native, то цей фреймворк має величезний список готових до використання пакетів - він містить понад 14 тисяч елементів. І хоча бібліотек та інструментів дуже багато, картину псує можливість натрапити на неякісні чи застарілі пакети.

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

Користувальницький інтерфейс

Оскільки React Native використовує нативні компоненти, то у разі налаштування інтерфейсу користувача, кращим виявиться Flutter. Цей фреймворк має власні набори віджетів, що дозволяє зробити дизайн інтерфейсу користувача більш ефектним та динамічним. Але з іншого боку програмі може бракувати кількох компонентів, що відвертатиме увагу користувача. Тому, попри очевидну перемогу Flutter, варто зазначити, що React Native забезпечує динамічніше середовище, що дозволяє легко оптимізувати взаємодію з користувачем.

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

У плані продуктивності застосунків, створених за допомогою даних фреймворків, Flutter за своєю роботою з відривом перевершує React Native.

Річ у тім, що цей фреймворк використовує зовсім інший підхід до рендерингу. Зокрема не використовує нативні компоненти інших платформ. Натомість Flutter створює свої віджети й залучає GPU для їхнього рендерингу на екрані. Також Flutter компілює код мови Dart на нативний ARM-код, що обробляється безпосередньо процесором. Це дозволяє Flutter-застосункам працювати відчутно швидше.

Підтримка спільноти

Вкрай важливим фактором під час опанування фреймворку є наявність навколо нього спільноти, готової прийти на допомогу новачкам.

Протягом семи років свого існування React Native зміг сформувати велике ком'юніті по всьому світу, адже його використовують для розробки своїх застосунків такі компанії як Facebook та Walmart.

Flutter не може похвалитися настільки поважним віком, але розробка на цьому фреймворку застосунків для таких гігантів, як Google, Alibaba та eBay прискорила розвиток ком'юніті даного фреймворку.

Зараз розмір спільнот навколо цих платформ приблизно однаковий, але ком'юніті Flutter активніше й постійно зростає.

Коли обрати React Native

Безплатний фреймворк від Facebook, React Native, дозволяє створювати кросплатформні застосунки для iOs, Android, Windows та MacOS. Оскільки при цьому використовується JavaScript та React, то створювати веб-версії цих програм просто.

Цією платформою вже скористалися під час створення своїх програм Facebook, Pinterest, Afterpay.

І недаремно, адже React має багато переваг:

• Опора на надзвичайно популярний javaScript;
• Легкість в опануванні;
• Широкий вибір доступних бібліотек;
• Загальний код для створення веб-застосунків та програм для ПК;
• Велике ком'юніті.

Можна резюмувати, що React Native підійде для розробки мобільних застосунків на JavaScript та кросплатформової розробки з використанням єдиної кодової бази.

Коли обрати Flutter

Фреймворк Flutter для створення застосунків використовує мову Dart. Він дозволяє з одного вихідного коду створювати програми під Windows, Mac, iOs, Android, Linux, Google Fuchsia та веб-застосунки. Крім того, Flutter підходить як для розробки MVP, так і для великих застосунків.

Створити програми на Flutter вирішили такі компанії, як SpaceX Go, eBay, Alibaba, Google, Square.

І все завдяки сильним сторонам Flutter, серед яких:

• Багатий вибір віджетів, що пожвавлюють дизайн програми;
• Легке опанування фреймворку завдяки доступній документації та підтримці команди розробників;
• Активне ком'юніті, яке швидко зростає;
• Можливість Hot Reload сильно спрощує розробку.

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

Висновки

На завершення варто підкреслити, що конкурентів у React Native та Flutter серед інших фреймворків для розробки застосунків просто не існує. Можна сміливо стверджувати, що на сьогодні ці дві платформи – найкращі кандидати для створення кросплатформових мобільних застосунків.

При цьому необхідно зазначити, що Flutter сучасніший, ніж React Native й може похвалитися вищою продуктивністю, можливістю налаштування та кращою документацією.

Flutter здатний забезпечити вам розробку максимально масштабованих, швидких та високопродуктивних застосунків, сумісних із численними платформами.

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