Using ES2015 template strings in CEP

︎

Update 4/10/2018: Our CEP Getting Started resources are now on GitHub! See our repo for the latest information.

Today, I want to have a look at a fairly specific topic for developers who are already using CEP to build extensions for Adobe Creative Cloud apps.

If CSInterface is an unfamiliar term for you, this might not be the first post you'll want to read. In that case, I recommend having a look at these resources:

If you’re already building a CEP extension and you’ve ever struggled with handling nested quotation marks in .evalScript() calls, read on.

We’ll start by talking about template strings, a JavaScript feature first added to the language spec as part of ES2015.

What are template strings?

There are plenty of great resources out there to learn about ES2015 features like template strings (including this post by Adobe’s own Kerri Shotts). I won’t cover everything template strings can do here, but I will start with a quick overview.

One use case for template strings is interpolation, where you dynamically populate part of a string.

Here is a JavaScript string with no interpolation:

let str = "My name is Ash.";

And here is a string using concatenation (combining strings using the + operator) to dynamically populate a value into a string:

let name = "Ash";

/* Concatenate the variable `name` between two strings */
let str = "My name is " + name + ". Nice to meet you.";

String concatenation is a basic pattern in JavaScript. But concatenation can get tricky to handle because you need to juggle the surrounding spaces, punctuation, and + operators, especially when concatenating several things together. It’s just too easy to make little mistakes.

Template strings, which came to JavaScript in ES2015, can clean up the clutter:

let name = "Ash";

/* Interpolate the variable `name` into a string */
let str = `My name is ${name}. Nice to meet you.`;

I find that much easier to write and read.

Great, so what does this have to do with CEP extensions?

Starting in CEP 8.0, thanks to a big update to Chromium Embedded Framework, you can now take advantage of ES2015+ features in your client-side code, such as template strings.

︎Updates to CEP core technologies in CEP 8.0: Chromium Embedded Framework and Node.js

Beyond the convenience that template strings can provide in any JavaScript code base, there’s a specific reason this new feature could be welcome news to a CEP developer.

Let’s have a look.

Calling .evalScript() with string concatenation

For new CEP developers and seasoned pros alike, one of the easiest places to get tripped up is writing .evalScript() calls.

The .evalScript() function included in CEP’s CSInterface library lets the developer hand off work from the extension’s client-side code to the host app’s scripting engine (the “host app” is the Creative Cloud app, like Photoshop, InDesign, or Audition, that your extension runs in).

A basic .evalScript() call

Before we get started, note that in all the code examples below, I’ll assume you’ve already instantiated an instance of CSInterface in your code:

const csInterface = new CSInterface();

Once you’ve done that, you’re ready to take advantage of the CSInterface library functions.

Here is a basic .evalScript() call:

csInterface.evalScript("alert('Hi, Ash!')");

As a refresher, .evalScript() requires as its first argument a script to hand off to the host app for execution. This script must be passed as a string.

Additionally, since the argument for the JavaScript alert() function within that script is also a string, we need to nest quotation marks, as seen in the example above.

The result of the .evalScript() call above is this:

︎Pass a script from CEP to Photoshop’s scripting engine to trigger an alert

When the host app’s scripting engine receives the script, effectively what it will see is alert('Hi, Ash!').

Passing dynamic values with concatenation

It’s when you want to dynamically pass values from the extension’s client-side to the host app that the syntax can get confusing, due to the nested quotation marks:

let name = "Ash";

/* Concatenate `name` into the `.evalScript()` argument */
csInterface.evalScript("alert('Hi, " + name + "!')");

Remember that the single quotes are important syntactically, so we must keep those in the .evalScript() call. As a result, we’re concatenating "alert('Hi, ", with the variable name, followed by "')". When combined together, you get "alert('Hi, Ash!')".

This certainly takes some getting used to when you’re new to CEP, but even when you’ve got the concept down, it’s easy to make mistakes.

So how can template strings help?

Template strings can cut down on a lot of this quotation mark juggling.

Here’s the same example we looked at above, refactored to take advantage of template strings:

let name = "Ash";

/* Using template strings instead of concatenation */
csInterface.evalScript(`alert('Hi, ${name}!')`);

It’s still important to make sure that the argument passed to alert() is surrounded by quotation marks ('Hi, ${name}!'). But template strings really tighten up the code, making it easier to avoid mistakes and simpler to read.

The before and after

After all of that, here’s the tl;dr:

/* Using string concatenation */
csInterface.evalScript("alert('Hi, " + name + "!')");
/* Using template strings */
csInterface.evalScript(`alert('Hi, ${name}!')`);

The template strings certainly cut down on complexity.

Are template strings for you?

For established panels, there’s likely no reason to rush out and try switching to template strings to help tame your .evalScript() calls. But is this something you would be interested in trying in your next project? Do you see any limitations that would prevent you from using template strings in your CEP code?

A more common way CEP developers avoid the complexities of writing .evalScript() calls is to write a helper function that handles the concatenation automatically. Is this an approach you're taking? If so, what does your helper function look like?

︎CEP: Extend Creative Cloud apps with HTML, CSS, and JavaScript

If you’ve made it this far and haven’t written a CEP extension before, go check out CEP on Adobe I/O to get started.

For more stories like this, subscribe to our Creative Cloud Developer Newsletter.