Архив недели @nekrtemplar
Понедельник
Всем привет! Меня зовут Артур и я фронтенд разработчик.
Сейчас руковожу несколькими фронтенд командами в @vkontakte. Буду рассказывать в основном про фронтенд VK, VKUI библиотеку. Возможно про PWA и Open Source.
Изначально, VKUI это библиотека UI-компонентов с интерфейсом мимикрирующим под нативный Android и iOS. Она поддерживала только эти 2 платформы (визуально) и использовалась для облегчения создания некоторых экранов VK, в мобильных клиентах.
VKUI написан на React, TypeScript и CSS. Про CSS мы ещё поговорим отдельно.
Из примеров экранов на VKUI: если в мобильном клиенте перейти в Настройки -> Приватность, то этот раздел будет на VKUI.
Так же, почти всё что открывается из второй вкладки -- это приложения на VKUI
VKUI следует принципу что разработчик использующий библиотеку -- лучше знает что ему нужно. Поэтому мы не стараемся покрыть все ситуации с которыми могут встретиться разработчики. Мы предоставляем базу и все компоненты из дизайн-системы.
Кстати, чуть не забыл, вот собственно ссылка на сам VKUI github.com/VKCOM/VKUI
Тред (Артур Столяр)
VKUI следует принципу что разработчик использующий библиотеку -- лучше знает что ему нужно. Поэтому мы не стараемся покрыть все ситуации с которыми могут встретиться разработчики. Мы предоставляем базу и все компоненты из дизайн-системы.
Про дизайн и дизайн-систему - дизайнеры работают вместе с разработчиками над её развитием. Это проявляется в том, что идее идут как от одних, так и от других.
Дизайнеры так же бывает смотрят PR, а не только дизайн ревью делают. Что бы понимать как всё работает и сделано. twitter.com/jsunderhood/st…
Дизайн, конечно же, делается не только для VKUI в вебе, но и для нативных имплементаций. С момента создания веб-библиотеки дизайн ВК поменялся достаточно и теперь там гораздо больше унификации, чем разделения по платформам.
Сейчас можно сказать что у нас единый, кросс-платформленный design language. Ну почти, но мы к этому идём.
Кстати, дизайн библиотека тоже в открытом доступе и находится вот тут: figma.com/@vk
Про дизайн и дизайн-систему - дизайнеры работают вместе с разработчиками над её развитием. Это проявляется в том, что идее идут как от одних, так и от других. Дизайнеры так же бывает смотрят PR, а не только дизайн ревью делают. Что бы понимать как всё работает и сделано. twitter.com/jsunderhood/st…
Про универсализацию. Сейчас стабильная версия VKUI под номером 3.
Эта версия всё ещё только для мобильных устройств, поддерживает в основном только touch. Да и её использование не предполагается нигде кроме мобилок. twitter.com/jsunderhood/st…
Как можно понять -- это не совсем универсально. Поэтому, примерно в начале этого года мы начали разрабатывать 4ую версию: github.com/VKCOM/VKUI/pul…
4ая версия это адаптивная версия. С поддержкой десктопа, мышки и когда нибудь будет хорошая поддержка клавиатуры.
4ая версия сейчас находится в бете. Однако, мы уже делаем на ней новые продукты. Один из примеров это connect.vk.com - личный кабинет полностью сделан на VKUI. Он запускается как standalone приложение в браузере, так и встраивается в нативные приложения как Miniapp.
4ая версия сейчас находится в бете. Однако, мы уже делаем на ней новые продукты. Один из примеров это connect.vk.com - личный кабинет полностью сделан на VKUI. Он запускается как standalone приложение в браузере, так и встраивается в нативные приложения как Miniapp.
Кому же нужен этот ваш VKUI, дизайн-система заточенная под VK и его интерфейсы.
Я бы сказал, что он может пригодиться всем.
В первую очередь это речь про создание Miniapps.
Если у вас есть какой-то продукт или вы делаете стартап, это хороший способ набрать юзеров twitter.com/jsunderhood/st…
Miniapps это такие веб-приложения которые открываются внутри VK. Но на самом деле не только внутри VK. Мы сейчас становимся супер-приложением и вместе с этим, все остальные сервисы MRG. Это значит, что миниаппы будут открываться из множества разных сервисов.
Вот тут, кстати, наш инструмент для созданий мини-приложений: github.com/VKCOM/create-v…
Вторник
Сегодня попробуем поговорить про внутренности VKUI.
Сейчас, в библиотеке очень специфичная работа с экранами приложения, из-за которой, в частности, начали возникать некоторые проблемы при переходе на адаптивность.
Экраны обычно формируются из комбинаций <View> и <Panel> компонентов, примерно так:
<View>
<Panel>
<Panel>
<Panel>
</View>
Где <Panel> это полноценный экран.
Все Panel и View должны находиться в дереве заранее, для правильной работы приложения.
