Hello, Envato!
Haven’t been here in a few years as I was exploring other industries, but in the end of the day I realized that my heart is still in motion design 
Now that I’m back to this great platform and community, let me share something with you. So, recently I had a need to write a simple script for After Effects to go together with the project I’m working on.
And if you have ever written an AE script before, you know how painful it can be.
Adobe’s JavaScript engine is stuck in the 90s with ES3, the UI implementation requires you to either manage 10,000 variables or an awfully long resource string and all that good stuff.
So I sat down and thought, what if there was a better way? As such, AfterScript was born.
What is AfterScript?
AfterScript is a UI framework for ExtendScript that brings modern JS syntax and declarative component-based UI to After Effects scripting.
Here’s the full list of what it gives you:
- Modern JavaScript syntax
- Declarative component-based UI
- Build tool
- Tree-shaking
- Automatic minification
And now you’re probably thinking:
Wait, wait, what the hell is a “declarative component-based UI”? And all the other stuff while we’re at it?
Components and syntax
If you’re familiar with current Web technologies, you probably heard of React and it’s syntax - JSX (not to be confused with Adobe’s JSX). React is what hugely inspired this framework.
Let me demonstrate how it works.
Here’s how a simple dockable “hello world” script would look like in regular ExtendScript:
And here is how the exact same script looks like when written with AfterScript:
That is literally 1/3 of the original code size! And you get ES6/7/8/Next syntax, timers, console.log and all the good stuff ExtendScript is missing.
But the best part about component-based UI composition is that you can create custom and reusable components you can use in one or multiple scripts. Check this out.
Here I’m creating a component that has a text and a button. Pretty common thing to have, right? Here’s what it looks like:
The possibilities of this are huge! You can reuse components, rearrange elements with literally arrow keys in your editor (nowhere near as easy to do with thing.add() declarations) and once again, you get modern syntax and a few extra conveniences like not having to worry about dockability (that is a real word).
Build tool
AfterScript comes with a CLI build tool that will help you set up a project as well as build and bundle your script with just one command.
Tree-shaking
AfterScript bundling is powered by Rollup JavaScript bundler which is excellent at performing tree-shaking - aka “eliminating unused dependencies”. This means that only the modules you actually use will be bundled with the script. It won’t pull the entire framework in, which results in the smallest possible file size for your script.
Wow! How can I use it?
AfterScript is fully open source and available on GitHub.
You can read the full Readme there.
If you have any questions, comments and suggestions, feel free to let me know!
Happy scripting 