Tech Stack Foundations
Learn about the essential technologies you need to be familiar with to develop UXP plugins
Programming Languages
To begin, a basic understanding of web technologies like JavaScript, HTML, and CSS is essential. There are excellent resources available online that can teach you the fundamentals. Here are some of our recommendations, but feel free to explore other sources as well.
Most tutorials assume that you are using Web technologies in a browser or a server-side JS engine like Node.js. While it supports modern JavaScript syntax, UXP is not a standard browser environment; not all the HTML Elements, CSS classes, or JavaScript APIs will be available in the UXP world.
Reading Materials
Start by getting acquainted with the basics of JS, HTML, and CSS.
- Introduction to JavaScript and its basics
- JavaScript versions and ECMAScript 2015 (ES6)
- HTML Basics
- CSS Basics, syntax, and selectors
Apart from the basics, the following additional topics will also come in handy. You need not go through each of them right away, but do bookmark them for later as it will help you understand the code snippets much more easily.
- Document Object Model or HTML DOM and the global window and document object
- DOM Events
- Adding CSS
- CSS layout using Flexbox
- Promises
- Async/await
- Different ways of declaring JavaScript functions: traditional style vs. fat arrow
Debugging
One of the easiest ways to identify issues with these technologies is by using the Chrome browser's Debug Tool (CDT). The UXP Developer Tool (UDT) implements the same engine for debugging; a high-level understanding of CDT will be very useful skill to possess.
Familiarize yourself with the Chrome Debug tool, especially the ways to access DOM, modify CSS and debug JavaScript by adding breakpoints.
Frameworks
Besides JavaScript, HTML, and CSS, the industry offers various frameworks that act as an abstract layer on top of Web technologies, aiming to provide you with a quicker, and more efficient way of writing reusable code.
React, Vue, Angular, and Svelte are among the most popular options. Using these frameworks is optional and is your personal choice.
Any additional tool that expands the capabilities of Vanilla (i.e., plain) JavaScript will require additional tools to run:
Node.js: a JavaScript runtime environment, also used as a backend server in Web environments. Go to the Node.js download page, download the installer for your platform, and run it. This will also install
npm.npm: a Package Manager bundled with Node which helps manage your project's dependencies—i.e., other code and files that are needed to make your plugin work.yarn: an alternative Package Manager for Node. To installyarnyou'll need to havenpminstalled first—see above. Then, use this command:Copied to your clipboardnpm install yarn --global
System Requirements
Finally, make sure your system meets the minimum requirements to run the Premiere application.
