The document provides an overview of the XVA Platform, which uses a distributed architecture for enterprise web applications. Key points: - The platform consists of multiple independent modules hosted on a CDN and loaded on demand. A small Node.js server app loads the initial page and configures module paths. - Modules are built, tested, versioned, and released independently, allowing for improved scalability, collaboration, and code quality compared to a monolithic architecture. - Continuous integration processes compile modules and deploy them to the CDN. The platform loads the correct module versions for each environment via a configuration module.

1. XVA Web Platform
Demo & Architecture

2. Agenda
• Enterprise Web Application Architecture
– Classical model
– Distributed architecture
• XVA Platform

3. Enterprise Web Application
Architecture
• Our organisation today
Organisation
TEAM 1 TEAM 3TEAM 2 TEAM 4
HTML 5 Project
- Features
- Modules
- …
HTML 5 Project
- Features
- Modules
- …
HTML 5 Project
- Features
- Modules
- …
HTML 5 Project
- Features
- Modules
- …

4. Enterprise Web Application
Architecture
• Classical model
– 1 big repository
– 1 build
– Difficult to share code
– Difficult to release or patch
– Difficult to maintain
– Difficult to scale
– Load everything at the same time
Could lead to spaghetti code!
Server Application (Apache Node IIS)
Features
Libraries
CSS
…

5. Enterprise Web Application
Architecture
• What’s a single page Web App?
– 1 HTML page that needs to be loaded and hosted on a
server (Apache, node, IIS, JBoss…)
– It loads a bunch of static files
• Scripts
• CSS
• Resources
– And talks to a backend API

6. Enterprise Web Application
Architecture
• Towards a new approach
– A tiny server application
– All static files in a CDN
APIAPI API
CDN
- Static files
Server Application
-load the default
page

7. Enterprise Web Application
Architecture
• Distributed architecture
– Each module is loaded on request.
Default
HTML Page
App A Module
App B Module
App C Module
Component 1
Module
Component 2
Module
Component 3
Module
CDNServer

8. Enterprise Web Application
Architecture
• Distributed architecture
– 1 small server Application hosted independently
– Everything else is a module.
• Modules are built, tested, versioned, and released
independently
• Have their own repository
• Can be swapped with another or mocked
• Can be shared and reused in other projects

9. Enterprise Web Application
Architecture
• Distributed architecture
– Pros
• Far more scalable
• More collaborative
• Easier to release
• Higher code quality and test coverage
• Easier to maintain, as smaller repository
• Faster builds
• Better performance as modules are loaded on request
– Cons
• More builds to setup in Jenkins, TeamCity…
• More Server to maintain, Server app and CDN
• More modules to keep track of
• More repositories to maintain and work on

10. The XVA Platform
• A distributed architecture composed of the following
– NodeJs application called CVAPlatform
– CDN
• xva-packages-conf
• xva-app-explorer
• xva-counterPartyViewer
• xva-workflowViewer
• xva-chart
• xva-grid
• xva-event-emitter
• xva-socket
• xva-utils
• …
– A REST Api – built with WebApi 2.0

11. The XVA Platform
• CVAPlatform
• Load the index page
• The index page loads requireJs and the app-bootstrap file
• And when ready, call the xva-app-explorer

12. The XVA Platform
• On load, the app-bootstrap
– gets the environment config from the xva-packages-
conf module
– then, the require paths are transformed, ie:
• "xva-app-explorer":"{cdnUrl}xva-app-explorer/{version}/xva-app-explorer{debugOrMin}"
• "xva-app-explorer": “http://dev/xva-app-explorer/1.0.2/xva-app-explorer.debug”
– and the xva-app-explorer module is called.
• Page loaded, the app is ready to use
– The xva-app-explorer can LAZY loads all other apps.

13. The XVA Platform
• How it works for all our environments?
– xva-packages-conf
• Set the module version used on each environments
• Assets are released on the CDN in CDN/xva-packages-conf/latest
• Latest is the only version of this module!
– xva-applications-conf
• Choose which applications is accessible per environments
"uat":{
"xva-event-emitter" : "1.0.0",
"xva-utils": "1.0",
"xva-grid": "1.0.0",
"xva-chart": "1.0.1",
"xva-socket": "1.0.6",
"xva-identity": "1.0.0",
"xva-router": "1.0.8",
"xva-app-explorer": "1.0.9",
"xva-libraries": "1.0.0",
"xva-counterPartyViewer": "1.0.5",
"xva-workflowViewer": "1.0.2",
…
},
"development":{
"xva-event-emitter" : "latest",
"xva-utils": "latest",
"xva-grid": "latest",
"xva-chart": "latest",
"xva-socket": "latest",
"xva-identity": "latest",
"xva-router": "latest",
"xva-app-explorer": "latest",
"xva-libraries": "latest",
"xva-counterPartyViewer": "latest",
"xva-workflowViewer": "latest",
…
},

14. The XVA Platform
CDN
Xva-packages-conf
Latest
Xva-app-explorer
Latest 1.0.1
Xva-counterPartyViewer
Latest 1.0.1 1.0
Xva-workflowViewer
Latest 1.0.1 1.0
Xva-grid
Latest 0.0.8 0.0.7
Xva-chart
Latest 0.0.5 0.0.4
DEV Server
CVAPlatform
Require
Paths
WebApi Workflow
Services
Database
UAT Server
CVAPlatform
Require
Paths
WebApi Workflow
Services
Database
Production Server
CVAPlatform
Require
Paths
WebApi Workflow
Services
Database

15. The XVA Platform
• Continuous Integration & Delivery
– Grunt
• Runs JsHint on each JS files
• Runs Less compilation
• Runs the r.js optimizer to build a debug and a minified version of each module
• Runs the Karma, jasmine, unit tests
• Runs grunt-bump to release a new version of the package (ONLY the publish
Job on our integration server runs it)
– Assets (debug, min, and map files) are copied to the CDN
(CDN/Module/version/), either in latest or in the specified version
– Once the package is released, just change the xva-packages-conf, to
update the version and see the changes on the desired environment

16. The XVA Platform
• On our local environment
– Pull the nodeJs module (CVAPlatform)
– Load every modules from the CDN
– Except for the ones in our override file,
dependencies.json

17. The XVA Platform
• Pros
– Very scalable
– What you see is what is loaded
– Sharable
– Fast and easy to release
– Developers have limited access to the code
• Cons
– Common library version for every modules
• ie one module can’t load angular 1.3 and another, angular
1.1

18. Our Vision of Tomorrow
Organisation
TEAM 1 TEAM 3TEAM 2 TEAM 4
T1-greatComponent
T4-module
T2-utilsComponent
T3-ReactApp
T4-App
T3-module
T2-AppT1-superApp
T1-superApp2
Common Server
Application
Contribute
Own
Use

19. Thank You!