Terms and definitions

There are many more tools and libraries at play, but these are the fundamental ones you should know as you get the stack building and running on your development machine. (These are presented roughly in order from bottom to top.)

• Photoshop: This provides the underlying platform upon which the whole stack runs.
• Chromium: An unbranded and open source version of Google Chrome
• Chromium Embedded Framework (aka CEF): Chromium with a layer of glue around it to make it embeddable within Photoshop.
• Playground Plugin: Embeds CEF (with a transparent background) into Photoshop. The net result is a Photoshop canvas underneath whatever else is being presented to the user on the browser layer.
• Playground Adapter: A wrapper around the Playground Plugin and provides a host of functions for the various actions one might want to play within Photoshop.
• Node.js: JavaScript interpreter. Typically a server-side JavaScript platform. In our case it is used exclusively at compile time to accomplish a couple steps:
  • linting. (primitive static analysis)
  • "compiling". (concatenation and minification of JS sources, conversion of Less sources to CSS, etc.)
• Grunt: Build tool. make or ant analogue. This is what's kicked off during the 'compile' pass (via the project's Gruntfile) to do the linting and packaging. Grunt is the only means by which Node is used during development.
• Bower: Build tool. A package manager for Javascript modules intended to be run within a web browser. (This differs from npm which is intended for Node-specific Javascript modules.) Bower downloads all the packages from external locations, making them ready for use by whatever browser scripts might need them (including RequireJS).
• RequireJS Module loader. Improves upon HTML's <script> invocations by making sure the scripts that are loaded are done so in the right order, with the right dependencies in place, etc. (This include de-minification of the sources packaged at Grunttime.)
• React Runtime view library. A Javascript library used to build out the Designshop user interface.