Веб-технологии в мобильном приложении «ВКонтакте»

Разработчик Тимофей Чаптыков рассказал о веб-технологиях в мобильном приложении «ВКонтакте» в рамках лектория на прошедшем VK Hackathon 2018.

1 of 2

VK APPS

VK Apps — это сервисы, открываемые из «ВКонтакте», имеющие точку входа внутри, позволяющие решать пользовательские сценарии. Найти сервисы можно в меню мобильного приложения.

1 of 5

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

О том, что такое VK Apps и зачем это нужно пользователям, бизнесу и разработчикам, вы можете узнать в нашей статье.

Инфраструктура

Для того, чтобы приложения хорошо работали и презентабельно выглядели, а также создавались быстро и эффективно, нужна основательная инфраструктура.

Это и есть те самые веб-технологии в мобильном приложении «ВКонтакте». Все приложения, открываемые в сервисах, написаны на HTML, CSS и JavaScript и открываются в WebView.

Очень важно, чтобы опыт работы с приложениями был комфортным и приятным, а также максимально приближенным к использованию нативных приложений. Для этого организована следующая архитектура: веб-приложение общается с Web API и может запросить у серверов некоторые данные о пользователях. Но также веб-приложению иногда нужно общаться с нативным клиентом. Для этого используются два основных инструмента — VKUI и VKUI Connect.

VKUI — это библиотека компонентов, написанная на react, представляющая собой типичный FrontEnd. Устроена таким образом, чтобы полученный интерфейс был максимально нативным.

VKUI Connect — шина событий, которая позволяет общаться с нативным приложением.

VKUI

Приложения, написанные с помощью компонентов, имеют привычный вид для своей платформы.

Разработчики видят это так:

1 of 2

Привычные жесты сохраняются:

1 of 7

Пример написания кода приложения при использовании WebStorm и Chrome. Всё приложение пишется в одном документе.

VKUI насчитывает 60 компонентов, которые можно разделить на 4 группы: Layout, popouts, blocks и forms.

Некоторые компоненты:

1 of 2

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

Как это выглядит:

1 of 2

Найти можно по ссылкам:

• Репозиторий с иконками на Гитхабе

• Витрина иконок

• Пакет в NPM

В итоге инфраструктура дает следующие преимущества:

Ознакомиться с VKUI можно здесь:

• VKUI на Гитхабе

• Витрина компонентов VKUI

• Пакет в NPM

VKUI Connect

Как уже выше говорилось, VKUI Connect является шиной событий для общения нативных приложения с VKUI-приложениями.

1 of 2

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

Примеры использования:

1 of 2

Ссылки на VKUI Connect:

• VKUI Connect на Гитхабе
• Документация по доступным событиям
• Пакет в NPM

Для того чтобы облегчить работу был создан инструмент Create VK App, позволяющий создавать сервисы одной командой и имеющий уже настроенные VKUI Connect, VKUI и другие инструменты.

Найти инструмент можно здесь:

• Сreate VK App на Гитхабе

• Пакет в NPM

Использование внутри приложения VK

Примеры использования VKUI внутри приложения:

1 of 4

Это позволяет:

• Осуществлять быстрое обновление разделов, как для всех пользователей, так и для выборочных.
• Также код работает на всех платформах.
• Возможность писать код для разных платформах одновременно.
• Возможность использовать на m.vk.com.

Выводы

• Ознакомиться с сервисами.

• Написать свой сервис и добавить его на платформу, в которой большое количество трафика и небольшая конкуренция.

• Возможность использовать компоненты на сторонних ресурсах.

Конкурс по написанию приложения.

Ознакомиться с выступлением:

Посмотреть презентацию можно по ссылке.

Автор: Лена Гамель
Редактор: Арсений Метелев