Demo Plugins (React & Vanilla JS)

For yesterday’s workshop I had created two demonstration projects, one in vanilla JS (with two additional versions with more functionality) and one in React.
I just realized I didn’t have the React plugin in a repo yet, so I’ve added one for that, too.

Maybe the plugins can help some people that are new to UXP (or React), so I wanted to share them here, too. Sometimes I think it’s refreshing to look at some real code instead of just documentation :blush: Please keep in mind that these aren’t finished plugins, just demos to explain some of the concepts.

1) Scale Multiple Layers

workshop

1.1) Scale Multiple Layers (Width / Height & Lock Ration)

workshop task 1

1.2) Scale Multiple Layers (Event Listening + Synchronize Layers)

workshop task 2

2) Layer Specific Notes (React)

react-demo


Thanks again for everyone who joined us yesterday, it was a great event!

8 Likes

Looks awesome! I’m sure people will definitely find this useful. There’s actually a whole repository for UXP plugin samples for Photoshop if you’re interested in added them there.

It can be found here

2 Likes

@simonhenke that’s great, thank you! Is there somewhere we can view recordings of any of the content or workshops?

1 Like

@andrew158 The workshop wasn’t recorded, sorry!

1 Like

It was a superb event, and a superb presentation Simon, thank you.
Thank you for these too - as you say, always good to have real-world reference material when learning (as I am with React sonce your session :wink: )

1 Like

Thanks Rico! :blush:
I’m sure you’ll be a React fan pretty soon, then :wink: (if you aren’t already)

1 Like

Hi Simon! Thank you ever so much for the quality of the workshop. It has been much help especially regarding React. That’s my next step. What would you say again that React has and Vanilla hasn’t?
Cheers :slight_smile:

1 Like

Hey Pierre! For me, the biggest advantage is the way the view always reflects your app state as well as the whole component architecture. I think both of these points make building a UI (especially an interactive one) way easier and more manageable in the long run.

So instead of messing with the HTML DOM (document.getElementByID, document.createElement, …) all the time, you’re writing clean and encapsulated components and build the view based on the state (simply JS objects). If the state changes, the component gets re-rendered and everything is up-to-date. Also, reusing generic components across different plugins saves me a lot of time.

There are also some other technical aspects such as better performance (due to the virtual dom) and so on.

1 Like

Hey, thanks for that. I will look into React for sure :slight_smile:

2 Likes

Well, I have to confess React turned out to be an explosion of rabbitholes for me, so a tad overwhelming while already trying to re-learn other things. I think baby-steps for me while I get fully on top of vanilla first.

1 Like