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.