Adobe UXP: Things you need to know! #1 Rundown on the UXP announcement

I am starting a new series on development, called ‚ÄúAdobe UXP: Things you need to know‚ÄĚ (I‚Äôm getting fancy with titles ūüėä) In my intentions it‚Äôll be very much along the lines of the old ‚ÄúHTML Panels Tips‚ÄĚ series but in a different media. This first installment, a quick rundown on the news from the Adobe MAX 2020 announcement, is a 27 minutes video.

Let me know what you think: feedbacks on the series idea, about UXP, life during the pandemic. Speaking of which: if you find this content useful, please consider supporting me ‚Äď 2020 is a hell of a year. I don‚Äôt have a Patreon page, but I‚Äôve got two fairly cheap plugins on the Photoshop Marketplace, ALCE (Advanced Local Contrast Enhancer) and Double USM (on sharpening). If you happen to buy them, please leave a positive rating/review, it would greatly help. Or, you can

If you cannot, or don’t want to, that’s OK anyway.

Stay safe and thanks! ūüôŹūüŹĽ

The whole series so far

Transcription

Since I’ve been asked about it here’s the speech transcription (automatically generated by YouTube and then edited to match the actual audio content). Hope this helps!


Hey this is Davide, and the time has finally¬† come to talk about UXP. So housekeeping first,¬†¬† this is not a new podcast. The world doesn‚Äôt¬† need a new one, but the topic - UXP the Unified¬†¬† Extensibility Platform - is so important that I¬† decided to set aside the dry blog posts that I¬†¬† usually write and try with a medium that allows¬† me a more extended, and probably even more¬†¬† nuanced, kind of conversation. So here I would¬† like to match in UXP terms the HTML Panels¬†¬† Tips series that I had posted on my blog¬† years ago, which was quite helpful I‚Äôm told.¬†¬† So my intention is to cover all the basics about¬† UXP for third-party developers and in this first¬†¬† installment I would just want to introduce you to¬† the big news that Adobe has dropped at MAX 2020,¬†¬† and basically answer the following questions.¬† What the heck is UXP? Should I care? How to¬†¬† prepare? Can you help? Those kind of things. And¬† then in the next videos, which might be videos¬†¬† or written posts I don‚Äôt know yet, just leave me¬† your feedback so that I know what is best for you,¬†¬† I will try to dig deeper on those subjects. But¬† for the time being let‚Äôs just review the big news.¬†¬† It‚Äôs not really that UXP has been announced at¬† MAX because it was already there in Adobe XD.¬†¬† The news is that UXP is available to third-party¬† developers like me, and probably like you,¬†¬† in one of the major Creative Cloud applications:¬† Photoshop 2021. I haven‚Äôt even touched what UXP¬†¬† is, but you have to know that this is¬† the future of extensibility for all the¬†¬† major Creative Cloud apps so after effects¬† indesign illustrator and so on and so forth¬†¬† actually it is already there and this¬† is being revealed by Adobe themselves¬†¬† so UXP powers internal feature development¬† in addition to third-party extensibility.¬†¬† I.e Adobe is using UXP now as they were using¬† CEP, the Common Extensibility Platform in the past¬†¬† to implement first-party features: for instance¬† in Photoshop there‚Äôs the I think it‚Äôs called¬†¬† the New File dialog that was a CEP dialog and¬† it has been converted now to a UXP dialog, so¬†¬† those kind of features are right now implemented¬† in Photoshop, Illustrator, InDesign, Premiere Pro¬†¬† and so on and so forth. But they are not available¬† to third-party developers except for Photoshop and¬†¬† of course XD. So UXP API in Photoshop 2021, and¬† in the end this is going to get almost everywhere.¬†¬† And the really important bit: UXP, the Unified¬† Extensibility Platform, is going to replace CEP,¬†¬† the Common Extensibility Platform in the long run.¬† So the Unified will beat the Common. But relax,¬†¬† this is not going to happen overnight. We will¬† have plenty of time to learn the new thing and¬†¬† port legacy code to UXP. This is what we have¬† been told over and over again. quote & quote:¬†¬† plenty of time. But we haven‚Äôt been given¬† any actual expiration date so right now CEP¬†¬† and UXP are co-existing in the same Photoshop.¬† If you ask me what this ‚Äúplenty of time‚ÄĚ means¬†¬† well when you have plenty of something you have¬† more than one unit of that something. And speaking¬†¬† of time the unit here is likely one cycle i.e one¬† major version. So I would say that it is fair to¬†¬† expect that we‚Äôll have at the very least a couple¬† of cycles, two years of CEP and UXP overlap. Maybe¬†¬† more. In my optimistic days I would say at least¬† twice that, so four years. But let‚Äôs just say¬†¬† at the very least two. And actually nobody¬† really knows, this is my best guesstimate.¬†¬† So in my opinion there is no need for¬† you to quit everything in your CEP¬†¬† or ExtendScript development tomorrow to start¬† trying to port your production code in UXP.¬†¬† That would be in my opinion a very bad idea;¬† just get your feet wet with this technology¬†¬† and keep maintaining your old code bases.¬† But UXP is definitely going to be the future¬†¬† of the entire Creative Cloud extensibility. That¬† said the first question that is fair to ask is:¬†¬† why, why the need of UXP? And this is a question¬† that I also had. CEP was kind of stagnating in¬†¬† the last couple of years, and that was good!¬† Because nothing was changing, you could just¬†¬† go on with your business, write code sell stuff.¬† But it turns out that Adobe was experiencing and¬†¬† trying to react to some of the drawbacks of¬† CEP, so let me try to describe them to you.¬†¬† First one is likely very well known to every¬† developer: CEP is running on one engine,¬†¬† which is the JavaScript V8 engine that engine¬† dialogues with the host application engine,¬†¬† which is an old and grumpy ExtendScript engine.¬† So just for us to be on the same page: CEP, the¬†¬† old technology, is just an NW.js instance running¬† in the host application. And NW.js is a way to¬†¬† combine the Chromium Embedded Framework or CEF¬† with Node.js so basically you have a browser and¬†¬† Node.js combined. And then you write some sort of¬† supercharged web application that runs within that¬†¬† context and those two. Chromium and Node are¬† embedded in the host application, in my case¬†¬† Photoshop. And by the way I have a course on NW.js¬† which is called JavaScript Native Applications for¬†¬† Photoshop, which is basically a way to transplant¬† CEP panels outside of Photoshop as independent¬†¬† application. This is just a shameless plug,¬† because it‚Äôs 2020 for everybody guys‚Ķ Where¬†¬† was I? With CEP you have this two different heads¬† communicating and sending messages back and forth;¬†¬† so the JavaScript V8 engine of the panel sends¬† scripting messages as Strings to the Photoshop¬†¬† / host application engine which is ExtendScript¬† based, then collects the return value. All this¬†¬† back and forth is not really ideal. We would like¬† to have just one engine to rule them all. Second,¬†¬† every time that Chrome or Chromium or something¬† like that is involved you might have experience of¬†¬† the fact that Chrome is quite resource intensive,¬† it‚Äôs heavy, it consumes RAM and CPU cycles.¬†¬† So you start having more than one panel open¬† and running that might have a substantial¬†¬† impact on your machine and performances. And¬† by the way it‚Äôs not only third-party panels:¬†¬† as I said host applications are using the same¬† technology to support their own native features,¬†¬† so you might have a very large number of panels¬† loaded in your system and this might degrade the¬†¬† performances quite substantially. And these are¬† the two main drawbacks that UXP tries to solve.¬†¬† Let me bring up this diagram here, which is quite¬† scary at first, but I will try just to sum up the¬†¬† most salient parts. We have a couple of problems¬† first problem the two engines and this is solved¬†¬† brilliantly killing one engine. So in UXP we¬† have just one engine that deals with the UI,¬†¬† so with the panel. By the way we‚Äôre not talking¬† about panels anymore, this is against the¬†¬† Adobe guidelines and they are patrolling that¬† quite strictly. We are talking about plugins,¬†¬† so you will be writing and developing¬† UXP plugins, and a plugin can contain:¬†¬† zero or more panels; zero or more dialogues,¬† which are just modal windows, modal dialogues;¬†¬† and zero or more commands, which are headless¬† scripts. So if your thing doesn‚Äôt really need¬†¬† a UI you‚Äôre going to call that a Command now.¬† So a plugin is a container of all those things¬†¬† together or just one of them. UXP plugins have¬† one JavaScript V8 engine alone, and that deals¬†¬† with the scripting side as well now, so we finally¬† got rid of the ExtendScript language. This is a¬†¬† huge change that has some you know pretty wild¬† consequences that we will get to in a moment.¬†¬† Second problem, performances; in both CEP and¬† UXP the UI that you design is built using HTML,¬†¬† CSS and JavaScript. Actually UXP allows a¬† subset of HTML, CSS and JavaScript, but more¬†¬† on that in a minute. This UI is not just shown¬† as rendered HTML elements in the user interface,¬†¬† instead it is parsed and then converted¬† into native controls. So your, say,¬†¬† HTML button is not just displayed as CEP¬† would do, but it is converted into a native¬†¬† bit of Photoshop UI, made of the same matter¬† of all the rest of the native Photoshop UI.¬†¬† And this speeds up the whole interface quite a¬† bit, so you are solving both CEP‚Äôs main problems¬†¬† at once: the two engines and the reactivity of the¬† interface / the footprint it has in your system.¬†¬† Actually there is more in this UXP umbrella¬† term: besides the scripting engine with all¬†¬† the bells and whistles of modern JavaScript, the¬† fat arrow syntax, object destructuring, and so on¬†¬† and so forth, we get also a common set of APIs for¬† Networking, FileIO, and in the future, these are¬†¬† not yet available, Imaging and Machine Learning as¬† well. Let me talk about the DOM, so the scripting¬†¬† layer. There is this massive switch to a new¬† JavaScript engine and this is not a bloodless¬†¬† transition. For instance all the elements that¬† were peculiar to the ExtendScript language¬†¬† are gone, like gone forever. XML literal support,¬† or the ScriptUI library ‚Äď those beloved ScriptUI¬†¬† windows, they cannot exist anymore. The Adobe¬† team has been up to this huge task of rewiring¬†¬† all the DOM and the system is new, so let me try¬† to find the right bits, you see that you require¬†¬† ‚Äėphotoshop‚Äô, this new object is made available¬† by UXP and then you go on with the dot notation,¬†¬† the app, properties and methods. But we are far¬† from having a complete DOM: this is the target¬†¬† of the Photoshop team, this is what we have been¬† told, but we are not there yet. Lots of things are¬†¬† missing. Fortunately Photoshop has this peculiar¬† thing called ActionManager, and ActionManager lets¬†¬† you get where the DOM can‚Äôt go. So you can get¬† and set properties and you can perform actions.¬†¬† ActionManager is still there in UXP, it‚Äôs even¬† more powerful, but now it is called BatchPlay,¬†¬† and it has a new syntax which is kind of simpler,¬† JSON based. You can group different actions¬†¬† in an array and run them at once, it‚Äôs quite fast.¬† But the underlying structure of the actual events¬†¬† and descriptors is the same. One question that¬† I‚Äôve been asked quite a lot is the following:¬†¬† is there a ScriptingListener plugin for¬† UXP? In ActionManager that was crucial,¬†¬† so is there a BatchPlay equivalent? The good¬† news is that there is, actually it‚Äôs much¬†¬† better, and that‚Äôs made by my friend the¬† incredibly talented developer Jaroslav Bereza.¬†¬† Sounds Spanish but he‚Äôs from the Czech Republic.¬† The thing is called Alchemist for Photoshop¬†¬† and it‚Äôs kind of an inspector and a listener¬† combined, so it‚Äôs much much more powerful.¬†¬† It can be found at this GitHub repo and¬† recently in the UXP Marketplace as well.¬†¬† Let me rewind a bit, when I told you that you have¬† just a subset of HTML, CSS and the JavaScript to¬†¬† work with: this is very very important, the most¬† important takeaway here is that, I know it sounds¬†¬† silly but‚Ķ UXP is not CEP. So with CEP you¬† were used to this idea that you were targeting¬†¬† something like a browser, so you could access all¬† the standards in the world, plus you had Node.js.¬†¬† Not the case here. And I‚Äôm not saying this to¬† scare you, but just bring you to realize that UXP¬†¬† is very different. Speaking of missing elements,¬† in the HTML for instance, to date, so far, there¬†¬† is no canvas element. So if you need the canvas¬† to draw your fancy interfaces in the 2d context¬†¬† ah you‚Äôre out of luck. Might be that the canvas¬† will be introduced because of missing elements and¬†¬† API are still added so probably in a month, four¬† months from now, it will be available. I cannot¬†¬† say. But to date the canvas is not yet there. And¬† just to name another one, in CSS we don‚Äôt have the¬†¬† float, which would sound quite you know, standard,¬† but we don‚Äôt have it. We have the FlexBox instead¬†¬† so we use FlexBox to architect the UI, and¬† we will have the CSS Grid, we‚Äôve been told,¬†¬† in the future probably somewhere in 2021. So you¬† see that there are missing parts and some of them¬†¬† probably are going to be added in the future,¬† some others won‚Äôt, and only time will tell.¬†¬† Speaking of JavaScript and API there is no, or¬† at least the last time that I‚Äôve checked there¬†¬† was no, document.createevent(). And you might¬† say: well, who cares, I mean that‚Äôs the first¬†¬† time that I‚Äôve heard about it. Turns out that¬† document.createevent() is something that Vue.js,¬†¬† the latest version of Vue.js heavily relies¬† upon, and if you don‚Äôt have a createevent Vue.js¬†¬† will not work, I have been told that createevent¬† might be shimmed, I‚Äôve not been able to do that,¬†¬† but I‚Äôm told that it can be done, so probably¬† Vue.js, if properly massaged, will work¬†¬† but these are the kind of things that you have to¬† deal with. So forget about CEP as this beautiful¬†¬† large body of standards, we are dealing with¬† a much smaller playground here. And this is¬†¬† also the reason why if you‚Äôre serious about¬† UXP plugin creation you should learn React,¬†¬† because React.js is the JavaScript framework that¬† Adobe itself uses to build their own plugins, and¬†¬† it works because somehow UXP is shaped to¬† make it work. So if there‚Äôs something in UXP¬†¬† that is missing to make React work properly,¬† engineers will implement it so you can be¬†¬† sure that React is going to work. If you want to¬† plug in something else you might be lucky, you¬†¬† might not. What else comes from MAX 2020, there¬† is this new way to deploy and look for plugins,¬†¬† let me talk about the deployment first. We are¬† happily abandoning the ZXP format hallelujah¬†¬† and we are embracing something called CCX. And¬† this is very simple, it‚Äôs just a matter of zipping¬†¬† the plugin folder, no signature, no timestamp, and¬† then you rename the ZIP to CCX, upload it to the¬†¬† developer console and submit it to the Marketplace¬† or distribute it to your channels. The CCX¬†¬† when the user double clicks it is going to be¬† opened by the Creative Cloud desktop application¬†¬† that performs the installation. In the Creative¬† Cloud desktop app there‚Äôs this Marketplace tab,¬†¬† here I‚Äôve selected all plugins and filtered¬† for Photoshop plugins. All these entries are¬†¬† new UXP plugins these have been made in the¬† last months this is mine this is mine too¬†¬† all the rest below this available from Adobe¬† exchange is basically the old CEP Marketplace.¬†¬† Now let me get to Photoshop where there‚Äôs this¬† new Plugins menu item, and you have a few things¬†¬† in here: first you can browse for plugins, and¬† this brings up the Creative Cloud application,¬†¬† or you can launch your plugins panels. This is¬† where your licensed plugins belong. These are my¬†¬† four ones and this is just a development thing.¬† Then you click herem and then you have all those¬†¬† commands that are the same that belong to this¬† menu here, so this is the panel, and then you¬†¬† see you have other entries like About, and About¬† is a modal dialog, right, and you have the panel,¬†¬† the modal dialog, and as I said there are other¬† things that could be there for instance Commands:¬†¬† scripts that you can run. Also please know that¬† CEP panels now are in this Extensions Legacy,¬†¬† a name that some developers haven‚Äôt liked too¬† much. But anyways‚Ķ Plugins are the new UXP thing¬†¬† and then Extension Legacy is the place where all¬† CEP panels belong. So what else, okay, tooling oh¬†¬† well this is good, this is cool! We now have this¬† thing called the Adobe UXP Developer Tool which is¬†¬† really helpful. You can add existing plugins,¬† for instance like this one, you just load the¬†¬† manifest.json and well the plugin already exists¬† so we can dismiss this. And you can load, reload,¬†¬† watch the folder, so that the UXP Developers Tool¬† reloads each time that you change the source code¬†¬† and also debug. And this opens this kind of Chrome¬† Developers Tool window which is not really a match¬†¬† features-wise with the real Chrome Developers Tool¬† but you know it‚Äôs useful. You have the console,¬†¬† you can look for elements and so on and so forth.¬† And you can look at the logs and you can also¬†¬† package directly from the UXP Developers Tool, so¬† create the CCX file here, and then you have other¬†¬† things. So this is really handy and completely¬† new and it helps a lot in creating UXP plugins.¬†¬† And you can also create a new plugin from the UXP¬† Developers Tool, so this pops up a dialogue where¬†¬† you can enter the name, the id, version, so on¬† so forth and also select template. And you have¬†¬† a couple of them, one is called ps-starter,¬† and then we have this ps-react-starter¬†¬† so you can think about those UXP plugin as¬† you know a simple one and the complex one.¬†¬† I have them both so let me close this and get¬† back to that. There‚Äôs this one called Theme¬†¬† Switcher which is, let me show that to you because¬† it‚Äôs fun, the simplest thing ever. It‚Äôs just four¬†¬† buttons and an icon and then you can change¬† the UI brightness of the Photoshop interface.¬†¬† And by the way you see that you you have this¬† possibility to keep the panel appearance in sync,¬†¬† and this is done not via JavaScript as in CE√© but¬† with Media Queries. This is quite simple you see¬†¬† there is an index.html, css and JavaScript and the¬† manifest. Manifest is really important, this is¬†¬† where all the properties of the products are set¬† so the id, the name, the width, height, preferred¬†¬† width and height, max width and height, icons¬† and stuff. And then you have the plugins that use¬†¬† Eeact such as ALCE, which is here let me show that¬† to you as well. This one is quite more complex you¬†¬† see you have tooltips, sliders, buttons, and¬† whatnot. And in case of a more complex UI,¬†¬† and this is not complex at all in absolute terms¬† but it‚Äôs more complex that this four button guy¬†¬† here, you should really use React and in fact¬† you see all the usual React Garbage and in fact¬†¬† you see all the usual React stuff. I have a bunch¬† of components, css, controller, JavaScript files,¬†¬† and the ubiquitous manifest.json which is¬† here. As a code editor you can use whatever¬†¬† editor you want, I use Visual Studio Code, it‚Äôs¬† just handier for me because I also need it for¬†¬† ExtendScript code, because remember you can still¬† use ExtendScript: those things are coexisting.¬†¬† Now, in my case I‚Äôm running macOS Catalina so¬† I don‚Äôt have access to the ExtendScript ToolKit¬†¬† anymore, and I have to use the plugin for Visual¬† Studio Code. One last thing that I want to mention¬†¬† in this introduction is, let me bring back Chrome,¬† here is the Spectrum Web Components. So when you¬†¬† build a UI for Photoshop UXP panels or dialogues¬† you have access to Spectrum Web Components, those¬†¬† sp- things you have sp-button, sp-dropdown and¬† so on so forth, and in this website you have a¬†¬† bunch of them. Mind you, not all of them have been¬† implemented in UXP, we have just a limited set by¬†¬† now, but the support is growing with time. So for¬† instance we don‚Äôt still have the Switch I think,¬†¬† which is here, I would have needed that but¬† I‚Äôm told that this is going to be available¬†¬† in the future. So you can use this website as a¬† reference. Please note that if you Google Adobe¬†¬† Spectrum, Spectrum is a design system that Adobe¬† has been working on for quite some time, you can¬†¬† find several different things. On the one side¬† you find the Spectrum specs, so this is just you¬†¬† know the theoretical design system, and then you¬† have the Spectrum CSS which is of course the CSS¬†¬† implementation of that design system, but I don‚Äôt¬† think they are really functional so for instance¬†¬† in the Spectrum CSS I don‚Äôt think, I might be¬† wrong but I don‚Äôt think you can open a drop down¬†¬† menu you just have the design of that element.¬† And then you have the Spectrum Web Components that¬†¬† we have seen in UXP but you also have something¬† called Coral Spectrum which is by Adobe as well¬†¬† and these two are a web components implementation¬† of the Spectrum design system but it‚Äôs a different¬†¬† implementation of the first Spectrum¬† Web Components, that‚Äôs kind of strange.¬†¬† And then eventually you have React Spectrum¬† which is the React components implementation¬†¬† of that so, be aware that in the context of UXP¬† plugins Spectrum Web Components are the ones made¬†¬† available by default by UXP, so you can add for¬† instance an sp-button. Let me show that to you¬†¬† where‚Äôs the button here you can add an sp-button¬† and that is going to appear in your UXP plugin no¬†¬† need to import anything. You could also use native¬† components, let me bring up this plugin here¬†¬† you can use native elements they‚Äôre not very fancy¬† looking, so for instance this is the range, the¬†¬† slider, native range, whereas we have the Spectrum¬† slider here which is kind of nicer. So you should¬†¬† use Spectrum components where possible because¬† this will keep the look consistent and they are¬†¬† keeping refining those components over and over¬† as opposed to these dull native elements you know.¬†¬† I think that‚Äôs it for this not so brief overview¬† of the main highlights of the UXP announcement¬†¬† so let me try to sum up what I‚Äôve covered here.¬† So UXP is going to be the future of all Adobe¬†¬† Creative Cloud extensibility. CEP is going¬† to be faded out, it will take a lot of time,¬†¬† nobody knows how long. UXP has one engine compared¬† to the two engines of the CEP system, the one¬†¬† engine deals with both the UI and the scripting¬† side so we have an entirely new scripting engine¬†¬† that has a new DOM. You can use subset HTML,¬† CSS and JavaScript and the result of what you¬†¬† write is then converted into native controls¬† which are faster and have a lighter footprint.¬†¬† We have common APIs for Networking, FileIO and¬† in the future Imaging and Machine Learning,¬†¬† so this is really exciting. We also have a¬† new set of tools, UXP Developer Tool and the¬†¬† possibility to create either simple vanilla¬† plugins or more complex ones based on React.¬†¬† we‚Äôve got a new Marketplace and a simpler¬† installation via CCS that is more reliable¬†¬† than ZXP, if it was less reliable that would have¬† come really as a surprise, and the entire UXP¬†¬† experience is driven by the Creative Cloud¬† desktop app. In the end, if you ask me, I am¬†¬† quite pleased by the change. I had my problems¬† with it because I i hate change in general¬†¬† but in the end I think that this is going to¬† bring more positive sides than negative. It is,¬†¬† compared to CEP but I don‚Äôt want to sound rude in¬† that, but UXP sounds more like a super-polished¬†¬† modern version of ScriptUI rather than a big¬† step into the standards direction, and this¬†¬† is more of a closed system but we have to play¬† into this smaller frame that Adobe is drawing.¬†¬† That said you can find in this blog post of mine¬† all the links to the available documentation that¬†¬† Adobe is currently working on, and they‚Äôre¬† doing a pretty good job, and by the way let¬†¬† me thank all the people in the Adobe teams that¬† have been supporting us third-party developers¬†¬† for the MAX 2020 launch. I do plan to cover all¬† the topics that I‚Äôve just briefly touched here¬†¬† in future videos, blog posts, audio I don‚Äôt know¬† just let me know what you think and what would be¬†¬† best for you, and feel free to ask questions and¬† suggest topics: I‚Äôll be happy to give you answers,¬†¬† if I have them. If you have enjoyed this please¬† consider supporting me: 2020 is a hell of a year,¬†¬† I don‚Äôt have any Patreon page but¬† besides my Adobe development content,¬†¬† you can find in the UXP Marketplace there are¬† two plugins of mine: ALCE, the advanced local¬†¬† contrast enhancer or DoubleUSM about sharpening.¬† They‚Äôre for sale half of the regular price,¬†¬† they‚Äôre 16 bucks now and if you happen to buy¬† them please leave a positive rating or review,¬†¬† that would greatly help. If you cannot¬† or don‚Äôt want to, that‚Äôs okay anyway.¬†¬† All right thank you for watching and¬† see you in the next one. Stay safe! Bye.