Цей матеріал – не редакційнийЦе – особиста думка його автора. Редакція може не розділяти цю думку.

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

Якщо розглянути основні платформи, якими користується більшість, то ми помітимо, що майже 95% займає iOS та Android.

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

Виникають питання: як скоротити витрати на подвійній розробці, чи можливо це взагалі, які для цього існують інструменти?

Саме на ці питання ми спробуємо знайти відповідь. Ми ознайомимося з основними підходами до розробки кросплатформенних додатків, таких як Flutter, React Native, Kotlin Multiplatform (KMM), а також використання вебтехнологій, прогресивних вебдодатків (PWA) та Backend-Driven підхід.

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

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

Кросплатформні рішення: Переваги та виклики

Що дає використання кросплатформенних підходів?

Скорочення часу на розробку. Стає можливим реалізувати логіку один раз та використовувати її на декількох платформах.
Менше часу на тестування. Так, потрібно буде тестувати додатки на всіх платформах, але юніт-тести будуть написані один раз. Якщо бізнес-логіка працює на iOS, вона має так само працювати й на Android.
Зменшення невідповідностей між платформами. При окремій роботі команд iOS та Android досить часто виникає ситуація коли команди реалізують бізнес-логіку по-різному.
Якщо у системі знайшовся баг, його треба пофіксити тільки в одному місці, фікс буде працювати на всіх платформах.
Можна мати умовно одного інженера, який випускає додатки для двох платформ.
Деякі підходи кросплатформеної розробки надають можливість “гарячого перезавантаження”, замість очікування нової збірки та “ревью” від Apple або Google. Навіть найменша зміна в мобільному додатку займає тижні для релізу через те, що зміни в коді потрібно випускати через App Store та Google Play. Чи не було б чудово мати можливість експериментувати або фіксити баги, не залежачи від магазинів додатків?

На що слід звертати увагу:

Зрілість інструменту. Наскільки стабільний інструмент, як часто змінюється API? Чи існують успішні приклади використання такого рішення в реальному житті? Чи ці кейси відповідають тому над чим ви працюєте наразі?
Бажання розробників. Чи цікава ця технологія вашим інженерам (мова йде про теперішніх та майбутніх)? Міграція – процес складний та довгий, чи вистачить ентузіазму розробників на такий забіг? Якщо не всі розробники згодні, то як багато проти та чому?
Обсяг роботи для міграції. Якщо ви вже використовуєте розробку окремо на iOS та окремо на Android, як багато ресурсів вам знадобиться для міграції на кросплатформене рішення? Чи зможете ви перевикористати наявний код?
Ризики. Що може піти не так? Як це може вплинути на додаток, клієнтів або бізнес? Чи існує план Б?
Чи згодні ви втратити найкращих нативних інженерів? Наприклад, якщо ваша мова вибору для спільних компонентів не є Swift або Kotlin, ви, ймовірно, втратите деяких найсильніших інженерів iOS або Android у своїй команді, тих, хто хоче працювати в передових, нативних середовищах. Зауважу, що мова йде не тільки про наявних у вашій команді інженерів, а й майбутніх, які просто можуть не зацікавитися вакансією вашого проєкту через нестандартний стек технологій.
Чи готові ви до пошуку чужих багів? Коли щось не працює у вашому кросплатформеному коді, то можливо це навіть не ваш баг, а проблема фреймворку який ви використовуєте. У цьому випадку треба бути готовим моніторити оновлення фреймворків та брати участь в їх вдосконалені, якщо це Open Source.
Чи допустимо завжди бути на крок позаду? У більшості випадків після релізу нових нативних API вам доведеться чекати доки фреймворки створять інтерфейс для роботи з новими фічами.
Продуктивність. Чи стане ваш додаток повільнішим?
Підтримка пристроїв. Як фреймворк працює на старих моделях? Як багато користувачів постраждають від цього?
UI/UX. Чи підходить вам універсальний UI додатку для декількох платформ? На скільки важливо дотримуватися нативної поведінки додатка?
Швидкість релізів. Як легко випустити реліз? Як швидко збирається проєкт?
Розмір додатка. Чи збільшиться розмір додатка порівняно з нативним? Чи є різниця критичною для ваших користувачів?
Обмеження платформи. Які відомі проблеми фреймворку з платформами iOS та Android? Чи будуть вони вирішені та коли?
Використання з нативним кодом. Як легко використовувати нативний код та інструменти?
Безпека типів для інтерфейсів між фреймворком і нативним кодом. Як безпечно можна передавати об’єкти між нативним та кросплатформеним кодом?

Якщо у вас є невпевненість при відповідях на питання вище, слід розглянути варіант створення «пілотного» проєкту з використанням нового підходу. Це дозволить отримати краще уявлення про обраний інструмент, перевірити його у бою та дати більш точні відповіді на питання про зручність, сумісність та інші проблеми.

Прикладом з власного досвіду можу стверджувати, що такий підхід є дуже ефективним і одного разу вплинув на рішення не використовувати KMM на одному з моїх проєктів. Також є й позитивний досвід з використанням SwiftUI, який якраз був застосований на одному з екранів, а пізніше успішно розповсюдився на весь додаток.

Flutter

Flutter – це фреймворк для створення кросплатформенних мобільних додатків, розроблений компанією Google. Він дозволяє розробникам створювати iOS та Android додатки з використанням єдиної кодової бази. Основною мовою програмування для Flutter є Dart, що була також розроблена Google.

Переваги Flutter:

Швидкість розробки: Завдяки функції “гарячого перезавантаження” (hot reload) розробники можуть миттєво бачити результати своїх змін у коді без необхідності перезапускати додаток. Це значно прискорює процес розробки та дебагу. Подібний функціонал вже існує в SwiftUI на iOS та Jetpack Compose на Android.
Підтримка Google: Google активно підтримує та розвиває Flutter, що гарантує стабільність і довгострокову перспективу використання цього фреймворку. Багато нових додатків Google, таких як Google Pay, Google Ads і Google Nest Hub, створюються за допомогою Flutter, що свідчить про його надійність та ефективність.
Багатий інтерфейс користувача: Flutter надає широкий спектр віджетів, які дозволяють створювати складні та зручні інтерфейси користувача.

Недоліки Flutter:

Необхідність вивчення Dart: Хоча Dart є досить легкою мовою для освоєння, це може стати додатковим бар’єром для деяких розробників.
Великі розміри додатків: Додатки, створені за допомогою Flutter, можуть мати більші розміри у порівнянні з нативними. Це може вплинути на час завантаження та використання пам’яті, особливо на старих або менш потужних пристроях.
Проблеми з нативними компонентами: Flutter був розроблений Google, тому на Android проблеми виникають рідше, що неможливо сказати про iOS. Якщо подивитись на кількість відкритих issues на GitHub (12k), то це може стати причиною не використовувати даний інструмент.

Приклади компаній, що використовують Flutter:

BMW: повністю перейшла на Flutter для створення своїх мобільних додатків. Це дозволяє компанії швидко впроваджувати нові функції на обох платформах.
Google: використовує Flutter для створення таких додатків, як Google Pay, Stadia, Google Ads і Google Nest Hub. Інтенсивна підтримка та використання Flutter всередині компанії Google свідчить про його стабільність.
eBay Motors: також обрала Flutter для розробки свого мобільного додатку, написавши 200 000+ рядків коду на Dart.
GoDrive: мобільний додаток для водіїв доставлення їжі від сервісу GoPuff. Це яскравий приклад пілотного проєкту, оскільки основний додаток GoPuff не використовує Flutter.

React Native

React Native – це популярний фреймворк для створення кросплатформенних мобільних додатків, розроблений Facebook. Він дозволяє розробникам використовувати JavaScript та React для створення нативних додатків для iOS та Android. Завдяки великій спільноті та підтримці з боку Facebook, React Native став одним з найбільш використовуваних інструментів для кросплатформенної розробки.

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

Приклади компаній, що використовують React Native:

Shopify: вирішила зробити ставку на React Native, але з дуже обережним підходом. Вони не переписують наявні додатки, продовжують наймати нативних інженерів та проводять експерименти з React Native на нових проєктах.
Wix: повністю побудував свій додаток на React Native. Це дозволило компанії забезпечити уніфікований користувацький досвід та скоротити час на розробку нових функцій.
UberEats: використовує React Native для додатка Restaurant Dashboard.
Airbnb: мала значний досвід з React Native, але врешті-решт вирішила відмовитися від нього після трьох років використання через технічні та організаційні проблеми. Цей досвід став цінним уроком для інших компаній, що розглядають можливість використання цього фреймворку.

“У результаті, рухаючись вперед, ми припиняємо роботу React Native на Airbnb і знову інвестуємо всі наші зусилля назад у native.”

– Gabriel Peal, Senior Software Engineer в Airbnb

Kotlin Multiplatform (KMM)

Kotlin Multiplatform Mobile (KMM) – це інструментальний шар поверх Kotlin Multiplatform, який дозволяє розробникам створювати мобільні додатки для iOS та Android з використанням спільної кодової бази на мові Kotlin. KMM забезпечує високий рівень інтеграції з Android Studio та пропонує інструменти для полегшення розробки мобільних додатків.

Переваги KMM:

Використання Kotlin: Kotlin є сучасною мовою програмування, яка добре інтегрується з Java та Android. Вона надає безліч переваг, таких як безпека типів, зручний синтаксис та підтримка функціонального програмування, що робить розробку більш ефективною та надійною. Kotlin є природним вибором для багатьох Android інженерів, та він легкий для вивчення, якщо ви вже знаєте Swift.
Підтримка JetBrains: JetBrains, компанія, що стоїть за розробкою Kotlin, активно підтримує та розвиває KMM. Це гарантує стабільність та постійне вдосконалення технології, а також наявність якісної документації та інструментів.
Інтеграція з Android Studio: KMM має глибоку інтеграцію з Android Studio, що робить процес розробки додатків для Android простішим та ефективнішим. Це також дозволяє розробникам використовувати знайомі інструменти та середовище розробки.

Недоліки KMM:

Відсутність бібліотек: Хоча екосистема Kotlin швидко розвивається, наразі може бракувати певних бібліотек та інструментів, які доступні для інших платформ або мов програмування. Це може ускладнити розробку специфічних функцій або інтеграцію з іншими сервісами.
Ускладнений найм: важко знайти iOS розробника, який би мав досвід роботи з KMM.
На iOS багато компромісів: інтеграція з Xcode здійснюється через неофіційні плагіни, а Apple не виявляє бажання офіційно підтримувати KMM.
Generics на Kotlin не можна зробити як в iOS
Не підтримує протокол Codable, Default argument та Swift enums.

Приклади компаній, що використовують KMM можна знайти тут, серед них: Netflix, McDonalds та інші.

PWA

Прогресивні вебдодатки (PWA) використовують сучасні вебтехнології для створення додатків, які виглядають та працюють як нативні, але доступні через веббраузер. Вони поєднують у собі переваги веб та нативних додатків.

Переваги PWA:

Миттєві оновлення: PWA дозволяють розробникам миттєво оновлювати додатки без необхідності проходити процес перевірки в App Store або Google Play. Це значно спрощує виправлення помилок та знижує показник time to market.
Кросплатформенний доступ: PWA працюють на будь-якому пристрої з веббраузером, забезпечуючи доступність для широкого кола користувачів незалежно від платформи.

Недоліки PWA:

Обмежена функціональність для складних додатків: незручність при потребі доступу до специфічних апаратних функцій пристрою (геолокація, робота з bluetooth тощо).

Приклад компанії, що використовує PWA:

Pinterest: розробила прогресивний вебдодаток, який значно покращив використання mobile web. Користувачі почали витрачати на 40% більше часу на сервісі порівняно зі старим додатком, а дохід від переходу по рекламі зріс на 44%.

Вбудовані WebView

Вбудовані WebView використовують вебтехнології для вбудовування динамічного контенту у нативні додатки за допомогою WebView. Це дозволяє швидко оновлювати контент без необхідності випускати нові версії додатка.

Переваги вбудованих WebView:

Швидкість розробки: Використання вебтехнологій дозволяє швидко розробляти та оновлювати контент.
Динамічний контент: WebView дозволяють легко інтегрувати динамічний контент, який може бути оновлений без необхідності проходити процес перевірки в магазинах додатків.

Недоліки вбудованих WebView:

Важко досягти якості порівняну з нативним UI: WebView не можуть забезпечувати такий же рівень UI/UX, як нативні компоненти. Користувачі можуть помітити відмінності у вигляді та поведінці вебекранів порівняно з нативними.
Продуктивність: Вбудовані вебекрани можуть мати гіршу продуктивність, особливо на старих або менш потужних пристроях.
Відсутність оффлайн-режиму: Побудова підтримки для офлайн-режиму додатка є одним з викликів. У цьому випадку вам потрібно завантажувати контент WebView з локальних даних, а потім синхронізувати ці дані після відновлення з’єднання.

Приклад компанії, що використовує вбудовані WebView:

GoPuff: ця американська служба доставлення їжі спочатку мала два окремих нативних додатки для iOS та Android, але поступово почала переносити прості екрани на Web, а згодом майже 100% функціоналу реалізовані як екрани з WebView, вся UI логіка зосереджена на стороні Web.

Backend-Driven

Backend-Driven додатки використовують серверну логіку для керування поведінкою та відображенням контенту. Це дозволяє динамічно змінювати контент та функціональність.

Переваги Backend-Driven додатків:

Контроль над UX: Використання серверної логіки дозволяє точно налаштовувати поведінку додатка та забезпечувати узгодженість UX між декількома платформами.
Нативний UI: бекенд використовується тільки для конфігурації UX, але водночас всі UI елементи є нативними, що забезпечує можливість використання нативних компонентів та інструментів для реалізації екранів.

Недоліки Backend-Driven додатків:

Складність версіювання: Використання серверної логіки потребує обдуманого підходу до версіювання та управління різними версіями додатка, що може ускладнити процес розробки та підтримки. Версії – важливий аспект у цьому підході, через те, що клієнт має розуміти та знати про можливі формати відображення інформації.
Необхідність обдуманого підходу до клієнтської логіки: Розробка Backend-Driven додатків вимагає ретельного планування та інтеграції клієнтської логіки, щоб забезпечити правильне функціонування додатка.
Висока залежність від серверної логіки: Потребує значних зусиль на стороні сервера для підтримки всіх необхідних функцій.

Приклади компаній, що використовують Backend-Driven додатки:

Uber, Airbnb, Lyft: всі ці компанії та багато інших використовують Backend-Driven підхід для динамічного керування функціональністю своїх додатків, що дозволяє швидко адаптуватися до змін та вимог користувачів.

Висновок

Ми розглянули основні причини для використання кросплатформенних підходів, зауважили на що слід звернути увагу та перелічили інструменти для реалізації. Кожен з підходів має свої переваги та недоліки.

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

Кожен проєкт є особливим випадком та має свій перелік критеріїв для максимально продуктивної розробки, тому неможливо однозначно стверджувати, що кросплатформа – це рішення для всіх проблем та скорочення циклу розробки у два, чи більше разів.

“Оцініть те, що вам потрібно зробити, замість того, щоб копіювати те, що вже роблять інші компанії. Як розробка кросплатформних рішень, так і набір інструментів розробки додатків розвиваються швидкими темпами, і у вас є багато підходів на вибір.”

– Gergely Orosz, автор книги “Побудова мобільних додатків при масштабуванні”

Джерела

Огляд KMM та приклади використання від Kotlin Multiplatform
Приклади використання від Flutter
Підкаст про Server-driven UI від Lyft
Побудова мобільних додатків при масштабуванні
Server-driven рендеринг від Airbnb
Ретроспектива після одного року використання PWA від Pinterest