close

Filter

loading table of contents...

CoreMedia Content Cloud v11 Upgrade Guide / Version 2110

Table Of Contents

7.1 Studio Client in TypeScript/npm

This section gives an overview of the new Studio Client workspace, programming language and tools. Since this is one of the major changes in CoreMedia Content Cloud v11, here is a concise summary of what's new:

  • Studio Client is now implemented in TypeScript instead of ActionScript/MXML

  • Studio Client is now built with (p)npm instead of Maven

  • Resulting compiled JavaScript and Docker image are very similar to the former artifacts

  • CoreMedia provides a tool to automate conversion of your customized Blueprint workspace to TypeScript/npm

  • CoreMedia provides npm-based tooling to build the new workspace and start Studio Client

  • Using TypeScript leads to extended IDE support: JetBrains IntelliJ IDEA Ultimate, WebStorm or Microsoft Visual Studio Code

Please read on if you are interested in more details.

Up to CoreMedia Content Cloud v10, Studio Client is implemented in ActionScript and MXML, the programming languages of Apache Flex. CoreMedia's Open Source tool Jangaroo is used to compile ActionScript/MXML to JavaScript that runs in the browser directly, unlike original Flex, which uses FlashPlayer. To invoke the Jangaroo compiler and package resources, Maven is used as the underlying build tool.

ActionScript and MXML offer considerable advantages over pure JavaScript, mainly static typing, which leads to superior IDE support, especially when developing using comprehensive APIs like those of CoreMedia Content Cloud and Sencha Ext JS. However, ActionScript is based on ECMAScript 3 and has not made much progress since 2011, when it was donated to Apache. FlashPlayer is end-of-life, so almost all browsers no longer support it, and Apache's efforts to create their own compiler to JavaScript (Apache Royale) has not been overly successful. In contrast, in the same period, ECMAScript/JavaScript, after years of stagnation, flourished with innovation, leading to many modern language features being introduced in frequent major ECMAScript updates. Also, TypeScript established itself as the de-facto standard to add static typing to the ECMAScript language.

Since its introduction in 2012, TypeScript took years to become on par with ActionScript, but in 2019, it even turned out to have overtaken it, so it was the right time to start finding a migration path for the Studio Client code from ActionScript to TypeScript. Although ActionScript and TypeScript are quite similar, this proved to be quite a challenge, but CoreMedia succeeded in building a tool that converts ActionScript, MXML and properties source code to TypeScript. This tool is actually the new version 4.1 of the Jangaroo compiler, until then only used to compile to JavaScript, now supporting TypeScript as a new output format.

Using TypeScript, building Studio Client with Maven no longer seemed appropriate, either, so now, the standard packaging format and build tool for JavaScript, npm, to be more precise, pnpm, is used. Converting Maven pom.xml to npm package.json has been included in the conversion tool as well.

To summarize, CoreMedia provides a tool to convert your custom Blueprint workspace from ActionScript/MXML/properties/Maven to TypeScript/pnpm completely automatically, so that it can be successfully built and run right after conversion. You essentially convert your CoreMedia Content Cloud v10.2107 Studio Client to TypeScript and, as a check-point, run it with your existing 2107 system. You then move on to v11 as usual, by merging-in CoreMedia's v11 Blueprint workspace. This process is described in more detail in Section 7.2, “Upgrading Studio Client to CoreMedia Content Cloud v11”.

Once converted to TypeScript/npm, your Studio Client workspace comes with a modern, superior developer experience. TypeScript is in the 2021 top ten of the worldwide PYPL PopularitY of Programming Language Index. Several IDEs (JetBrains IDEA and WebStorm, Microsoft Visual Studio Code) support TypeScript out of the box. npm is JavaScript's de-facto standard for package and dependency management. pnpm is a new, popular, very efficient and convenient tool to build a npm workspace.

This combination of modern programming language and tool has been complemented by a minimal set of tools provided by CoreMedia to support the integration with Sencha Ext JS and add even more developer convenience for building, testing, starting and publishing npm packages with TypeScript code. These tools are themselves published as npm packages, containing scripts that are invoked via pnpm, taking advantage of established standards and the power and flexibility of pnpm.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.