How to "layout" a script with multiple files?

[SimonBjörk]

I'm writing a script that needs to be split up into multiple parts. I've never done such a thing for After Effects scripts, so I'm a bit sure of the "layout".

Lets say I have 4 files, gui.jsx, utils.jsx, render.jsx, import.jsx.

- Add gui.jsx to the ScriptsUI folder.

- Create a new folder (../ScriptsUI/extras) and put the other three scripts in that folder.

- render.jsx needs methods from utils.jsx. To make them availible,, add the following at the top of render.jsx

$.evalFile(utils.jsx);

- gui.jsx needs both utils.jsx and render.jsx. So I guess I add both using the same method as above? Note that that will make utils "import" twice. Is that a problem?

Any feedback on this approach?

Thanks!

/Simon

[Tomas Sinkunas]

Which one is your main entry point file? Is it gui.jsx? If so, then declare all dependencies in this file. Basically, if you have dependencies in multiple files, it's best to define them in the top-level file, so you do not duplicate insertion. Here's the gist:

// gui.jsx
#include "lib/utils.jsx"
#include "lib/render.jsx"
#include "lib/import.jsx"


// here goes the rest of you gui.jsx file content

[SimonBjörk]

Thanks Tomas!

So how do I call functions that are imported from another script/lib? Say that I have a filepath() function in utils.jsx. Do I just call filepath() in the other scripts as well?

The downside to this is that it's hard to backtrack which script a function belongs to. For example, if I use the filepath() function in render.jsx, I have no way of knowing which script the source is in?

[SimonBjörk]

Basically, it would be nice if I could call functions from other script like you do in Python, something like utils.filepath().

[Tomas Sinkunas]

For that, my friend, use a namespace. Create an object, say "util", that holds your utility functions, and then import it into your main-entry file. For more info on how to create such object, look for Module Revealing Patterns, or something similar, here's and example https://medium.com/@Rahulx1/revealing-module-pattern-tips-e3442d4e352

I personally use it in such way:

// utils.js file content
var utils = (function(){
	var module = {};

	// publick method
	module.sayHello = function(){
		alert("hello there");
	};

	return module;

	// Private method
	function sayBey(){ / ... / }
})();


// In your main entry file "gui.jsx"

#include "utils.js"
utils.sayHello();

[Tomas Sinkunas]

If you are interested in how to set those files up, here's my random public repo that uses this module pattern https://github.com/rendertom/LST

Hope that helps

[SimonBjörk]

Thanks a lot Tomas, I will give it a try!

On another note... I've spent days and days in making similar functions that you have in that repo. I which I had found it earlier, it would have saved me a lot of work, it looks really nice!

In my case I still use the "old" method of reading an expression and generating the matrices from that. I did think about looping over the parents and multiplying the matrices together, but I kind of assumed that it would be slower. Have you done any speed tests?