UI ARCHITECTURE

Kiran Kashalkar

© ETSI 2016 1
 RIFT.ware UI Architecture
Browser

View
Stores
(Maintain UI
Flux Implementation
 A RW.UI plugin is an encapsulated set of
Component state for
Library views) Dispatcher Views built functionality.
(ReactJS) with ReactJS
 It is composed of a collection of
Event

Pub/Sub

Navigation
Component Data Collection API browser-side assets (views, styles, fonts,
Helpers
Web-
socket REST
icons), browser-side state managers
ws/wss HTTP/HTTPS HTML/CSS/JS over
(stores), browser-side API helpers,
HTTP/HTTPS
Application Server server-side API implementations, UI
Plugins
Node.js Server route declarations and any other
Plugin Plugin Plugin Route Plugin REST +

Composer
Config
Manager
Asset
Manager
Manager Socket API
Manager configuration.

Auth Manager
About Backend  The RW.UI framework will load and
Debug

Launchpad
manage communication between
Plugin Discovery Module
Dashboard
plugins
…

Backend (RW.REST/Others)

© ETSI 2016 2
 UI Code
High-level UI components Sample Plugin Structure
rw.ui
|-api helloworld
| |-routes |-webpack.production.config.js
| |-sdn_account |-config.json
| |-cloud_account
| |-debug |-webpack.config.js
| |-launchpad |-src
| |-logging | |-helloWorldOne.jsx
| |-common | |-helloWorldTwo.jsx
| |-utils
| |-about | |-main.js
|-scripts | |-helloWorldDashboard.jsx
| |-install_api.sh | |-index.html
| |-install_ui.sh |-routes.js
|-skyquake
| |-scripts |-package.json
| | |-build.sh
| | |-launch_ui.sh
| |-framework UI Framework Core
| | |-js
| | |-widgets core
| | |-core |-api_utils
| | |-utils
| | |-style | |-constants.js
| |-plugins | |-sockets.js
| | |-debug | |-utils.js
| | |-composer |-modules
| | |-launchpad | |-routes
| | |-helloworld | | |-navigation.js
| | |-goodbyeworld | |-api
| | |-login | | |-navigation.js
| | |-about
| |-skyquakeEmitter.js
| |-plugin_discoverer.js
| |-navigation_manager.js

© ETSI 2016 3
© ETSI 2016 4
 Catalog Manager/Composer Deep Dive
Browser React Libraries
Views Catalog Items Details
Details Panel Model Library
Editor
(Create/Update/Delete
objects in memory)

Canvas Editor D3 based Drawing

Composer App Canvas Panel Library
Forwarding Path Editor (Create/Update/Delete
objects on canvas)

Drag and Drop Library using

Drag and Drop Manager Dropzone.js
Catalog Panel (Create/Update/Delete
Catalog Package Manager upload/download)

API Stores
Helpers Descriptor Package Schema Helper
Catalog API Catalog API
Catalog
Helper Helper Composer Catalog
Catalog Package
Panel
(descriptor (onboard, App Store
Store
Data Store Manager
CRUD) download, Store
status)

Application Server

Node.js Server Package Server

Backend (RW.REST/Others)

© ETSI 2016 5