Figure 2.1, “Architecture of CoreMedia Studio” shows the architecture of CoreMedia Studio. The top-level layer comprises content editing applications such as the CoreMedia Studio core application and its plugins. CoreMedia Blueprint defines several plugins, showcasing Studio's various extension points.

Editing applications are built on a layer of editing components that deal with CoreMedia content objects. Editing components are built on the UI Toolkit layer which provides generic components for building rich internet applications. On this layer, components can be implemented in TypeScript and then compiled to Ext JS. UI components separate layout, model and functionality according to the MVC paradigm. Models that are backed by server-side data are implemented as client-side beans that fetch the requested values via REST. UI components offer localization support. The lower level layers comprise the REST API of the CoreMedia CMS.

Figure 2.1. Architecture of CoreMedia Studio

As shown below, on the server side, CoreMedia Studio consists of two servers: One that serves static resources, one that implements the dynamic REST service. The static resources are those that define the client-side UI structure (HTML and JavaScript) and the client-side layout (CSS and images). The dynamic resources can be accessed via the Content REST Service. When you start CoreMedia Studio from your browser, it loads the static resources and initializes the Ext JS UI component tree, Studio plugins and model beans. Using the RxJS library, model beans issue requests to access the Content REST Service, which is the interface to the CoreMedia backend systems and load data from the returned JSON objects.

Figure 2.2. Runtime components