Expo і класичний React Native — два шляхи одного фреймворку

Навіщо ця стаття

У першій статті з’явилося питання: якою технологією будувати мобільний застосунок (сайт, React Native, повністю нативні мови тощо). У другій — як усередині влаштований React Native: логіка на JavaScript, малювання операційною системою, збирач коду.

Залишається практичне питання, на якому спотикаються майже всі, хто відкриває документацію вперше:

«Починати з Expo чи з React Native CLI? Це взагалі різні технології?»

Короткі відповіді, які ця стаття розгорне:

1. Це не два різні React Native.
2. Це два способи створити проєкт, підключати можливості телефону й збирати програму для встановлення.
3. У цьому курсі спочатку йде Expo, а класичний шлях (CLI, «голий» проєкт) — обов’язково, але пізніше.

Встановлювати інструменти в цій статті не потрібно. Мета — спокійна карта місцевості, щоб наступна стаття (налаштування середовища) не виглядала як стрибок у невідоме.

Що вже відомо, і чого ще бракує

З попередніх матеріалів:

• потрібен встановлюваний застосунок, а не лише сайт у браузері;
• екрани описують у стилі React, малює їх ОС телефону;
• під час розробки код збирає Metro, JavaScript виконує рушій (часто Hermes).

Чого ще не вистачає на практиці:

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

Саме тут розходяться шляхи Expo і класичного CLI.

Два рівні: «фреймворк» і «спосіб вести проєкт»

Корисно розділити поняття, які в розмовах часто змішують.

Expo і React Native CLI — це насамперед відповіді з другої групи. Вони опираються на React Native, а не замінюють його іншим UI-фреймворком на кшталт Flutter.

@startuml
skinparam style plain
skinparam backgroundColor #ffffff

rectangle "Код екранів\nReact + TypeScript" as CODE #e3f2fd

package "Той самий React Native" #f5f5f5 {
  rectangle "Компоненти, стан,\nзв'язок з ОС" as RN #fff3e0
}

package "Шлях A: Expo" #e8f5e9 {
  rectangle "Зручний старт\nі готові модулі" as EXPO
  rectangle "Збірка\n(у т.ч. хмарна)" as EAS
}

package "Шлях B: класичний CLI" #fff8e1 {
  rectangle "Папки ios/ і android/\nз перших кроків" as BARE
  rectangle "Збірка через\nXcode / Android Studio / CI" as NATIVE
}

CODE --> RN
RN --> EXPO
RN --> BARE
EXPO --> EAS
BARE --> NATIVE

@enduml

Що таке Expo простими словами

Expo — це платформа й набір інструментів навколо React Native, створені для того, щоб:

• швидше створити проєкт;
• менше часу витрачати на початкове налагодження нативних середовищ;
• підключати типові можливості телефону через підготовлені модулі з узгодженим стилем документації;
• зручніше збирати застосунок для внутрішнього тесту й магазинів (у тому числі через хмарну службу збірки — про неї нижче простими словами).

Аналогія з вебом

У вебі можна:

• зібрати все «з нуля» (збирач, роутер, деплой — окремо підібрані інструменти);
• або взяти каркас, де багато рішень уже домовлені (наприклад, фреймворк на кшталт Next.js для React).

Аналогія неповна, але корисна: React ≈ ідея компонентів; React Native ≈ React для телефону; Expo ≈ «каркас і сервіси», які прискорюють життя з React Native.

З чого складається «світ Expo» (огляд без установки)

Не потрібно запам’ятовувати всі назви продуктів. Достатньо карти ролей.

Що таке React Native CLI і «голий» (bare) проєкт

React Native CLI (інтерфейс командного рядка спільноти React Native) — класичний спосіб створити проєкт, у якому з самого початку (або дуже рано) видно нативні частини:

Такий проєкт часто називають bare (англ. «голий») — у сенсі «без обгортки Expo як головного способу життя», з прямим доступом до нативних папок. Іноді кажуть bare workflow — «робочий процес із голим нативним проєктом».

Чому цей шлях важчий на першому тижні

Саме тому починати курс з CLI часто означає: тиждень возитися з середовищами, так і не діставшись до списків, навігації й офлайну.

Порівняння поруч

Таблиця нижче — орієнтир, не вирок. Конкретна команда може змішувати підходи (про це далі).

@startuml
skinparam style plain
skinparam backgroundColor #ffffff

rectangle "Мета навчання:\nекрани, дані, камера,\nофлайн, магазини" as GOAL #fff3e0

package "Маршрут курсу" #e8f5e9 {
  rectangle "1. Expo:\nшвидкий зворотний зв'язок" as A
  rectangle "2. Реальні фічі Nomad" as B
  rectangle "3. CLI / bare:\nрозуміння ios/ і android/" as C
}

GOAL --> A
A --> B
B --> C

note right of C
  Без кроку 3 картина RN
  лишається неповною.
  Без кроків 1–2 легко
  втомитися від tooling.
end note

@enduml

Міф: «Expo — лише для іграшок»

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

Сьогодні для багатьох нових продуктів Expo — нормальний production-шлях:

• застосунки в App Store і Google Play збирають через Expo / EAS;
• потрібні native-модулі додають, не обов’язково «викидаючи» Expo з першого дня;
• великі команди публічно описують роботу з Expo на серйозних продуктах.

Міф: «Справжній React Native — тільки CLI»

Справжній React Native — це те, що виконує React-код як мобільний UI на iOS/Android. І Expo-проєкт, і bare-проєкт у типовому сценарії є React Native.

Відрізняється:

• структура репозиторію;
• спосіб підключення модулів;
• повсякденні команди;
• модель збірки й оновлень.

Не відрізняється ідея з попередньої статті: JS-логіка, малювання ОС, Metro, рушій JS.

Коли обирають Expo

Expo зазвичай доречний, якщо:

Саме так виглядає навчальний Nomad і більшість «зелених» стартапів на React-команді.

Коли обирають класичний CLI / bare (або сильний ухил у нативні папки)

У курсі ці сценарії не ігноруються — для них є окремий модуль після того, як з’являться екрани, дані й базова збірка на Expo.

Важливий міст: Expo вміє «показати» нативні папки

Сучасний Expo — не стіна між розробником і ios/ / android/. Існує процес генерації нативних проєктів з опису конфігурації застосунку (у документації це пов’язано з командами на кшталт prebuild — «попередня збірка / генерація нативних проєктів»).

На рівні цієї статті достатньо ідеї:

Як це стикується з архітектурою з попередньої статті

Незалежно від Expo чи CLI:

Маршрут саме цього курсу

Міні-проєкт: три короткі рішення «який шлях ведення проєкту»

Завдання

Уже відомо, що продукт — на React Native (не PWA і не Flutter). Потрібно обрати спосіб вести проєкт: Expo чи класичний CLI / bare.

Для кожної ситуації — один вибір і 2–4 речення обґрунтування. Код не пишеться.

Ситуація 1

Новий застосунок «щоденник подорожей» для iOS і Android. Команда — троє веброзробників на React/TypeScript. Треба за 2–3 місяці дійти до внутрішнього тесту з камерою й офлайном. Нативних інженерів у штаті немає.

Ситуація 2

Великий банківський застосунок уже написаний на Kotlin і Swift. Потрібно вбудувати кілька нових екранів на React Native всередину існуючих програм, зберігаючи поточну нативну збірку й релізний потяг банку.

Ситуація 3

Стартап рік вів продукт на Expo і успішно вийшов у магазини. З’явилась потреба в рідкісному Bluetooth-пристрої; офіційний приклад виробника — лише фрагменти на Swift/Kotlin. Команда готова інвестувати час у нативний міст, але не хоче викидати весь JS-код.

Критерій «готово»

• У кожній ситуації є явний вибір (або «Expo + поглиблення в native», якщо так точніше для ситуації 3).
• Обґрунтування спирається на обмеження команди/продукту, а не на «Expo модний» / «CLI серйозніший».

Nomad: яке рішення курсу

Для навчального застосунку Nomad зафіксовано:

Окремого git-коміту в цій статті немає. Після статті про setup з’являється перший коміт ініціалізації Nomad (у повідомленні — шлях матеріалу).

Підсумок

Практичні завдання

Базовий рівень

1. Пояснити одним абзацом, чому «Expo vs React Native» — хибна постановка питання.
2. Назвати дві переваги Expo на старті навчання.
3. Назвати дві ситуації, де bare/CLI виглядає природніше.

Середній рівень

1. Виконати міні-проєкт (три ситуації).
2. Описати, що таке папки ios/ і android/ простими словами (по 2–3 речення).
3. Пояснити, навіщо курсу окрема пісочниця [Nomad](https://github.com/arakviel/nomad)-bare, а не лише один проєкт Nomad.

Професійний рівень

1. Написати короткий текст для нетехнічного стейкхолдера: «Чому беремо Expo зараз і все одно вчимо CLI».
2. Скласти список із шести ризиків, якщо команда ніколи не відкриє нативні папки.
3. Скласти список із шести ризиків, якщо команда з дня один обере лише bare без досвіду mobile toolchain.

Часті запитання