[Photoshop HTML Panels Development – Build and Market Adobe Creative Cloud Extensions, by Davide Barranca, 2016, 288 pages, eBook and code samples from €149.00.]

The HTML Panel Jungle

Adobe's Common Extensibility Platform (CEP)—formerly, Creative Suite Extensible Services (CSXS)—is the sprawling technology behind, or within, HTML extensions. It is now deeply innervated in most Creative Cloud applications. As Davide noted, “HTML Panels are supported from Photoshop CC, which is the only version that can handle both Flash and HTML at the same time, onwards. We’re possibly allowed to think that they will last longer, for it is a food that Photoshop itself eats: the Library Panel, the Export As dialog, the Welcome screen have been coded by Adobe as HTML Panels, for instance.”

But what is said of Photoshop is also true for InDesign and others. That's the reason why Davide's book and course extend far beyond Photoshop's field. In fact, excluding DOM- and event-specific parts, most of the techniques exposed in the book apply as well to InDesign, InCopy, Illustrator, Premiere Pro, After Effects, Prelude, Flash Pro, and Dreamweaver. This “has been corroborated by beta readers who work on InDesign and Illustrator.” The key point is easy to get, HTML Panels are nothing but Web applications “hosted inside, and communicating with, Adobe Creative Cloud apps.”

From the developer standpoint—assuming that ExtendScript, JavaScript, and HTML/CSS are not Esperanto to you—the only problem is to find something of a road map in the CEP jungle. Say you designed a few years ago a cool InDesign script based on ExtendScript/ScriptUI. It used to render and work well in CS4 but is now broken (at least in terms of user interface.) Your goal is therefore to port it into a fresh CC-compliant panel. Questions: How will you (re)design buttons and related UI stuff? Can you reuse the ExtendScript code “as is,” or do you need a wrapper or something? How will your panel communicate with InDesign when it comes to host-specific events? What about saving mutable data and user settings? How will you sign and timestamp your product for submission to Adobe Add-ons?

To answer these questions and many more, you can either spend weeks (months? years?) browsing Web forums, collecting partial data, testing tricks and hacks, recomposing the complicate story of CEP layers, connecting the dots between CEF (Chromium Embedded Framework), HTML5, CSS3, ES5/Node.js, and the JSX Virtual Machine… Or, follow the step by step guide the author has painstakingly drawn up.

Concepts first, then code!

“I like to introduce concepts first, then discuss the implementation,” Davide wrote. The book is entirely structured according to this rule and, in my opinion, that's what makes it priceless.

Samples pages from Davide Barranca's eBook.

The way topics are ordered in the table of contents reflects the care taken in shaping your learning curve: 1. Extensibility, 2. HTML Panel Stack, 3. Setting up the environment, 4. Building up “Hello World!,” 5. CSInterface, 6. Exchanging data between Panel and Host Application, 7. Events, 8. Styling, 9. Node.js, 10. Store and retrieve Data locally, 11. Javascript Frameworks, 12. Communicate with the WWW, 13. Miscellanea, 14. Packaging and Distributing, 15. The Extensions Business.

As you can see, information bricks are articulated to gradually meet your needs. Chapters 1 to 4 brings you the basics to get started and have your very first panel showing up. Then you need to explore how CEP actually evaluates your ExtendScript code through the CSInterface.js library (Chapter 5) and how data exchanges and events are processed between the “host application” (Photoshop, InDesign…) and the Web application (your panel!), as discussed in Chapters 6-7. Chapters 5 to 7 are definitely the nerve center of the guide, you have to read them very carefully (and likely several times) to soak up the wealth of information they contain. Believe me, the effort is worth it!

Then, the specific “Web flavor” of your project is explored in depth throughout Chapters 8, 9, 11, and 12, while Chapter 10 addresses the multifaceted issue of data persistence—which can be solved by various methods, either through ExtendScript or CEP file system API, or through Node.js, Ajax or Web storage.

Finally, Chapters 13 to 15 cover front-end topics, in particular licensing, packaging, distributing, and marketing a CC extension. Here again this is a tricky part, as Adobe didn't release any survival guide to the mess of packaging panels! Davide did it, and this will help you “spend as little time as possible replying to customer support emails.”

It must be highlighted that the eBook (288 pages) comes with a package of 28 “real word” demo panels fully commented, so you can instantly put your knowledge into testable examples. No need to create from scratch the complicate folder and file structure required for declaring an extension, just use Davide's boilerplate as a safe starting point.

About the Pricing

Let's face the question. This “missing” HTML panel book authored and designed by Davide Barranca may seem expensive at first glance. The Basic Edition (PDF/ePUB/Mobi + 28 panels) costs $149.00, which is somehow the price of a pro software.

But, indeed, this is an expert tool! If you are serious about building Adobe add-ons and making it a business, consider this a sustainable investment, as well as a huge time saver. To my knowledge you will not find any equivalent information elsewhere. Educational content and secret tips are gathered here in a unique, efficient, and productive way.

Well, you don't have to take my word for it! Try to build and market from A to Z an InDesign panel without this book, and keep me informed ;-)

• Details (and alternate editions): htmlpanelsbook.com

• Davide Barranca's Photoshop blog: davidebarranca.com

• See also: cs-extensions.com