← Work

Потребительский продукт · Веб-редактор

PicsArt

Поверхность редактирования, которой реально пользуются миллионы, и пайплайн ассетов, который держит её консистентной.

Role
JavaScript-разработчик
Years
2020

Контекст

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

Задача

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

Архитектура

  • React и TypeScript по всей поверхности основного веб-редактора.
  • Adobe-скриптинг для интеграции SVG, чтобы варианты ассетов генерировались, а не поддерживались вручную.
  • Юнит- и интеграционные тесты как страховка поведения редактора, где регрессия сразу видна пользователю.

Что я построил

  • Функциональные, производительные и масштабируемые фичи основного веб-редактора с фокусом на плавности редактирования.
  • Расширяемые переиспользуемые компоненты, написанные с расчётом на быстро меняющийся потребительский продукт.
  • Работа с Adobe-скриптами для интеграции SVG — варианты ассетов и шрифтовые кастомизации по всей библиотеке редактора.
  • Покрытие юнит- и интеграционными тестами, защищающее целостность и производительность приложения.

Технологии

ReactTypeScriptSVGAdobe ScriptsJest

Сложные места

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

Результат

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

Next case study

Coverant →

Контакты

Расскажите, что вы создаёте — и что мешает двигаться дальше.

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

Открыт для

  • Архитектурный спринт
  • Спринт запуска
  • Fractional Fintech Lead
  • Выступления & Подкаст

Другие площадки

Локация

Ереван, Армения

Записаться на созвон

30 мин · видео

Предпочитаете сначала написать? armmamyan@gmail.com