Практика динамического решения мобильного терминала Alipay

Помогите нам лучше оптимизировать mPaaS, получите этоПоделитесь рукописью PPT:t.cn/EZVx3bx

задний план

В сочетании с «Углубленным практическим обсуждением модульной и развязанной разработки в Ant Financial mPaaS», опубликованным на прошлой неделе, у нас есть предварительное понимание дизайнерских идей Alipay для архитектуры мобильной разработки. В этой статье будет объединен обмен на станции iWeb в Ухане, чтобы помочь вам лучше понять дизайн динамического решения mPaaS на мобильном терминале.

Во-первых, общий контент будет разделен на следующие три области:

1. Изучение динамической схемы Alipay;
2. Анализ каркаса Nebula;
3. Архитектура и поддержка технологии mPaaS

1. Изучение динамического решения Alipay

Любое техническое решение постепенно исследуется в процессе развития бизнеса и эволюции архитектуры, поэтому давайте посмотрим на эволюцию архитектуры Alipay:

Alipay постепенно превратился в приложение на основе платформы из приложения на основе инструментов в начале, а теперь превратился в суперприложение.Он имеет экосистему с несколькими приложениями, более открыт и динамичен, поддерживает высокую доступность, высокую производительность, и высокая производительность Чувствительные и мощные функции. По мере того, как приложение становится больше, архитектура всего приложения постоянно корректируется, чтобы адаптироваться к различным функциям. Текущая архитектура клиента Alipay показана на рисунке:

Общая архитектура разделена на пять уровней: уровень контейнера, уровень компонентов, уровень инфраструктуры, уровень службы и уровень приложений.

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

В такие рамки включена и наша динамическая схема. В Alipay есть две основные схемы динамической схемы:Nebulaа такжеАпплеты.

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

NebulaЭто гибридное решение для мобильного терминала Alipay, которое обеспечивает хорошие внешние функции расширения, с подключаемым модулем функций, механизмом событий, настройкой JSApi и возможностями управления push-обновлениями H5App.

Ключевые особенности включают в себя:

• Получите доступ к серверной части H5App, чтобы упростить управление автономными или сетевыми приложениями H5Apps, а также реализовывать отправку и обновление приложений H5Apps.
• Загрузите страницу H5 и управляйте каждой страницей в соответствии с концепцией сеанса.
• Android использует UCWebView, способный решить проблему сбоя Webview на системном уровне, более разумное управление памятью, более быструю загрузку сети и лучшую совместимость. Полностью попрощайтесь с проблемой совместимости с разными Webview под Android.
• Поддержка пользовательской сетевой библиотеки, пользовательского сетевого канала; поддержка пользовательской клавиатуры, пользовательского собственного вида для замены метки H5.
• Предоставляйте многофункциональный встроенный JSAPI для реализации таких функций, как отправка страниц, всплывающие окна, настройка заголовков и т. д.; поддержка определяемых пользователем функций JSAPI и подключаемых модулей для расширения бизнес-потребностей.
• Он имеет собственную функцию скрытой точки и подключен к платформе мониторинга H5 и может видеть производительность, предупреждать об ошибках и отслеживать загрузку страниц в режиме реального времени.

Другим динамическим решением являетсяАпплет Alipay:

Апплет Alipay — это совершенно новая модель разработки, которая сочетает в себе простоту разработки, кроссплатформенность и встроенную производительность H5, позволяя разработчикам быстро разрабатывать высокопроизводительные страницы и обеспечивать превосходное взаимодействие с пользователем. Благодаря использованию мини-программ Alipay разработчики разработали большое количество качественных мини-программ для Alipay, обогащая экологические возможности Alipay. Апплет открывает больше возможностей JSAPI и OpenAPI для разработчиков и может предоставлять пользователям множество удобных услуг через апплет.

2. Анализ каркаса туманности

Архитектура Nebula показана на рисунке сверху вниз:Прикладной уровень H5, сервисный уровень, собственный фреймворк:

• Прикладной уровень H5: приложение для мобильных телефонов, разработанное на основе технологий HTML и JavaScript и работающее в контейнере H5. Оно обладает кроссплатформенными функциями и может выполнять функции горячего ремонта в режиме реального времени с использованием автономных пакетов.
• Сервисный слой: Предоставляет API языка высокого уровня для разработчиков, чтобы использовать ресурсы телефонной системы, в том числе:
  • Оконная система, которую разработчики могут использовать для создания пользовательского интерфейса приложения, включая текст, изображения, кнопки и настраиваемые представления.
  • Управление ресурсами, благодаря которому разработчики могут легко получить доступ к ресурсам, не связанным с кодом, таким как многоязычный текст, изображения и макеты.
  • Управление жизненным циклом приложения, которое определяет, когда приложение запускается, завершается и принудительно закрывается в мобильной системе.
  • Контейнер H5
• Собственный фреймворк: это базовый уровень системы мобильных телефонов, который предоставляет стандартные API-интерфейсы, позволяющие языкам высокого уровня (таким как Java и Object-C) использовать базовое оборудование, и содержит множество проприетарных программных библиотек для доступа к оборудованию. Когда верхний уровень вызывает API-интерфейс платформы для доступа к оборудованию, система мобильного телефона загружает соответствующую библиотеку программного обеспечения.

Основной частью всего фреймворка Nebula является контейнер H5. Давайте посмотрим на структуру контейнера H5:

в контейнере естьH5Service, H5Sessionа такжеH5PageЭти три понятия

H5Service,H5Sessionа такжеH5PageОни расширены из класса H5Corenode с H5Service в качестве корневых узлов, который образует древовидную структуру с другими классами для формирования процесса страницы и навигации. Как правило, H5Pages является дочерним узлом H5session, а H5SESSIONS — дочерним узлом H5Service, и в любом случае присутствует только один корневой узел H5Service.

• H5Service: это базовый класс для поддержания глобального состояния приложений H5 в Nebula. В жизненном цикле приложений H5 существует только один единственный глобальный экземпляр H5Service. Операции, которые может выполнять H5Service, включают:

  • Создайте и откройте новую веб-активность
  • Создать и запустить новую веб-страницу
  • Хранение и чтение данных из общего пространства
  • Регистрация плагинов и провайдеров
  • Мониторинг жизненного цикла приложения

• H5Session: H5Session — это полный бизнес-процесс, состоящий из стека H5Pages. Например, процесс кассира включает в себя: сводную страницу корзины покупок, страницу выбора способа оформления заказа и страницу окончательного подтверждения оформления заказа. Все страницы могут существовать и работать независимо. Роль H5Session состоит в том, чтобы организовать эти страницы и упорядочить их в соответствии с бизнес-логикой для завершения бизнеса. Когда вы используете H5Service для создания и открытия новой веб-страницы, если в настоящее время нет H5Session, будет создан новый экземпляр H5Session, который будет совместно использоваться для последующих создаваемых веб-страниц. Вы можете удалить страницу из H5Session до тех пор, пока стек страниц не станет пустым, или вы можете использовать методы, предоставляемые H5Session, чтобы получить домашнюю страницу и отслеживать жизненный цикл H5Session.

• H5Page: это страница, которую пользователи могут видеть и касаться, а также самая важная часть жизненного цикла приложения. Вы можете загружать контент через URL-адрес, использовать H5Param для настройки внешнего вида и поведения страницы и даже встраивать представления H5Page и другие собственные виджеты пользовательского интерфейса в один и тот же макет, получая иерархию представлений H5Page.

Вот несколько важных компонентов контейнера H5:

• API Manager в основном управляет JS API: Nebula предоставляет разработчикам множество встроенных API-интерфейсов JS, таких как управление пользовательским интерфейсом, отображение диалогов и всплывающих уведомлений, а также использование сетевых служб RCP.

• Менеджер плагинов в основном управляет плагином: вы также можете создать новый плагин, если существующий JS API не соответствует потребностям вашего бизнеса. Вам нужно только упаковать нативный код в плагин, зарегистрировать плагин в менеджере и использовать новый JS API на уровне Javascript.

• JS Bridge - это мост связи, который соединяет оригинальный слой и JavaScript: он преобразует код JavaScript в байт-код, который может работать в системной среде, а также преобразует структуру данных собственного уровня в объекты JavaScript, чтобы их можно было обрабатывать на уровне JavaScript. Здесь Nebula сделала некоторые оптимизации для JS Bridge:

  • В Android js вызывает нативную связь через console.log, что отличается от других реализаций контейнеров. Другие контейнеры обычно реализуются через приглашение. Однако использование метода приглашения имеет два недостатка:

    • Использование приглашения заблокирует процесс всего браузера. Если собственное время обработки велико, это приведет к зависанию страницы.
    • Подсказка — это модальное окно, которое появляется на уровне пользовательского интерфейса. Если оно не отображается в нативном режиме, это вызовет проблему. Как только страница будет помещена в неконтейнерную среду, появится очень странное всплывающее окно с подсказкой. В Alipay возникла эта проблема.Когда страница Tmall находится в приложении Alipay, из-за другого механизма контейнера мост-скрипт на странице не оценивает среду.В результате, когда js на странице вызывает API , на странице появляется модель подсказки.Диалоговое окно состояния серьезно влияет на взаимодействие с пользователем, но если используется console.log, этой проблемы не возникнет. Консольный метод позволяет избежать проблем с несовместимыми средами и в то же время позволяет избежать приостановки анимации страницы.

  • Время внедрения jsbridge, поскольку бизнес-логика зависит от моста, вся логика бизнеса будет запущена после того, как мост будет готов, а самому мосту js требуется определенное время для запуска, поэтому время внедрения очень важно для производительности. Однако, поскольку жизненный цикл страницы H5 и жизненный цикл контейнера не зависят друг от друга, на каком этапе жизненного цикла H5 внедряется этот мост, влияние на производительность чрезвычайно важно.

  • Теперь метод, используемый в Alipay, заключается в отслеживании событий жизненного цикла H5.Например, когда Webview устанавливает заголовок, Android выпустит событие, такое как onReceivedTitle, shouldInterceptRequest и т. д., а iOS попытается внедрить событие webViewDidStartLoad. сразу после прослушивания этих событий. bridgejs для запуска как можно раньше в жизненном цикле H5. С помощью этого метода внедрения, после тестирования, bridgejs могут быть успешно внедрены в течение 50 мс после загрузки страницы.

• Механизм события: Nebula предоставляет механизм событий для управления порядком потоков событий между H5Page, H5Session и H5Service. H5Event может произойти на любом уровне H5Page, H5Session или H5Service.Диспетчеризация события разделена на два этапа для завершения перехвата события.

Последовательность отправки событий на этом этапе такова.H5Service -> H5Session or H5Page.

События могут быть перехвачены на любом узле (если interceptEvent() возвращает true ) и обработаны на любом узле (если handleEvent() возвращает true ): если событие перехвачено или обработано во время отправки, событие будет считаться использованным и больше не находится в обращении. . Если событие по-прежнему не перехватывается и не обрабатывается после процесса отправки, вызывающей стороне для обработки будет выдано сообщение об ошибке.

Только использование традиционной технологии H5 для отображения онлайн-страниц легко зависит от сетевой среды, что снижает производительность страниц H5.

В Neblua мы используем технологию автономных пакетов для решения этой проблемы. Автономный пакет предназначен для упаковки статических ресурсов на странице, включая HTML, Javascript, CSS и т. д., в сжатый пакет. Его структура каталогов показана на рисунке:

использоватьавтономный пакетЭто может сделать приложение H5 в контейнере максимально приближенным к родному. Основные преимущества заключаются в следующем:

• Уменьшите влияние сетевой среды на приложения H5: загрузив автономный пакет на локальный компьютер, а затем открыв его на клиенте, операция открытия страницы H5 изменится с сетевого ввода-вывода на дисковый ввод-вывод. Загрузка автономных пакетов непосредственно из локальной области не только сводит к минимуму влияние сетевого окружения на страницы H5, но и повышает удобство работы пользователей.

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

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

Процесс рендеринга автономных пакетов описан ниже.Когда контейнеры H5 отправляют запросы ресурсов, URL-адреса, используемые для доступа к локальным ресурсам или онлайн-ресурсам, совпадают. Первым перехватит запрос контейнер H5.После перехвата запроса происходит следующее:

1. Если есть локальные ресурсы, которые могут удовлетворить запрос, контейнер H5 будет использовать локальные ресурсы.
2. Если нет локального ресурса, способного удовлетворить запрос, контейнер H5 будет использовать онлайн-ресурс. Поэтому WebView не знает, является ли ресурс локальным или онлайн.

Загрузка автономных пакетов зависит от текущей сети пользователя. В обычных условиях автономные пакеты загружаются в фоновом режиме только при подключении к сети WIFI. Если пользователь находится в мобильной сети, автономный пакет не будет загружаться в фоновом режиме. Если текущий пользователь щелкает приложение, а автономный пакет не был загружен, пользователь должен дождаться загрузки автономного пакета, прежде чем использовать его.

Чтобы решить сценарий, когда автономный пакет недоступен, появилась резервная технология. При выпуске каждого автономного пакета соответствующая онлайн-версия будет синхронно выпущена в CDN.Структура каталогов такая же, как и у автономного пакета. Резервный адрес будет доставлен локальному серверу вместе с информацией об автономном пакете. В случае, когда автономный пакет не был загружен, клиент перехватит запрос страницы и обратится к соответствующему адресу CDN для переключения между онлайн- и офлайн-страницами в любое время.

Итак, как обращаться к локальным ресурсам?Мы разработали уникальный механизм виртуального доменного имени, который действителен только для автономных приложений. После сохранения страницы на клиенте, если WebView хочет получить к ней доступ, она загружается и доступна локально через файловую схему. Однако пользователь может видеть путь к файлу прямо в адресной строке, что приводит к следующим проблемам:

• Проблемы с пользовательским интерфейсом: когда пользователи увидят адрес файла, они почувствуют себя неуверенно и некомфортно из-за открытого адреса.
• проблемы с безопасностью: Поскольку файловый протокол напрямую несет локальный путь, любой пользователь может увидеть путь к файлу, где находится файл, что вызовет определенные риски безопасности. Исходя из приведенных выше соображений, вместо прямого использования пути к файлу для доступа используется механизм виртуального доменного имени. Виртуальное доменное имя — это адрес доменного имени HTTPS, который соответствует спецификации схемы URL, напримерxxxxxxx.h5app.example.com

Контейнер H5 и автономный пакет в Nebula чрезвычайно оптимизированы на основе традиционной гибридной среды, так что все приложение H5 имеет следующие характеристики:

• Ослабление сильной зависимости от сетевых ссылок
• Расширенная поддержка возможностей устройства
• Расширенный пользовательский опыт

Что касается производительности, Nebula была протестирована сотнями миллионов пользователей в Alipay, а аварийность, anr и другие показатели стабильности гарантированы. Платформа Android глубоко настроена на основе UCWebview, частота сбоев и количество ошибок намного ниже, чем у системного веб-просмотра, и она способна решить проблему системного веб-просмотра. На рисунке показано сравнение частоты сбоев и скорости ANR между UCWebview и системным Webview на стороне Android Преимущество стабильности очевидно.

Наконец, давайте взглянем на стек контейнерных технологий Nebula, повторно используемый апплетом и апплетом Nebula Alipay, реконструируя метод разработки и предоставляя внешнему миру ограниченное количество интерфейсов jsapi, что делает разработку приложений более простой и удобной для использования возможностей. Alipay, а затем публиковать, продвигать и управлять. Апплет, по сути, представляет собой автономный пакет приложения H5, но у него есть некоторые свои особенности.

• Апплет обслуживает сторонние приложения и работает в независимом процессе, его стабильность и сбои не повлияют на основное приложение, а также он поддерживает сторонние приложения, работающие в основном процессе.
• Апплет поддерживает поддержку активности, что значительно улучшает опыт вторичного открытия.

3. Техническая архитектура и поддержка mPaaS

Nebula имеет такое большое преимущество, что теперь Ant Financial использует ее не только для внутреннего использования, но и для внешнего использования.

Прежде всего, что такое mPaaS?Полное название mPaaS — «Мобильная платформа как услуга». Это оригинальная мобильная платформа для исследований и разработок, созданная Ant Financial. Она возникла на основе практики мобильных технологий и размышлений о приложении Alipay за последние 10 лет. Она предоставляет универсальное решение для разработки, тестирования, эксплуатации и техническое обслуживание, которое может эффективно снизить технический порог. , Сократить затраты на исследования и разработки, повысить эффективность разработки и помочь экологическим партнерам быстро создавать стабильные и высококачественные мобильные приложения.

В mPaaS мы используем NebulaКонтейнер H5, JSAPI, автономный пакет, апплетЭти модули экспортируются как отдельный компонент, настраиваемый в клиенте. Любое приложение может добавлять соответствующие модули и интегрировать эти функции через плагин mPaaS.Благодаря такой простой операции ваше приложение может иметь такие же мощные динамические возможности, как Alipay.

В то же время модуль апплета, предоставляемый mPaaS, позволяет пользователям беспрепятственно переносить апплет, работающий в Alipay, в свое собственное приложение, чтобы добиться [кросс-платформенной и кросс-приложенной] разработки и улучшить возможность повторного использования кода. Компонентный вывод Nebula, с MDS (Mobile Publishing Service), предоставляемый mPaaS, для динамического обновления.

Служба MDS, предоставляемая mPaaS, делает каждый выпуск обновления таким же простым, как отправка электронного письма.

MDS имеет возможность интеллектуального выпуска оттенков серого, который может проходить внутренние и внешние множественные проверки оттенков серого, чтобы гарантировать, что качество выпущенных продуктов полностью гарантировано до официального выпуска. , версия системы, сетевая среда и другие правила. Для автономных пакетов загрузка обновленных автономных пакетов предъявляет более высокие требования к сетевой среде. Чем больше размер пакета, тем ниже вероятность успешного обновления. В mPaaS мы используем возможность добавочного дифференциального обновления для уменьшения избыточности данных и оборудования. Полоса пропускания имеет очевидные преимущества в условиях мобильной сети. В то же время гарантируется высокая доступность функции обновления, а уровень доступности интерфейса обновления достигает 99,99%, а онлайн-доступ осуществляется за считанные минуты.

Ниже приводится экологическая основа Nebula. Прежде всего, внутри группы мы поддерживали многие продукты. В то же время, через mPaaS, мы также сотрудничаем с внешними клиентами, чтобы экспортировать им наши технические возможности. Типичные случаи включают 12306 клиентов. , GF нашла замечательных клиентов, Shanghai Metro, Suzhou Bank и т.д.

Особенно 12306, после использования версии mPaaS общее качество обслуживания клиентов улучшилось. Большинство клиентов 12306 используют технологию H5. Для достижения этой цели они используют контейнер Nebula H5 и автономные пакеты. Будь то скорость открытия страницы или реакция на события пользовательского интерфейса, опыт почти нативный. С точки зрения обновления и выпуска пакеты приложений 12306 редко обновляются.Согласно записям о выпуске в AppStore, в этом году было представлено только две версии.В основном итеративный выпуск бизнеса завершается динамическим образом.

Подводя итог, можно сказать, что mPaaS от Ant Financial проходит через «Контейнер Nebula H5 + автономный пакет + апплет + MDS«Этот способ реализовать динамическое решение мобильного терминала. Хотите попробовать? Добро пожаловать, чтобы загрузить демоверсию Android:

• Примечание. Загрузка QR-кода для пользователей iOS в настоящее время не поддерживается.

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

Читать в прошлом

«Введение | Модульная и несвязанная разработка в обсуждении глубокой практики mPaaS Ant Financial»

«Руководство по анализу зависимостей между пакетами приложения Koubei»

«Анализ исходного кода | Процесс вызова RPC в рамках mPaaS от Ant Financial»

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