TL;DR: Новая библиотека Expo Router находится в стадии разработки, присоединяйтесь к обсуждению на GitHub! См. Документацию по Expo Router, чтобы начать работу и узнать больше.

Мотивация

Одна из самых сложных и нерешенных проблем в разработке (кроссплатформенных) приложений — это навигация. Казалось бы, нет правильного способа настроить навигацию в приложении, но есть много неправильных способов. Создание нативной навигации — это ручной, специфичный для платформы, кропотливый процесс, который почти всегда не реализует весь свой потенциал (надежные универсальные ссылки, индексация приложений, хендофф, клипы приложений и т. д.).

На противоположном конце спектра у вас есть веб-маршрутизация, которую можно быстро построить, легко понять, обнаружить и чрезвычайно масштабировать. Помимо анимации, управляемой жестами, веб-навигация является золотым стандартом. Так почему бы не перенести это в мобильную разработку?

Проблема

Очень сложно заставить веб-систему работать с нативными приложениями. Натив имеет множество внутренних состояний, которые не могут быть легко представлены URL-адресом, если на каждом этапе не предполагается множество разумных значений по умолчанию. Нативные приложения должны работать в автономном режиме без сервера. Нативные приложения также традиционно создаются с помощью скомпилированных языков, что затрудняет динамический анализ файловой структуры проекта таким образом, чтобы он был быстрым и отзывчивым для разработчика.

Самоуверенное решение

Именно здесь на помощь приходит React Native. Интерфейс JavaScript/native, передовые методы объединения и архитектура на основе компонентов обеспечивают базовые требования для создания рабочего процесса, который быстро разрабатывается и оптимизируется для производства.

С апреля 2021 года я работаю над новым кроссплатформенным маршрутизатором, который генерирует вложенную навигацию и глубокие ссылки, полностью основанные на файловой структуре проекта. Концепция маршрутизатора на основе файловой системы не нова для веб-разработчиков (PHP, Next.js и т. д.), но она является совершенно новой для разработки мобильных приложений. Перенося эту основополагающую парадигму на мобильные устройства, мы намного приближаемся к тому, чтобы обнаруживаемость и масштабируемость веб-сайтов соответствовали нативным приложениям.

Цели

Есть много приложений для новой системы маршрутизации. Самая важная цель — сделать создание, обслуживание и масштабирование приложений с вложенной нативной навигацией быстрым и простым. Дополнительные функции могут быть добавлены сверху в более поздних версиях.

Обнаруживаемый и масштабируемый

Expo Router — это вложенная система, которая создает ссылки для каждого конечного маршрута в приложении. Это позволяет пользователям мгновенно открывать любую часть приложения и делиться ею с кем угодно. Эта функция имеет решающее значение для приложений, ориентированных на контент, таких как социальные сети, новости и электронная коммерция, на самом деле для всего, что ориентировано на контент.

Представьте, что вы хотите поделиться фотографией с другом, поэтому отправили ему ссылку на instagram.com и попросили поискать, пока он не найдет именно ту страницу, о которой вы думали. Именно так работает приложение без глубоких ссылок, и это приводит к плохому принятию пользователями.

Интернет решил эту проблему несколько десятилетий назад, связав каждую страницу с URL-адресом, который может быть мгновенно передан и посещен кем угодно. Мы планируем обеспечить такую ​​же гибкость для мобильных приложений с помощью Expo Router.

Поскольку Expo является мультиплатформенной, вы можете разработать свои маршруты один раз и поделиться ими на iOS, Android и в Интернете. Это означает, что вы можете использовать встроенную обработку URL-адресов в браузере для быстрого создания маршрутов вашего собственного приложения.

В конечном итоге мы хотим, чтобы все нативные приложения автоматически поддерживали поиск приложений и индексирование контента. Это позволит собственным поисковым системам индексировать контент в вашем приложении, что значительно улучшит возможность обнаружения контента.

Офлайн-прежде всего и быстро

В отличие от веб-приложений, все нативные приложения должны работать в автономном режиме. Это означает, что приложение должно иметь возможность обрабатывать любой входящий URL-адрес без сетевого подключения или сервера.

Мы решили эту проблему, внедрив новые функции во всю структуру, начиная от Expo SDK и Expo CLI и заканчивая Metro bundler.

Конечный пользователь работает быстро и легко, поскольку маршрутизатор может динамически изменять политику загрузки компонентов между разработкой и производством — в настоящее время это экономит только время выполнения JS, в будущем мы планируем добавить возможность разделения листовых узлов. версия. Разработчики работают одинаково быстро благодаря универсальному быстрому обновлению, инкрементному связыванию и многоуровневому запоминанию артефактов в сборщике.

Извлечение данных и обработка ошибок

Одной из самых захватывающих частей React является возможность разделить пользовательский интерфейс вашего приложения и выборку данных на повторно используемые компоненты.

В Expo Router есть возможность установить Границы ошибок реагирования для каждого маршрута (границы приостановки появятся в более поздней версии). Это означает, что вы можете легко обрабатывать ошибки и состояния выборки данных единым образом во всем приложении и повторять неудачные запросы.

Это большой отход от традиционного подхода к обработке ошибок в нативном приложении: выдача фатальной ошибки и сбой приложения без индикации того, что пошло не так. Это ужасный пользовательский опыт, и мы рады избавиться от него.

Первоначальная версия Expo Router лишь поверхностно касается выборки данных и обработки ошибок, подробнее об этом в следующем выпуске. Мы рассматривали это с самого начала, потому что это неотъемлемая часть дизайна фреймворка, и мы хотим убедиться, что мы не привязываем разработчиков к системе, которая не сможет обрабатывать эти функции в будущем.

Пример

Ниже приведен простой пример переноса одноэкранного приложения из самой популярной навигационной библиотеки для React Native, React Navigation.

Expo Router построен на основе React Navigation, что упрощает перенос существующих приложений React Native на маршрутизацию на основе файловой системы.

❌ До Expo Router

Для краткости я опустил этапы установки зависимостей и нативные этапы Xcode/Android Studio, необходимые при работе без Expo. В этом примере также не учитывается скрытие экрана-заставки после монтирования навигации.

Во-первых, вам нужно создать компонент экрана:

Затем файл навигации:

Наконец, создайте файл записи для регистрации корневого компонента:

✅ После экспо-маршрутизатора

Удалите index.js и App.js — просто создайте файл в каталоге app и экспортируйте компонент React. Фреймворк будет генерировать навигацию и глубокие ссылки в памяти мгновенно с помощью Fast Refresh!

Вы можете запустить приложение с помощью npx expo start и посетить маршрут /home на любом устройстве. Я рекомендую использовать uri-scheme для тестирования глубоких ссылок на iOS и Android. Вы также можете перейти к /__index, чтобы открыть карту сайта (только для разработки):

Как вы можете себе представить, это хорошо масштабируется и очень просто в обслуживании. Вы можете создать столько страниц, сколько захотите, и фреймворк надежно приспособит структуру ссылок. Смотрите официальное руководство по установке здесь.

Во время бета-тестирования есть некоторые временные дополнительные настройки, которые требуют использования дополнительного подключаемого модуля babel. Это исчезнет в официальном выпуске.

Если вы переходите к маршруту, который не соответствует, поведение по умолчанию состоит в том, чтобы иметь ответ 404-esque, который позволяет пользователю вернуться к корневому пути / — это можно заменить с помощью глубокого динамического маршрута верхнего уровня. ».

Запрос комментариев

Сегодня мы рады поделиться с вами ранней бета-версией Expo Router. Мы хотим услышать ваши отзывы и помочь нам раздвинуть границы возможного!

Мы ждем отзывов по следующим вопросам:

  • Дизайн API: в частности, соглашение о маршрутизации и API макетов. Мы хотим, чтобы API был интуитивно понятным и простым в использовании.
  • Инструменты и рабочий процесс. Мы хотим, чтобы инструменты были быстрыми и простыми в использовании. Мы также хотим убедиться, что рабочий процесс интуитивно понятен и прост для понимания, это особенно актуально для навигации по URL-адресам на родном устройстве, где нет строки URL-адреса.
  • Производительность. Мы хотим, чтобы приложение работало быстро и надежно. Мы также хотим убедиться, что приложение маленькое и легкое. В настоящее время мы сосредоточены на том, чтобы «заставить все работать», а в будущих версиях появятся такие «быстрые» функции, как разделение пакетов и ограничения ожидания. Маршрутизатор на основе файловой системы позволяет нашим инструментам реализовать множество оптимизаций производительности за кулисами без необходимости рефакторинга в будущем.

Особая благодарность

Эта бета-версия была бы невозможна без помощи некоторых талантливых разработчиков:

Части общедоступного API представляют собой нативные версии популярных веб-фреймворков Remix (вложенные маршруты) и Next.js (соглашения о файлах). С дополнительным API, вдохновленным SvelteKit (группы → фрагменты) и Redwood (границы ошибок аналогичны ячейкам). Все, что осталось, было вдохновлено PHP. Я старался сделать API как можно более знакомым разработчикам, у которых есть предыдущий опыт использования фреймворков React.

Спасибо, что прочитали

Чтобы начать работу, обратитесь к Документации по Expo Router. Пожалуйста, сообщайте об ошибках и проблемах в репозиторий Expo Router GitHub.



EvanBacon — Обзор
Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. github.com