# Architectural Overview The Caplin FX Professional Motif front-end and back-end systems are powered by [Caplin Trader](../../caplin-trader/3/index.md) and [Caplin Platform](../../caplin-platform/platform-architecture/index.md) technology. The [Caplin Integration Suite](../../caplin-platform/cis/index.md) (CIS) and the [FX integration API](fx-integration-api.md) layers provide powerful connectivity tools for integrating the FX Motif with your existing systems. ## Architecture Here is how the FX Motif end-to-end technology stacks up: ![Motif_Architecture_professional](../../images/Motif_Architecture_professional.png) ### Presentation layer The FX Professional Motif front-end system delivers an advanced browser-based web trading application that is built entirely using HTML5, CSS and JavaScript. The application implements many of the tools, libraries and components available with [Caplin Trader 3](../../caplin-trader/3/index.md), and utilises a modular framework comprised of components known as [blades](../../caplin-trader/3/bladerunner/bladerunner-about-blades-and-motifs.md). A **blade** encapsulates a slice of business functionality. An assortment of blades and associated libraries are grouped into Motifs; in the case of the Caplin FX Motif, an assortment is grouped to address the requirements of FX execution. Each blade is designed to facilitate the underlying functions and protocols associated with the slice of business functionality, such as providing the interaction controllers, GUI/ UX and workflow. As an example, the Caplin FX Motif includes blades that allow users to perform one-click trading on an executable streaming FX rate using quick trade tiles: ![ESPTile_blade](../../images/ESPTile_blade.png) Here, a quick trade tile blade provides users with a set of functionality that includes facilities for: editing currency pairs and amounts, launching RFS trade tickets, or switching the trade type with calendar controls for specifying tenors in the case of forwards and swaps. Under the hood, a blade will efficiently handle all the resources required for implementing the particular slice of functionality (JavaScript, CSS, XML, HTML, Images). Blades are fully customisable and extensible and are also used to implement: Block Trading, Notifications mechanism, Trade blotters, Post-trade allocations and more. See [here](../../caplin-trader/3/ct3-architectural-overview.md) for further reading. This framework of blades is run and managed by [BladeRunnerJS](http://bladerunnerjs.org/), which is a development toolkit and framework that you can use to construct enterprise-scale HTML5 web apps. It can be used to build, test and maintain each blade separately. It provides you with an internationalisation and localisation framework along with a _Workbench_ facility that allows you to view and modify individual blades, so that you can develop and debug each blade in isolation from the rest of your web application. Workbenches provide a development environment where you can run blades in a standalone web-page using a [Jetty](https://jetty.org/) development web server. From here you can make quick modifications and see the effects by refreshing your build. You can then run tests at a fine-grained level e.g. all app tests or just unit tests belonging to a blade before **exporting** your web app from the _BladeRunner_ development environment, to your production environment. Export your app to run in production by creating a _WAR_ file (Web Application Archive) that can be deployed on to a standard application server like JBoss or Tomcat. Once you deploy your war - your web app will then work in the same way as it did in the development environment. See [here](../../caplin-trader/3/bladerunner/bladerunner-installing-bladerunner.md) for more information on using [BladeRunner](../../caplin-trader/3/bladerunner/index.md). [Webcentric](../../caplin-trader/3/webcentric/index.md) is supplied as part of [Caplin Trader](../../caplin-trader/3/index.md), a dynamic layout management tool that delivers a dynamic drag and drop GUI. It provides automatic optimisation in the browser view, using all available screen space for content and enables users to create custom layouts for components in the FX Motif web application. The FX Motif now has **pop-out support**. You can view various trading components from the FX Motif web application in separate, pop-out windows. Support is available for: ESP tiles, trade blotters, forward/swap ladders and much more. You can even [pop-out workbenches](../../caplin-trader/3/popouts/create-a-popout.md) too, see the [Popouts](../../caplin-trader/3/popouts/index.md) component page for more detailed information. ### Distribution and Web trading services layer These layers represent the back-end systems for the FX Professional Motif. Here, [Caplin Platform](../../caplin-platform/platform-architecture/index.md) technology is utilised to handle trading, and stream financial data and messages over the internet to the **Presentation Layer** using [Liberator](../../caplin-platform/liberator/index.md) and [StreamLink](../../caplin-platform/streamlink/index.md). The back-end components provided by the Caplin Platform include [Transformer](../../caplin-platform/transformer/index.md) - a high-speed data transformation engine for filtering and managing data streamed from external FX pricing systems, as well as components to handle streaming, permissioning and user-authentication. ### Integration layer The [FX Integration API](fx-integration-api.md) along with the [Caplin Integration Suite](../../caplin-platform/cis/index.md) provide a rich set of connectivity tools and APIs for easily creating adapters that integrate the FX Professional Motif with your existing back-end systems. Caplin offers standard trading adapters for Refinitiv Electronic Trading - Automated Dealing™ (RET-AD). ## FX Professional Motif Deployment Architecture The following diagram represents a typical deployment architecture for the FX Professional Motif and internal banking systems: ![Motif_Network_Diagram](../../images/Motif_Network_Diagram.png) Of course deployment topologies vary in complexity, and the FX Professional Motif is equipped with the versatility for deployment into any type of banking system structure.