---
title: "The TypeScript Framework Architecture"
slug: "the-typescript-framework-architecture"
updated: 2024-10-15T13:45:22Z
published: 2024-10-15T13:45:22Z
canonical: "support.dise.com/the-typescript-framework-architecture"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.dise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# The TypeScript Framework Architecture

The Framework is supplied in two flavors and they both implement the *Model-View-Controller Pattern (MVC)*, where:

- **Model** The Message data from the CMS along with Player-metadata, e.g. the current Attribute/Trigger states, the View Mode, the location of this item in the Playlist etc.
- **View** Your “template implementation“ as an implementation of the ITemplateView interface. This is usually done by subclassing either TemplateViewBase or SimpleViewBase.
- **Controller** This is the TemplateController, which hosts (your) View. It takes care of all the event-communication with the Player and abstracts the API for the template/View.

### Framework variants

The framework currently includes two different implementations. Choose the one that best suits your needs.

1. Plain/classic Typescript (namespaces) - Located in “TemplateFramework/framework” - async/Promise-based
2. ESM - Located in “TemplateFramework/esm“ - ES6 modules - The same as the “async“-framework from the client’s point-of-view

The ESM framework requires a bundler (e.g. WebPack) for deployment if you are using external modules from NPM or want to rely on the standard “zipping“ script. The other can be bundled by the TypeScript compiler.