Running Angular Apps in Adobe UXP Plugins

One of the most beautiful aspects of the modern web is the diversity of thought and unity under web standards. As a web developer it might be frustrating to have to learn another framework, but the ability to choose between a vast array of options is a blessing most take for granted. This demo is not necessarily meant to convince you to write an Angular UXP application, but rather to open a new door for developers to make informed decisions about the projects they pour so much time and energy into.

Why Angular?

Angular is one of the most used web frameworks, and we see no reason it shouldn’t have some support in the UXP world. For those who haven’t used Angular, here are some reasons you or your team might want to consider using it:

1. Component-Based Architecture: Promotes reusability, decoupling, and easier parallel development.
2. Strong separation of HTML, SCSS, and TS files: Allows for easier parallel development across large teams (specifically those with separate UI/UX teams).
3. Style View Encapsulation: by default, styles are scoped to their component, meaning no global conflicts or accidental restyling.
4. Fast Builds: thanks to the Angular compiler, build times are fast even for complex apps.
5. Easy to Build Libraries: As discussed later, it is easy to build and maintain a separate component library. I have found Angular to be my preferred platform for sharing code.

I would recommend considering Angular anytime you have more than 2 or 3 people working on a complex application or if you want to share components across multiple applications.

Adobe does not provide any official support for Angular in Adobe UXP. We hope to give enough of an example to inspire further community engagement!

UXP Related Challenges

If you came from the CEP days, you’ll probably share some of my initial frustrations with UXP. Primarily, UXP is not a browser, but it’s close. It follows some web standards, but not all of them. In the CEP days, every extension was its own chromium browser (and could also run its own node instance), meaning all web standards up to whatever Chromium version was running were satisfied.

Since UXP is not a browser, you will occasionally come across missing APIs. Often, these can be remedied by a polyfill or shim. However, in some cases (like the Angular Router), there is no meaningful way to do this.

Nevertheless, CEP’s days are limited, and UXP is the platform currently being updated.  We have not found any limitation for Angular that wouldn’t also apply to every other library and framework.

Running the Demo

The demo contains multiple branches, each showing off specific features of Angular working inside UXP. All information to run the demo can be found in the “README.md” of each branch. See here to find the recommended order for the demo.

Feedback Welcome

The technical details are all in the github repo. We would appreciate any feedback that you have as you try this. You can send this to support@siliconpublishing.com.