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

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

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

В данный момент, я являюсь тех-лидом небольшой группы энтузиастов, создающих инновационную открытую платформу для разработки веб-приложений. Мы пытаемся сделать, эту самую разработку, более простой и доступной. Это наша самая главная цель, как бы пафосно или наивно это не звучало. Мы хотим, чтобы создание веб-приложений стало более тривиальной задачей для дизайнеров, аналитиков, маркетологов, разработчиков для других платформ и стеков. В основе, мы используем существующие стандарты и проверенные технологии, такие как HTML, CSS, современный JavaScript, git, блокчейн, Smart CDN, нейросети… и, конечно, веб-компоненты.

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

Веб-компоненты – это не замена вашему фреймворку

Многие попадают в эту ловушку, начиная сравнивать и противопоставлять веб-компоненты различным популярным библиотекам и фреймворкам. В итоге, эти многие, задаются вопросом: а зачем мне эти ваши нативные компоненты, если они, из коробки, не умеют делать того, что умеет, условный, React? Где реактивность? Где синтаксис шаблонов с привязками любых типов данных? Где работа с локальным и глобальным состоянием?

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

Другими словами, веб-компоненты и <ваша_любимая_библиотека> – не конкуренты, а союзники в решении определенного класса проблем. А если вы любите строить свои велосипеды, то веб-компоненты – это отличная основа для велосипедостроения. Просто лучшая, на текущий момент.

Главное – это жизненный цикл

Повторю, потому, что это очень важно: главное – это жизненный цикл. С Custom Elements, вы обладаете бесценным знанием того, когда ваши компоненты появились у пользователя на экране. Не важно кто, как и в какой момент эти компоненты добавил, вы ЗНАЕТЕ что вам пора что-то с этим делать: инициализировать виджет, сделать дополнительный запрос, динамически подтянуть зависимость или ассет, “поздороваться” с другими элементами приложения… Да что угодно. Также, вы знаете, когда именно ваш компонент исчез и настала пора очистить память, “попрощаться” и прибрать за собой.

Да, у всех популярных компонентных либ тоже есть жизненный цикл, но для этого нужна та самая дополнительная внешняя абстракция, которая, во первых, потребляет дополнительные ресурсы, а во вторых, не всегда доступна и контролируема. А иногда ее и нет вовсе, если, например, статическая страница генерируется на сервере. Думаю многие, кто когда-либо делал какие-то динамические виджеты для какого-нибудь WordPress, хорошо знают о чем именно я говорю и какая это боль. Ох, тут можно отдельную статью написать…

Композиция и разметка

Веб-компоненты очень хорошо дружат с, его величеством, HTML. Они, по сути, его органичная часть. А HTML – это альфа и омега всего веба.

Добавить, условный React-компонент на страницу, вы можете только в шаблоне React (JSX), или в его рантайме через внутренний API. Либо, вам нужно делать какой-то враппер, и активировать весь последующий воркфлоу.

А добавить Custom Element – можно как и куда угодно, от любого серверного шаблонизатора или реактивного шаблона на фронте, до статического HTML-файла. И это будет просто работать. Браузер сам запустит вашу логику в нужный момент. В этом плане, веб-компоненты – это отличное решение для добавления динамических элементов при JAMStack подходе.

Shadow DOM – это опция

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

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

А во вторых, Shadow DOM – это вообще не обязательно. Вы имеете полное право НЕ использовать эту технологию в тех случаях, когда, как вам кажется, она вам мешает. Тут я хочу сделать акцент, на том, что я не предлагаю полностью отказаться от использования Shadow DOM. Нет, это очень клевая штука, изучите ее обязательно. Но я за то, чтобы использовать теневую магию только тогда, когда вы сами хорошо понимаете зачем вы это делаете и как избежать проблем. Сила и ответственность, ну вы поняли.

Кстати, для тех, кто не знал, shadow root можно создать и у обычного элемента, например, div.

А про кастомизацию элементов с Shadow DOM я хочу написать отдельную статью.

Объектная модель

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

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

Веб-компоненты – готовы к продакшн

Кто-то считает, что все, о чем мы тут говорим, это некая “сырая” технология, у которой есть проблемы с поддержкой. Ребята, где вы были 8 лет? Пожалуйста, зайдите на caniuse и проверьте сами. Да, некоторые браузеры, действительно, не поддерживают наследование от встроенных браузерных элементов. Но это совсем не критично и есть очень простые альтернативные методы работы с этими элементами. Все основные возможности – поддерживаются давно и везде, кроме, возможно, всеми заброшенных некро-браузеров.

Полезные ссылки

Библиотеки: Community: Base Libraries

Доки: Using custom elements

Twig – это мощный шаблонизатор, позволяющий создавать простые и выразительные шаблоны для фронтенда. Он широко используется в таких фреймворках, как Symfony и Drupal. Однако WordPress не поддерживает Twig нативно, поэтому, если мы хотим использовать шаблоны Twig, мы должны подключить его вручную.

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

Почему бы не использовать Twig непосредственно в WordPress?

Мы решили не интегрировать Twig напрямую в наш плагин из-за возможности конфликтов с другими плагинами.

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

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

В отличие от Node.js, PHP не поддерживает одновременное использование нескольких версий одного и того же пакета. В случае с Twig он включает специальные проверки. Если несколько плагинов или тем используют Twig, то загрузится только первая версия Twig, а остальные будут пропущены.

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

Вы можете подумать, что мало кто использует Twig в WordPress, но это не так. Более чем 105 плагинов, включая такие популярные, как Matomo Analytics, Timber и Shield Security, используют Twig.

Если вы решите использовать Twig непосредственно в своем плагине или теме, то рискуете столкнуться с конфликтом версий с одним из этих существующих плагинов или с плагинами, которые могут появиться в будущем.

Scoping с PHP Scoper

Оптимальным решением на данный момент является scoping. Scoping подразумевает добавление префикса к исходному пространству имен пакета. Такой подход широко распространен среди плагинов WordPress, и ярким примером является плагин Yoast SEO.

Scoping, в некотором роде аналогичный цели Docker, позволяет избежать конфликтов версий.

Если мы инкапсулируем все файлы Twig в нашем пространстве имен, то это позволит избежать конфликтов. Но как это сделать?

На помощь приходит PHP Scoper, полезная утилита доступная через Сomposer, предназначенная для решения этой задачи.

Мы не будем вдаваться в подробности использования Scoper, все достаточно просто. Для ознакомления с утилитой можно обратиться к официальной документации и прочитать эту статью.

После того как вы установили пакет и решили, что все готово, наступает реальность. Жизнь разработчика никогда не бывает такой простой. PHP Scoper требует от нас преодолеть несколько трудностей, прежде чем он позволит нам без проблем интегрировать шаблоны Twig в WordPress.

Проблемы, связанные с Twig scoping

PHP Scoper обычно хорошо работает из коробки с большинством пакетов. К сожалению, Twig является исключением. Помимо того, что Twig включает в себя набор глобальных функций (с которыми Scoper может работать), он динамически генерирует код при компиляции шаблонов. Этот генерируемый код взаимодействует с классами и функциями Twig, которые должны быть глобальными.

PHP Scoper не в состоянии обработать эти аспекты, что означает, что во время выполнения мы будем сталкиваться с ошибками типа ‘function or class is not defined’, поскольку некоторые части кода будут пытаться обратиться к глобально объявленным классам.

Вручную решать каждый отдельный случай нецелесообразно, так как на это потребуются недели.

Было бы полезно найти решение этой проблемы, не так ли? Особенно если учесть, что PHP Scoper поддерживает пользовательские патчи, которые, по сути, являются функциями, вызываемыми во время выполнения для исправления ‘тяжелых’ случаев.

Пользовательский патч в PHP Scoper

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

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

Проведя небольшое исследование, я обнаружил, что любезные ребята из OnTheGoSystems (разработчики WPML) уже создали патч для этой задачи. Им тоже понадобились шаблоны Twig для своих WordPress-решений, и они великодушно решили поделиться своим решением с другими.

Основная часть работы уже была проделана, но жизнь умеет подбрасывать трудности. Этот пакет был разработан для Twig v1 и не охватывает всех изменений, появившихся в последней, третьей версии. Поэтому нам пришлось самостоятельно внести некоторые улучшения, хотя они и были относительно незначительными по сравнению с тем, что было сделано OnTheGoSystems.

Мы создали репозиторий, включающий конфигурацию Scoper для Twig v3 с необходимыми патчами. Вы можете использовать его в своих проектах, чтобы безопасно интегрировать Twig v3 в свой плагин или тему.

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

Альтернативные подходы к интеграции шаблонов Twig в WordPress

Если ручная настройка Twig вам не по душе, то стоит рассмотреть альтернативные решения для интеграции шаблонов Twig в WordPress.

Одним из вариантов является фреймворк Timber, который также доступен в виде плагина. Другой вариант – плагин ACF Views, предназначенный для создания умных шаблонов (на основе Twig) для отображения контента в WordPress.

Timber – это не просто интеграция Twig, это фреймворк, который помимо интеграции Twig предлагает ряд помощников и классов. Однако существенным недостатком Timber, особенно в части использования Twig, является то, что он не применяет scoping для Twig. Используя Timber, вы, по сути, перекладываете ответственность за неконфликтность Twig с себя на автора, что потенциально может привести к проблемам совместимости.

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

Послесловие

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

Счастливого пути! (в оригинале Happy twigging).

https://vue-faq.org – попытка охватить наиболее часто задаваемые в профильных чатах и конференциях вопросы о фронтенде в целом и Vue.js фреймворке в частности.

FAQ постоянно обновляется, текущий список тем выглядит так:

Фронтенд

• О фронтенд фреймворках

• Как изучать Vue?

• SPA, PWA, SSG, SSR и CEO

• CSS и UI библиотеки

• Архитектура фронтенд приложений

Разработка

• Настройка IDE

• Создание и сборка приложения

• Как вставлять картинки и другие ресурсы

• Сторы – Vuex, Pinia и Composition API

• Тестирование

• Полезные советы

Общение с бэкендом

• Авторизация и аутентификация

• Протоколы. To REST или не REST?

• Выделение API сервиса

• Варианты сделать бэкенд

• CORS

Деплой на сервере

Две статьи из первого пункта “О фронтенд фреймворках” для ознакомления:

Что такое “реактивность”?

Наверное, самое фундаментальное отличие программы для фронта от программы для бэка, микросервиса и даже отдельного приложения с GUI, это понятие “реактивности“.

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

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

В реактивном фреймворке достаточно задать реактивную переменную и указать, что она является, например, значением input поля. При вводе пользователем в это поле значения переменная автоматически обновится, и все другие переменные, зависящие от нее, тоже. Кода писать для этого не надо.

Упрощенно, под капотом реактивная переменная это прокси-обертка над обычной, которая следит за её изменениями и регистрирует всех слушателей, которых надо оповестить об изменении переменной, чтобы они себя пересчитали.

Почему Vue?

Чтобы можно было разрабатывать и управлять большими сложными программными системами, было изобретено ООП – объектно-ориентированное программирование, где для иерархичного разбиения сложности вводились новые сущности – объекты. Они инкапсулировали в себе данные и поведение (логику).

На фронтенде немного иная ситуация из-за наличия кода на нескольких языках программирования – HTML, CSS, JavaScript. И в данном случае SFC компоненты во Vue отлично служат для разбиения сложности системы. Каждый компонент инкапсулирует HTML шаблон, его стилизацию и логику.

Vue делает это намного лучше, чем тот же React, который сваливает всё в одну кучу. В этом аспекте Vue однозначно является флагманом компонентно-ориентированного программирования (КОП) на фронтэнде.

Кроме того, во Vue 3 появилась реактивность за пределами компонент – ref и reactive переменные можно задать в простом js модуле. Это используется в composable функциях. Стало возможно отделить от представления не только реактивный сервис (useI18n, useScreenSize например), но и бизнес-логику (useShoppingCart, useNewsWidget). Это позволяет использовать на фронтенде MVC шаблон, где роли View и частично Controller выполняют компоненты, отвечающие преимущественно за визуализацию, а логика и модель (Model и частично Controller) приходятся на композабл функции и их реактивный стейт.

Это даёт возможность сделать, например, смену дизайна сайта или замену UI библиотеки намного более легкой задачей.

Данная особенность также сильно выделяет Vue на фоне других реактивных фреймворков-аналогов.

Реактивностью Vue можно пользоваться совсем без UI. Например, в этом расширении VS Code элементы Vue 3 reactive, ref и watch используются для организации реактивности в коде без визуальных компонент.

Замечания, комментарии, предложения – велком.

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

Действительно, скачать приложения банков из App Store сейчас нельзя. Пытаться перенести их с одного устройства Apple на другое или установить его в обход магазина – тот еще квест, причем не самый безопасный. Но у нас для вас хорошая новость: выход есть. Если вам интересно узнать, как банки (правда, не все) о вас позаботились и решили эту проблему, а также причем тут мы, компания Smart Engines – заглядывайте под кат. 

Тест на клиентоориентированность 

Владельцы новенького iPhone действительно смогут спать спокойно. Им не придется пользоваться сомнительными сторонними сервисами, обращаться к экспертам на “Авито” за несколько тысяч рублей или взламывать iOS для установки банковских приложений.

О вас заранее позаботились несколько российских банков – это прежде всего Альфа-банк, ВТБ и МКБ. Их клиентам по-прежнему будет доступен привычный, хорошо знакомый функционал. Пользователи этих банков со своих смартфонов, будь то iPhone 15 или  iPhone 99, по-прежнему смогут:
– совершать мгновенные переводы, не вводя номер телефона или карты вручную;
– осуществлять платежи по QR-коду или выставленному счету;
– оплачивать штрафы ГИБДД, услуги ЖКХ и налоги;
– оформлять цифровые карты, заказывать их физические копии;
– пользоваться кредитными предложениями и многое другое.

Короче говоря, делать все то, к чему они привыкли. С одной только оговоркой – не через мобильное приложение, а прямо в браузере. 

Три волшебных буквы – PWA

Обеспечить клиентам технологически продвинутый функционал в браузере банки смогли благодаря развитию собственных PWA-приложений. Progressive Web Application – веб-разработка, которая визуально и функционально трансформирует сайт в мобильное приложение. 

Вопрос разработки модных progressive web applications (PWA) начал подниматься еще пять-шесть лет назад. Им в разное время уделяли внимание Apple, Firefox и другие компании. Связано это было с тем, что постоянные усовершенствования HTML, CSS и JavaScript открывали перед пользователями таких приложений более высокий уровень интерактивности и делали нативный опыт возможным на обычном сайте.

Есть один нюанс. Мобильные браузеры, будь то даже стандартные Safari и Chrome, имеют ряд ограничений. К примеру, они изначально не запрограммированы распознавать видео или изображения и обрабатывать такие данные с телефона. А это крайне необходимо для реализации таких фич, как, например, сканер QR-кодов.

А WASM я попрошу остаться

Здесь на помощь банкам уже пришли мы с нашими системами распознаваниями с применением технологии WebAssembly (WASM). Коротко расскажем об этой разработке.

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

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

Мы провели первые эксперименты с WASM-компонентами еще пять лет назад, а готовые технологии для распознавания данных в браузере представили в 2021 году. Благодаря WebAssembly мы успешно распознаем баркоды, банковские карты, документы, счета, номера телефонов внутри браузера клиентского устройства. 

Основное предназначение ПО Smart Engines — распознавание в браузере QR и банковских карт (например, для оплаты в интернет-магазинах) без передачи изображений на сервер и автоматизации процессов ввода документов (например, паспорта) в интернет-клиентах банков. Подробнее о том, как мы внедряли SDK для распознавания паспорта в PWA, тут. 

Встраиваем за 5 минут

Встроить ПО с использованием WASM в PWA – это довольно легко. Передача фотографии с штрих-кодом в движок распознавания занимает всего несколько строк:

let engine = new SE.CodeEngine();
console.log(“SE.CodeEngine created”);
let sessionSettings = engine.GetDefaultSessionSettings();
let engine_name = SE.ToString(SE.EngineSettingsGroup.Barcode);
const imgSrc = new SE.seImage(event.target.result);
let spawnedSession = engine.SpawnSession(sessionSettings, signature);
const result = spawnedSession.Process(imgSrc);

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

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

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

Вовремя спохватились

В 2022 году игроки финрынка начали интересоваться технологией – признаемся, что с нами консультировались практически все попавшие под санкции банки. В результате мы внедрили наши разработки в:
– интернет-версию Альфа-банка “Альфа-Онлайн”;
– интернет-версию ВТБ “ВТБ Онлайн”;
– интернет-версию МКБ “МКБ Онлайн”;
– несколько других банков.

Кстати, о том, как мы помогали Альфа-банку интегрировать функционал распознавания в веб-приложение, мы уже рассказывали здесь. 

А летом 2023 года мобильные интернет-банки Альфа-банка и ВТБ заняли первое и второе место в рейтинге “Лучший daily banking”, опубликованном Markswebb исследовании “Mobile Web Banking Rank 2023”.

Вместо заключения

Таким образом, мы видим, что проблема исчезновения банковских приложений из App Store хотя и существует, но не должна стать препятствием при покупке iPhone 15. Благодаря тому что некоторые банки проявили клиентоориентированность, мы можем спокойно покупать любые гаджеты.

“С самого начала мы делали ставку на собственные технологии без использования иностранных компонентов и стремились к созданию высоко оптимизированных решений.  Мы рады, что благодаря нашему ПО ведущие игроки российского финансового рынка могут продолжать обеспечивать своим клиентам тот уровень удобства выполнения платежей, к которому они привыкли при работе в мобильных банках. А клиенты в свою очередь покупать любые смартфоны и другие устройства, не задумываясь: удастся ли скачать туда банковское приложение”, – отмечает генеральный директор Smart Engines к.т.н. Владимир Арлазаров.

Сейчас очень популярная история создавать свой UI Kit и везде рассказывать какой он крутой и как он ускорил разработку, поэтому я решил написать небольшой гайд, как заиметь себе собственный UI Kit.

А зачем он вообще нужен?

Зачем?

1. Это удобно и быстро, все компоненты лежат в одном месте.

2. Несколько команд могут удобно его использовать, не прибегая к технике ctrl + c -> ctrl + v.

3. Новые изменения сразу актуализируются во всех проектах.

4. Можно прикрутить Storybook и показать менеджерам, как вы умеете xD.

5. Это некий бренд, сделав крутой UI Kit и сделав под него базовую доку, ты можешь говорить о том, что у нас есть некоторые open source решения.

Мы поняли зачем – приступаем

Тут должна была быть Наталья Морская Пехота

Начнем с базы

С помощью vite заинитим проект на vue 3 с typescript – тык

npm create vite@latest ui-kit — –template vue-ts

Проект есть, теперь чуть-чуть поколдуем с нашим package.json, сделаем базовые манипуляции, для того чтобы это было больше похоже на UI Kit.

Добавим vue в devDependencies и добавим peerDependecies с зависимостью vue >= 3. Делаем это для того, чтобы получить наименьшее количество кода на выходе, а значит лучшую производительность.

“peerDependencies”: {
“vue”: “>=3”
}

Почитать что такое эти ваши dependencies, devDependencies и peerDependencies можно тут – тык, если кратко:
dependencies – зависимости, которые пойдут в конечный бандл.
devDependencies – зависимости которые нужны только для разработки и не требуются в конечном бандле.
peerDependencies – зависимости, которые должны быть установлены у пользователя в его проекте, для использования вашей библиотеки

Укажем экспорты для файлов нашей библиотеки:

Указываем что файлы нашей библиотеки будут в папке dist:

“files”: ,

Настроим экспорты стилей и js бандлов для import/require(что за имена такие модные, вы поймете в следующем пункте, не переживайте).

“exports”: {
“.”: {
“import”: “./dist/dragonekui.es.ts”,
“require”: “./dist/dragonekui.umd.ts”
},
“./styles”: “./dist/style.css”
},

Получим примерно вот такой package.json

package.json

Настроим vite

Далее нам нужно настроить vite, чтобы он правильно собирал наш проект и все было красиво!

В vite.config.ts, добавим options.lib, для того чтобы собирать проект как библиотеку, там укажем название нашей библиотеки, entry point – корневой файл для сборки либы, и filename на выходе(имя, которое будет использовать в папке dist при сборке проекта), по стандарту собирается два файлы библиотеки в формате es и umd их можно поменять в зависимости от ваших потребностей, с помощью свойства formats.

Почитать про форматы можно вот тут – тык

lib: {
entry: resolve(__dirname, ‘src/components/index.ts’),
name: ‘dragonekui’,
fileName: (format) => `dragonekui.${format}.ts`,
},

Я сделал entry point файл index.ts в компонентах, туда я буду импортировать все мои компоненты и в дальнейшем их экспортировать.

Далее в этом же файле нужно поднастроить rollup. Указываем в опции external – vue, показывая, что пакет является внешней зависимостью и прокидываем ее определение в том проекте, где мы будем использовать наш пакет, обычно там инстанс vue есть Vue.

rollupOptions: {
external: ,
output: {
globals: {
vue: ‘Vue’,
},
},
},

Также нужно добавить генерацию типов для нашего пакета, это мы сделаем с помощью специального плагина для vite – vite-plugin-dts.

npm i -D vite-plugin-dtsplugins: ,

Получим примерно вот такой vite.config.ts

vite.config.ts

Storybook

Устанавливаем storybook по их официальному гайду – тык

npx sb init

Получаем установленный storybook в проект и папочку с examples, ее можно удалить, она нам не понадобиться.

Обязательно в tsconfig.json, добавляем .stories.ts формат в exclude, чтобы нам не генерились типы для этих файлов:

“exclude”: ,Приступим к написанию кода

Кот пишет код

Я покажу пример на кнопке.

Сделаем простенький компонент кнопки:

src/components/button/Button.vue

Button.vue

Далее напишем story для этой кнопки:

src/components/button/Button.stories.ts

Button.stories.ts

Запускаем:

npm run storybook

Получаем вот такой результат:

story с нашей кнопочкой

Заключительный этап

Теперь нам нужно сделать export нашей кнопки из ранее указанного нами entry point(src/components/index.ts)

import Button from ‘./button/Button.vue’;

export {
Button,
};

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

Билдим

npm run build

Получаем на выходе папку с нашим js bundle – dist/dragonekui.es.ts, dist/dragonekui.umd.ts, и файлы с типами в dist/components/*/*.vue.d.ts и файл с экспортом всех этих типов dist/components/index.d.ts

Полученный build

Финал. Деплой на npm

• Для начала, нужно зарегистрироваться на npm – тык

• После, нужно залогиниться

npm login

• Далее билдим наш проект, и публикуем его на npm (не забывай каждый раз повысить версию пакета, пакеты с одинаковой версией не опубликуются)

npm run build && npm publish

Готово, теперь у тебя есть UI-KIT задеплоенный на npm.

UI-KIT на npm

Весь код можно найти в этом репо – тык

Если статья показалась вам интересной, то у меня есть Тг-канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.

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

Как это повлияет на веб-дизайнеров и пора ли им подыскивать новую профессию? Или нужно подойти с другой стороны, запрячь искусственный интеллект и использовать в своих целях? Разбираемся! 

Путь развития веб-дизайнера 🙂

Всем привет, я — Саша Комбаров, руковожу в веб-студии. Сегодня расскажу, как мы используем искусственный интеллект в работе дизайнеров и стоит ли дизайнерам напрягаться по этому поводу 🙂 

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

Как пользоваться нейросетью Midjourney 

Уже написано достаточно мануалов: и как зарегистрироваться, и как правильно задавать настройки, и как формировать запрос к нейросети. Материал не об этом, поэтому базово расскажу, как начать работать с Midjourney, а все остальные примочки вы можете найти в интернете.

Как получить доступ к нейросети:

• Установите Discord, затем запустите приложение или откройте веб‑версию сервиса в браузере. Я пользуюсь приложением, по ощущениям работает быстрее веб-версии.

• Зарегистрируйтесь или войдите по логину и паролю, если ранее использовали Дискорд. Для регистрации нужен номер телефона и электронная почта. Сервис работает в России, поэтому приберегите танцы с бубнами, а точнее зарубежную карту для оплаты 🙂

• Как только зашли в Дискорд, вы сможете перейти в Midjourney по специальной ссылке‑приглашению.

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

Стоимость и наполнение тарифов

Нажав на ссылку, вы попадете в публичный чат, где будут отображаются десятки сообщений Midjourney, основанных на запросах пользователей.

Как настроить Midjourney, чтобы применять в работе

В Discord есть канал Newcomer Rooms с чатами newbies. Там и создается картинка. Выберите любое количество чатов, нажмите и введите /settings. Затем Enter. 

Выберите следующие настройки:

• Первая строка. Версия движка. Выберите версию MJ; MJ Test имеет два экспериментальных изображения вместо четырех; MJ Test Photo — с уклоном в фотореализм.

• Вторая строка. Качество изображения. Выберите базовое качество для уменьшения задержки.

• Третья строка. Уровень конфигурации. Установите значение Средний, Style med, чтобы предотвратить «‎чрезмерную фантазию»‎ нейронной сети. Высокие или слишком высокие результаты могут быть далеки от требований.

• Четвертая строка. Алгоритм повышения качества изображения.Выберите Regular upscale — стандартное повышение качества; Light upscale — повышает разрешение изображения, но с меньшей детализацией; Beta — может достичь вдвое большего размера, чем Regular, но работает нестабильно.

• Пятая строка. Режим доступа. Установите Public mode, так как частный режим платный.

• Пятая строка. Режим редактирования. Опять же, только один доступен бесплатно, Fast mode — мгновенный, со счетчиком производства. Режим Relax без счетчика доступен платно. И сразу включайте режим Ремикс мод, чтобы потом могли объединять картинки.

Рабочая область Midjorney

Затем наберите /imagine, нажмите Enter, введите любое слово в значении promt и подтвердите отправку. Появится окно с правилами, жмакаем «‎Принять»‎. 

Вы великолепны! Теперь вы готовы приступить к работе. 

Как пользоваться бесплатными нейросетями: Шедеврум, Fusion Brain и другими

Тут все намного проще, но и возможностей меньше. Проходим по ссылке, авторизуемся, если это необходимо, и делаем запрос. 

Например, Fusion Brain генерирует изображения по описанию, дорисовывает изображения, а также с помощью ластика можно менять часть изображений. Есть много интересных стилей, мне понравился стиль «советский мульфильм». Без смс и регистрации.

Редактор Fusion Brain

Как используем в работе веб-студии 

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

А что если ты составляешь запрос исходя из своего видения, а нейросеть тебе выдает варианты? Неплохо, подумали мы 🙂 

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

По понятным причинам сервисы, которые сейчас в разработке, не смогу продемонстрировать, но основной принцип покажу.

1. Формирование блоков по запросу 

Вы отправляете нейросети запрос, а она составляет под этот запрос варианты блоков. Например, попробуйте отправить “promo block for the site of a company selling trout” и пришлите в комментарии, что у вас получилось. 

Пользователь отправил запрос на создание баннера на лендинг адвокатского бюро

Иногда выходит лютая дичь, но в целом показывает неплохие варианты 🙂 

Или вот что вышло на запрос сайта с Египетской тематикой

Лайфхак: добавьте ключевые слова «figma landing page design», и результат будет прикольнее!

Почти макет 🙂

Если вам не зашли предложенные варианты, то вы можете отправить этот же запрос еще раз и получите уже совершенно другие картинки 🙂 

2. Формирование вариантов по примеру 

Иногда запрашиваем варианты по конкретному примеру. То есть отправляем ссылку на изображения исходного варианта, который нам нравится, и пишем нейросети, что нам нужно в этом стиле. Например, вы можете закинуть в чат ссылку на скриншот сайта Apple и запросить сделать в этом стиле сайт для нижегородских валенок 🙂 

Пользователь загрузил первое изображение как пример, задал запрос, получил на свой запрос варианты в этом стиле 

Еще примеры получившихся вариантов у подобных запросов:

3. Формирование альтернативных концептов

Вы создали концепт либо какой-то блок, он вам нравится, но было бы интересно посмотреть на него немного в другом оформлении? Пожалуйста! Загружайте концепт ссылкой, формируйте запрос и вам Midjourney выдаст альтернативные варианты. 

Изначальный вариант 

Альтернатив

Запрос. Добавляешь csv awards и считай награда у тебя в кармане 🙂 

Мне первоначальный вариант больше зашел. Но получить в считанные секунды альтернативные варианты — казалось бы фантастикой несколько лет назад. 

4. Создание изображений для контент-маркетинга 

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

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

Например, в Шедевруме ввели промт: «мультяшный пещерный человек улыбается, во весь рост, с палитрой и кистью в руке, 3д модель, октан, реалистично, 4k, высокое разрешение, высокая детализация, яркое освещение, однородный фон». Получили клевого пещерного человека для нашей статьи про Lottie-анимации, а затем добавили этого неандертальца в карточку для Телеграм-канала. 

Первобытный дизайнер из Шедеврум

А это мы в карточку добавили неандертальца

Итоги 

Если вы еще не поняли, то отвечаю — веб-дизайнеры не вымрут. Даже если нейросеть прокачается до неведомого уровня, то кто будет перекрашивать кнопочки? 🙂 

Как мы видим — нейросеть скорее помощник дизайнеру, чем его замена. Даже простые промосайты получаются с натяжкой. Про сервисы, CRM, ERP и прочее пока речи не идет. Хотя я бы посмотрел, как справляется нейросеть с проектом уровня Tarkett.

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

Вы используете нейросети в процессах? Возможно, где-то уже полноценно внедрили в клиентские проекты? Делитесь в комментариях!

Удачи и спасибо за внимание 🙂

В данной статье будет описано небольшое руководство по тому, как создать сайт на таком фреймворке как Cample.js. На момент написания статьи (версия 3.1.2), фреймворк уже более года находится в разработке. За это время был реализован минимальный функционал для создания современных веб-приложений.

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

Прежде всего, для того, чтобы создать сайт на фреймворке, необходимо будет его установить. Для установки фреймворка будет необходим Node.js. Благодаря нему, в консоли появится возможность использования npm, через который будет скачиваться фреймворк.

Скачивание фреймворка происходит путём ввода команды в консоль в папке с проектом:

npm i cample

После, в папке node_modules появляется сам модуль. Для использования фреймворка необходима среда, которая будет поддерживать import export модель, благодаря которой будет выстроен код. Такую среду, к примеру, можно настроить благодаря webpack и подходящим модулям, для работы с HTML, стилями, изображениями и т.д. Но, в теории, подходит почти любой сборщик модулей.

Далее, необходим HTML файл, который будет основой для сайта. К нему будет подключаться javascript файл, где будут реализованы скрипты фреймворка.

В HTML файле, стартовой точкой сайта пускай будет тег div с id main. В нём будет находится основной контент сайта.

В javascript файле для начала нужно импортировать такую функцию как cample. Данная функция создаёт экземпляр класса, который является начальной точкой в js для сайта.

import { cample } from “cample”;

Данная функция принимает первым параметром selector блока, куда будет рендериться сайт, а вторым, необязательным параметром, функция принимает объект с опциями. Для дальнейшей работы будет использоваться один параметр.

const mainCample = cample(“#main”);

Все функции в фреймворке создают экземпляры классов. В данном случае, в переменную с названием main присваивается экземпляр класса. У данной переменной теперь можно вызвать метод render, в который будут переданы все компоненты, которые созданы, а также основной HTML template, который будет обработан.

mainCample.render(
`

`,
{
content,
tableRows,
}
);

Используя двойные фигурные скобочки скрипт применяет такой приём как “интерполяция строк”, благодаря которому будет создана срока такого типа:

Такая строчка потом заменяется на HTML компонента. Для того, чтобы работать с компонентами, в js файл нужно импортировать соответствующие функции. В примере будут использоваться функции each и component, которые предоставляют необходимый функционал.

import { component, each } from “cample”;

Сам же компонент, к примеру, будет выглядеть вот так:

const content = component(
“content-component”,
`

`,
{
data: () => {
return {
title: “Основная страница”,
data: ,
};
},
export: {
tableData: {
data: {
data: “data”,
},
},
},
exportId: “mainExport”,
style: “.title{font-size:60px}”,
}
);

В данном примере создаётся div с заголовком h1 и таблицей, данные для которой импортируются из компонента. Подробнее про работу с компонентами можно посмотреть в документации тут. Данные для таблицы хранятся в свойстве data, в которой есть один текст: “Тестовая строка”. В зависимости от этого в таблице будет только одна строка.

Для того, чтобы отобразить данные для таблицы, необходим компонент each. Он повторяет HTML код в зависимости от данных.

const tableRows = each(
“rows-component”,
({ importedData }) => importedData.data,
`

`,
{
import: {
value: [],
exportId: “mainExport”,
},
}
);

Главным моментом при создании цикла является указание свойства key для повторяющегося HTML. Более подробно о том, чем отличается keyed реализация от non-keyed можно посмотреть тут. При импортировании, в функции данных можно указать то самое импортированное свойство data, тем самым отобразив данные на сайте. В самом свойстве import для значения value можно указать пустой массив, тем самым импортировав всё то, что экспортируется.

Таким образом, весь код выглядит примерно вот так:

import { cample, component, each } from “cample”;

const content = component(
“content-component”,
`

`,
{
data: () => {
return {
title: “Основная страница”,
data: ,
};
},
export: {
tableData: {
data: {
data: “data”,
},
},
},
exportId: “mainExport”,
style: “.title{font-size:60px}”,
}
);
const tableRows = each(
“rows-component”,
({ importedData }) => importedData.data,
`

`,
{
import: {
value: [],
exportId: “mainExport”,
},
}
);
const mainCample = cample(“#example”);
mainCample.render(
`

`,
{
content,
tableRows,
}
);

Результатом же кода, будет примерно такая страница:

Результат работы скрипта на сайте

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

Всем большое спасибо за прочтение статьи!

1. Введение

2. Начало

3. Пример

4. Заключение

Введение

Доброго времени суток. Сегодня хочу рассказать вам о том как добавить сайт в поисковую систему.

Многие активно развивают бизнес в интернете или же приходят в него, чтобы получить дополнительный поток аудитории. Разработчики стараются в этом помочь, разрабатывая сайты. Часто бывает так, что уже сайт готов, но бизнес не видит сайта в Google, Bing, Yandex и других поисковых системах:

Пример отсутствия сайта в поисковике Bing

Сайт написан, домен куплен, так почему же я до сих пор не вижу его?

Дело в том, что поисковые системы индексируют(сохраняют данные у себя и обрабатывают для быстрой выдачи) сайты ежедневно, чтобы включить их в поиск.

Чтобы добавить сайт существуют вебмастера, которым нужно рассказать, что сайт доступен по адресу домена и уже готов к индексации, отображению и продвижению 🙂

Терминология

• HTML – язык гипертекстовой разметки. Файлы `file.html` содержат код для структурирования и отображения веб-страницы и её контента.

• Метаданные – информация о другой информации, или данные, относящиеся к дополнительной информации о содержимом или объекте.

• Метатеги HTML – структрированные метаданные о веб-странице.

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

• DNS – Domain name system – доменная система имён, используется для получения информации о домене. Подробнее можно о DNS узнать из комикса.

• Вебмастер – сервис для отслеживания индексации вашего сайта, сбора статистики по поиску и т.п.

Начало

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

Robots.txt

Файл robots.txt текстовый файл, но который должен содержать определённую структуру для определения поисковыми роботами.

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

Пример

В данном примере мы запрещаем Яндекс роботу просматривать директорию secret, но остальные поисковые роботы получат к нему доступ:

User-agent: Yandex
Disallow: /secret/

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml

User-agent – наименование поискового робота;

Allow/Disallow – разрешение или запрет на чтение;

Sitemap – указывает на расположение файла sitemap.xml для дальнейшей индексации.

Существуют правила по расположению файла robots.txt для чтения его роботами:

• Файл должен находиться в корне

• Файл должен иметь название robots.txt

• Файл должен быть в единственном экземпляре

• Файл можно размещать на субдомене

• Файл должен быть в кодировке UTF-8

Каждый файл robots.txt, размещённый на разных субдоменах, отвечает за свой субдомен и протокол. То есть http://example.com не равно http://sub.example.com, как и http://example.com не будет равен https://example.com

Подробнее о файле robots.txt тут. А также существует онлайн сервисы, которые помогают в составлении robots.txt. Пример сервиса: https://pr-cy.ru/robots/.

Sitemap.xml

Sitemap – это XML файл с информацией о страницах, которые должны быть проиндексированы поисковой системой.

Часто данный файл содержит информацию об url, его последней модификации и приоритете индексирования страниц. На основе этого поисковая система понимает, которые из url имеют изменения и насколько они важны. Данный файл не гарантирует индексацию поисковыми системами, а служит некоторой подсказкой для них.

Пример файла sitemap.xml


https://pavlusha.me/
2023-08-14T08:00:00+00:00


https://pavlusha.me/src/img/me.jpg


Pavel Zavadski Photo

Для sitemap.xml также существуют сайты с генерацией контента. Пример такого сервиса: https://www.xml-sitemaps.com/.

Метатэги

Метатэги HTML несут с собой информацию, такую как описание сайта, ключевые слова, указание иконки (favicon) и т.д. Они также позволяют указать информацию для создания карточек предпоказа вашего сайта в интернете. Для этого вы можете использовать Open Graph от Facebook и Twitter.

Ниже приведены примеры написания метатэгов для предпоказа вашего сайта.

OpenGraph

Open Graph – это протокол, введенный компанией Facebook в 2010 году для более глубокой интеграции Facebook с любой веб-страницей. Он позволяет любой веб-странице иметь ту же функциональность, что и любой другой объект в Facebook. Вы можете контролировать, как ваш сайт отображается в Facebook. Теперь и другие социальные сети, такие как Twitter, LinkedIn, признают метатеги Open Graph.

OpenGraph метатэги

Twitter

Twitter метатэги

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

Пример добавления сайта в поиск

В примере я буду добавлять сайт npleto.ru в Яндекс при помощи Яндекс Вебмастера

Вебмастер Яндекса. Страница для добавления сайта

Чтобы добавить сайт требуется ввести его адрес (в моём случае https://npleto.ru) и нажать добавить. Далее нужно подтвердить право владения доменом, для этого есть 3 пути:

• HTML файл – потребуется разместить файл на сервере

• Метатэги – добавить метатэг в HTML страницу

• DNS записи – добавить DNS запись

Я буду использовать подтверждение по DNS записи. Для этого потребуется создать TXT запись в панели управления DNS записями. Использую Cloudflare, поэтому пример со скриншота может отличаться. Яндекс Вебмастер потребовал вписал TXT запись со значением yandex-verification: 7d6dxxxc47exxx2b:

Cloudflare добавление DNS записи

После добавления DNS записи возвращаемся в Вебмастер и нажимаем Проверить.

Статус в вебмастере

После успешного прохождения проверки домен отобразиться в панели.

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

Спустя некоторое время сайт появиться в поисковой выдаче. Точное время появление в поиске определяется самой поисковой системой. Но чтобы точно знать что сайт уже появился в поиске рекомендую использовать ключевые слова site: данный запрос в поисковике вернёт вам все проиндексированные страницы домена

Заключение

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

Указание robots.txt, sitemap.xml, метатегов, использование семантической вёрстки и подробное описание сайта – это вершина айсберга к пониманию работы поисковых роботов, но уже может решить много задач, связанных с появлением сайта в поисковой выдаче и его продвижением.

Всем привет! Я – Влад, руководитель группы поисковой оптимизации в Ozon. 

Go повсюду. И, конечно, ни при каких обстоятельствах мы не могли пройти мимо него в самом крупном направлении компании –  разработке маркетплейса.

Направление отвечает за разработку инструментов, которыми активно пользуются наши покупатели и продавцы. Сюда входит абсолютно всё, что нужно для того, чтобы продавец смог предложить товар или услугу, а покупатель — сделать заказ.

И нам есть чем поделиться. Приглашаем на открытый Ozon Tech Community Go Meetup, в Москве, 20 сентября в 19:00. На митапе подробно обсудим Go и технологии, которые мы используем в разработке маркетплейса Ozon. Узнаем, как устроена разработка доставки и пути совершения покупки.

В программе:

Открытие митапа и приветственное слово

«Как заставить вашу базу-данных держать 20K RPS, варианты масштабирования и их минусы»

Доклад о том, как правильно скейлить вашу БД от 1 RPS до 20К RPS, какие подходы к масштабированию существуют и какие неочевидные минусы есть в этих подходах.

«RoaringBitmap: что это такое и как мы это используем»

Поговорим о том, что такое битмапы и как устроены RoaringBitmap, как с ними работать в Go и как мы это используем в Ozon при работе с сегментами.

«Protocol Buffers: про то что все знают или не знают» 

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

Встречаемся в офисе Ozon, «Башня на Набережной», 10, блок С, 30 этаж, Москва-Сити. Начинаем собираться в 18:30. 

Для участия в событии регистрируйтесь по ссылке и ждите подтверждения в письме. К сожалению, места в зале уже закончились, присоединиться можно только онлайн, в день мероприятия вам придёт ссылка на трансляцию. Трансляция будет на нашем YouTube-канале и в сообществе в VK. 

Одной из задач, где мы в Ozon используем Canvas, является обработка видео. Для это у нас реализован минималистичный видеоредактор.

Современные устройства и браузеры развиваются достаточно быстро, но все-равно этого бывает недостаточно для задач со сложными вычислениями. К таким задачам можно отнести обработку видео.

Зачем нам видеоредактор

Есть два сценария, в которых мы можем использовать видеоредактор:

• загрузка видео в карточки товаров;

• внутренние сервисы для обучения сотрудников и продавцов.

Для этих сценариев необходимы следующие функции:

• выбор обложки видео,

• удаление звука,

• редактирование длительности видео,

• удаление сегментов видео.

Зачем нужно было делать свой редактор для веба и почему не использовать готовый? На эти вопросы достаточно просто ответить. Очень часто приложения для редактирования видео сложны в использовании и требуют специальных навыков. Вдобавок к этому это ещё одна точка входа для работы с контентом. Но почему в вебе? Тут тоже всё просто: функциональность для управления контентом доступна только там.

Выбор обложки для видео

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

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

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

Можно, конечно, готовить картинки по требованию, когда пользователь решит воспользоваться этой функцией, но, если видео достаточно длинное, это займёт много времени. 

У этого подхода есть и другая проблема, связанная с количеством передаваемых данных. Если из часового видео нарезать изображений на каждую секунду, представляете, сколько пользователь потратит трафика? Я думаю, он будет этому не очень рад.

О реализации

В своей реализации мы используем три варианта оптимизации:

1. Адаптивная нарезка кадров в зависимости от длительности видео.

2. Формирование полотна из картинок.

3. Canvas для отображения видео в нескольких местах приложения.

Адаптивная нарезка кадров в зависимости от длительности видео

Такая детализация в нашем UI нужна в двух местах: превью активного кадра на прогресс-баре и большое превью в центре экрана. Весь остальной прогресс-бар не требует мелкой детализации. Главное для нас — показать пользователю ключевые моменты ролика с небольшой точностью. В нашем случае эта точность в среднем равна пяти секундам для больших видео и одной секунде — для маленьких.

Формирование полотна из картинок

Чтобы уменьшить количество запрашиваемых пользователем картинок, обычно прибегают к формированию полотен из нескольких изображений. Это позволяет уменьшить объёмы хранимой и передаваемой информации. Это уменьшение происходит потому, что контейнеры JPG, PNG и т. д., помимо самого изображения, хранят ещё и метаинформацию, необходимую для отображения картинки в данном формате. Меньше файлов — меньше метаинформации.

Полотно из картинок выглядит так:

После получения полотна использовать его для корректного отображения нужного кадра достаточно просто: нужно лишь применить CSS-свойство background-position.

Для отображения первого кадра нужно применить код ниже:

width: 58.8px;
height: 104px;
background: url(https://cdn1.ozone.ru/P0.jpg) 0px 0px / 117.6px 208px;

В результате мы отобразим кадр, обведённый красным:

А для четвёртого кадра нужно сделать вот так:

width: 58.8px;
height: 104px;
background: url(https://cdn1.ozone.ru/P0.jpg) -58.8px -104px / 117.6px 208px;

Тут видно, что мы указываем в свойство background смещение по горизонтали 58,8 px, равное ширине кадра, а по вертикали — 104 px, равное высоте кадра.

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

Canvas для отображения видео в нескольких местах приложения

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

Уу нас есть два места, в которых отображается активный кадр: большое превью и миниатюра на прогресс-баре. В этих местах мы отображаем реальное видео, которое перематываем на конкретную секунду в зависимости от действий пользователя. Основная проблема такого подхода в том, что нам нужно воспроизводить видео сразу в двух местах и желательно с одинаковой задержкой. Для этого мы используем Canvas API, который позволяет рестримить видео на холст. Этим мы достигаем одинакового времени воспроизведения и уменьшения количества сетевых запросов. Мы даже в кеш не ходим, а просто рендерим кадр дважды. Если вы думаете, что это сложно, то вы ошибаетесь. Canvas API позволяет это делать буквально в одну строку.

const canvasRef: HTMLCanvasElement = this.$refs.preview;
const videoRef: HTMLVideoElement = this.$refs.video;
const context: CanvasRenderingContext2D = canvasRef.getContext(‘2d’);

context.drawImage(videoRef, 0, 0, canvasRef.width, canvasRef.height);Работа с сегментами видео

Самая сложная функциональность нашего видеоредактора связана с логиком по работе с сегментами (отрезками) видео.

Она состоит из нескольких опций:

1. Изменение длительности видео.

2. Удаление сегментов в любой части ролика.

3. Удаление звука.

Интерфейс выглядит так:

Есть три блока для работы с видео:

1. Список сегментов.

2. Плеер с текущим видео.

3. Таймлайн для взаимодействия с конкретным моментом ролика.

Список сегментов

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

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

Таймлайн для взаимодействия с конкретным моментом ролика

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

С точки зрения реализации самое сложное — это отображение большого количества изображений. Так как видео может быть достаточно большим, их может быть очень много. 

Для уменьшения количества запросов и объёма передаваемых данных мы, так же, как и в компоненте, который рассматривали в предыдущем разделе, используем механизм с полотнами, но применяем ещё одну оптимизацию. Она связана с количеством элементов в DOM-дереве. Поскольку изображений может быть очень много, мы отображаем полученные полотна в одном теге Canvas, располагая их друг за другом по горизонтали. Соответственно, при изменении масштаба таймлайна кнопками скейл в UI мы просто меняем размер изображений, которые рисуем в Сanvas. Благодаря этому за отображение таймлайна у нас всегда отвечает всего один DOM-элемент.

Вывод

Объединяя изображения в одно, мы выигрываем в количестве запросов, объёмах передаваемых ресурсов и пространства для хранения данных. А Canvas помогает нам минимизировать затраты на воспроизведение видео и сводит к минимуму количество DOM-элементов. Таким образом, используя перечисленные приемы, можно достичь хороших показателей производительности.