Shopify закінчили міграцію мобільного застосунку на React Native

💡 Усі статті, обговорення, новини про Mobile — в одному місці. Приєднуйтесь до Mobile спільноти!

Shopify завершила міграцію свого флагманського мобільного застосунку на React Native: Android став на 44% швидшим, а навігація між екранами на iOS прискорилася на 30%.

Причини переходу на React Native

Shopify обрала React Native для того, щоб значно зменшити відмінності між iOS та Android. Цей крок дозволив команді підтримувати спільний код на обох платформах, що спростило розробку та обслуговування застосунку. До міграції лише 5% коду було спільним для обох платформ, тоді як зараз ця частка становить 86%, що практично усунуло проблему підтримки однакових функцій на iOS та Android.

Основні досягнення: кодова база та продуктивність

У процесі міграції Shopify додала 683 тисячі рядків коду, водночас видаливши 2,5 мільйона рядків, досягнувши зменшення на 1,8 мільйона рядків. Команда перенесла 586 екранів на React Native і видалила 232 застарілих екрани. Така оптимізація дозволила суттєво підвищити продуктивність: час завантаження екранів зменшився на 59%, запуск додатка став на 44% швидшим, а продуктивність WebView зросла на 63%.

Фокус на стабільності та зручності для користувачів

Одним із головних напрямків стало підвищення стабільності застосунку. Команді вдалося усунути близько 500 тисяч помилок на кожну версію, що дозволило досягти понад 99.9% сесій без збоїв. Завдяки цьому середня оцінка додатка за останні 28 днів підвищилась з 4.4 до 4.8 на iOS та з 4.1 до 4.4 на Android.

Інновації та інструменти від Shopify

В процесі міграції Shopify не лише адаптувалася до React Native, а й розробила власні інструменти для оптимізації роботи застосунку, які тепер доступні спільноті:

• Flashlist: Shopify розробила та відкрила доступ до бібліотеки Flashlist, яка стала основним інструментом для створення високопродуктивних списків у React Native.
• React Native Skia: Співпраця з Уїльямом Кандільоном (wcandillon) привела до створення React Native Skia, що дозволяє використовувати бібліотеку графіки Skia в React Native для створення якісної 2D-графіки та анімацій.
• Reanimated: Shopify підтримує роботу над Reanimated разом із SWMansion, що дозволяє створювати високоякісні анімації у React Native.

Результати міграції

Shopify досягла значних результатів завдяки переходу на React Native:

• Зниження коду на 1.8 мільйона рядків.
• Покращення продуктивності на 59% для завантаження екранів, 44% для запуску додатка та 63% для WebView.
• Збільшення стабільності до >99.9% сесій без збоїв.
• Покращення рейтингу додатка на 0.4 на обох платформах.

Висновки та уроки Shopify

Shopify виділила кілька важливих уроків для тих, хто планує подібний перехід:

1. Нативний код залишається важливим: використання нативного коду там, де це необхідно (наприклад, для Siri shortcuts або Watch app), допомагає досягти високої якості.

2. Не обирайте 100% React Native як мету: іноді нативні рішення є кращим вибором для специфічних функцій.

3. Оптимізація продуктивності з самого початку: вимірюйте показники і постійно покращуйте їх.

Links

1. migrating-our-largest-mobile-app-to-react-native
2. x.com/...​tatus/1853619638141071573