paint-brush
Getting Started With Software Development for Adobe Illustratorby@timeo
155 reads

Getting Started With Software Development for Adobe Illustrator

by Timeo WilliamsFebruary 2nd, 2024
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

1. Discuss current pain points in developing software for Adobe Illustrator 2. Share 3 good resources to get started. 3. Let audience know of upcoming resources to be shared in upcoming articles.
featured image - Getting Started With Software Development for Adobe Illustrator
Timeo Williams HackerNoon profile picture

For the creatives in the world interested in creating your tool to help manage your workflows on the Adobe Creative Cloud ecosystem, I understand your pain.


Some of the common pain points:

  1. Outdated JavaScript Version: ExtendScript is based on an older version of JavaScript (ECMAScript 3), which lacks many modern features and conveniences found in the latest ECMAScript versions. This can make the development process feel outdated and less efficient.
  2. Lack of Modern Development Tools: Common development tools like package managers (npm, yarn), bundlers (webpack, rollup), or modern frameworks (React, Vue) are not directly compatible with the ExtendScript environment, which can limit development practices.
  3. No Direct DOM Manipulation: Unlike web development, where developers manipulate the Document Object Model (DOM) for dynamic changes, ExtendScript for Illustrator does not allow for direct DOM manipulation, leading to different approaches for UI development.
  4. Limited Debugging Tools: ExtendScript tools for debugging are not as advanced as those available for modern JavaScript development. There is no built-in console for logging, and the ExtendScript Toolkit debugger can be less intuitive to use compared to browsers' developer tools or integrated development environment (IDE) debuggers.
  5. Asynchronous Code Handling: The older version of JavaScript used in Illustrator's scripting environment does not support promises or async/await, which are now common patterns for handling asynchronous operations in modern JavaScript.
  6. ScriptUI Framework: For creating user interfaces, developers must use Adobe's ScriptUI, which has a different paradigm from HTML/CSS and lacks the styling flexibility and dynamic capabilities developers are accustomed to on the web.
  7. File System Access: Scripts running in Illustrator have access to the file system, which is different from the sandboxed environment of a web browser. This requires a different approach to file handling and can pose additional security considerations.


Whereas it can take only a few minutes to get a React app up and running, creating even a basic extension within Adobe is filled with issues.


Large # of issues unresolved, low commit frequency, ext. for getting started.


So let’s get started.


To start, here are 3 resources to refer to for those who have a preference for different tech stacks:

Article Name

Link

Tech stack

CEP-React-Webpack

https://reactjsexample.com/an-awesome-cep-extension-boilerplate-with-excellent-development-experience/

React, Webpack, TypeScript

Vue CEP Sample Extension

https://github.com/Inventsable/Simple-resolution-panel

Vue, Extension Manifest v 9.0

Adobe Extension Testing

https://github.com/NTProductions/adobe-extension-testing/tree/master

JS, Adobe After Effects


You can stop reading > and take a stab at these if you’d like. If you want a more theoretical path, look forward to the next part of this series.


Adobe Illustrator® is a registered trademark of Adobe Inc., used here for illustrative purposes only.