Uxp developer tools adobe что это
UXP новая универсальная платфрма расширений
Adobe в версии Photoshop 2020 представила новую UXP архитектуру плагинов 3 поколения, так было заявленио на конференции MAX2020
UXP (Unified Extensibility Platform) платформа уже внедряется в течении 2 лет, на этой платформе сделаны многие элементы интерфейса Adobe программ — стартовые страницы, диалог создания нового документа? галерея нейронных фильтров в PS2021 и т.п. Предполагается развитие платформы на базе Adobe XD, как приложения для разработки интерфейсов плагинов, программная часть разрабатывается как и раньше в любых удобных редакторах кода. На момент написания статьи в доступе около 300 плагинов на базе платформы UXP.
В концепции UXP теперь все расширения и панели называются плагинами и ни как по другому.
Схема взаимодействия UXP и Adobe приложений:
На схеме мы видим, UXP представляет собой общий высоко технологический стек, обеспечивающий современную высокоскоростную среду выполнения JavaScript движка, этот стек включает в себя общий набор API для доступа к сети, файловой системе, Dom модели HTML, системе визуализации, модели ML для обработки данных и вывода данных, а также API для доступа к службам Creative Cloud от имени пользователя, таким как библиотеки и облачные документы. Он также включает в себя слой пользовательского интерфейса, напоминающий React Native, для размещения собственных элементов управления совместимые c HTML и CSS. UXP имеет связи с конкретными API хостов, для взаимодействия с приложением и самим документом.
Унифицированная Среда Выполнения JavaScript
При создании панелей с помощью CEP мы не могли напрямую взаимодействовать с Photoshop — вместо этого мы использовали evalScript для передачи управления коду, работающему в среде ExtendScript, которая содержит API для связи с хост-приложением.
Для такого взаимодействия требоваться поддерживать два Java движка и две среды выполнения кода. Передача кода и данных по этому способу происходит медленно и невероятно трудно отлаживается. Единая среда выполнения позволяет UXP UI и бизнес-логике совместно использовать один и тот же высокоскоростной нативный Java движок, а это означает, что больше нет необходимости использовать evalScript!
Современная Среда Выполнения JavaScript
При использовании ExtendScript код выполнялся в среде JavaScript, основанной на стандарте ECMAScript 3 1999 года. Старый стандарт ограничивал возможности ExtendScript. Современные движки JavaScript значительно продвинулись в производительности и экономичном использовании оперативной памяти. UXP платформа, использует качестве виртуальной машины JavaScript версии V8.
Общие API
Cуществует общий набор API, к которым плагинам нужен доступ, независимо от хост-приложения. К ним относятся, файловая система ввода-вывода и сеть. Там, где это возможно, UXP следует существующим стандартам, например, сетевой ввод-вывод осуществляется с помощью API XMLHttpRequest, fetch и websocket.
API Хосты
Каждый хост-продукт имеет свою схему для взаимодействия с приложением и открытым документом, и UXP позволяет хост-продукту предоставлять эти API непосредственно разработчику. То, как выглядят эти хост-API, будет зависеть от конкретного приложения.
Пользовательский интерфейс
UXP использует HTML и CSS в дополнение к собственным виджетам для создания быстрого и адаптивного пользовательского интерфейса, который используется хост-приложением как собственный интерфейс. То есть мы продолжим использовать HTML и CSS для создания интерфейса, а UXP будет транслировать этот интерфейс как родную среду хост-приложения.
Теперь в UXP будут доступны элементы управления интерфейса от Spectrum UI, это позволит пользоваться общими элементами управления, шаблонами дизайна и поддержкой без необходимости тратить часы на воссоздание внешнего вида каждого приложения в пользовательском интерфейсе вашего плагина.
И так из плюсов новой платформы плагины будут работать быстрее, а создавать их будет проще, интерфейсы станут намного интереснее. Однозначно установка плагинов упростилась, после их загрузки они сразу доступны без перезапуска программы.
Теперь о минусах, панели уже вынесены в меню, как устаревшие расширения, не исключено, что на какой-то версии они будут исключены, также как когда то были исключены панели на Flash. Абсолютно изменится структура кода скрипта, все придется переписывать, и это не только вопрос синтаксиса, а в большей степени это изменение DOM модели в среде UXP, а это меняет все, будем надеяться к лучшему.
Создаем первый UXP плагин для Photoshop
Итак платформа UXP в строю, учимся с ней работать.
Платформа еще сырая, некоторые ссылки внутри разделов документации ведут на пустые срамницы, они еще в разработке, но основа уже есть.
Качаем программу для создания и управления плагинами Adobe UXP Developer Tool, устанавливаем и запускаем.
Для работы потребуется Photoshop верией не ниже 22.00.00, запускаем его.
В программе Adobe UXP Developer Tool нажимаем кнопку Create Plugin:
Заполняем поля, для первого примера из шаблонов выбираем ps-starter — простой плагин основанный на JavaScript без дополнительных библиотек.
Далее нажимаем кнопку Select Folder — выбираем папку, где будет располагаться наш плагин.
В программе UXP Developer Tool появится запись об установленном плагине, заходим в меню и выбираем load:
После этого в Photoshop откроется панель тестового плагина:
в этом плагине при нажатии на кнопу на панель выводится список слоев в документе. Можно изучать содержимое папки с плагином:
основные файлы manifest.json — описание плагина, основная информация, размеры панели плагина, аналогично манифесту из CEP, но синтаксис уже другой. Index.html — как обычно это интерфейс плагина на html. Index.js — JavaScript код плагина:
Как можно заметить, что из единого JavaScript плагин может обращаться как к элементам HTML, так, и к API Photoshop и это очень здорово!
Рассмотрим создание плагина с библиотекой React. Создание плагина отличается выбором шаблона — вместо ps-starter выбираем ps-react-starter. При попытке загрузить в программе UXP Developer Tool — получаем ошибку:
Открываем папку созданного проект в VS Code и действуем по инструкции:
Открываем терминал из меню VS Code — Терминал — Создать терминал.
Выполняем команды из инструкции:
результат должен выглядеть примерно так:
если при выполнении команды появится ошибка:
запускаем PowerShell с правами администратора из строки поиска (Win 10):
в PowerShell запускаем команду:
подтверждаем a + Enter:
В терминале VS Code повторяем команду:
Теперь в программе UXP Developer Tool загружаем наш плагин:
В Photoshop откроются 2 панели тестовых плагинов:
Можно изучать структуру файлов и содержимое плагина.