ALICE O² Web UI Framework


- ALICE O² Web UI Framework
- Overview
- Server-side features
- Client-side features
- Backend requirements
- CentOS 8
- macOS
- Minimum browser version support
- Installation
- Getting started
- Backend guide
- Frontend guide
- References
- Documentation for developers

$3

The goal of this UI framework is to identify library and framework sets, provide the core functionalities and building blocks to easily create rich web application for the ALICE O² project.

#### Server-side features
- REST and WebSocket API
- Authentication via CERN SSO (OpenID Connect), authorization using CERN e-groups
- Communication integrity ensured by JSON Web Tokens
- External resource access: MySQL, gRPC, Consul

#### Client-side features
- User interface CSS building blocks in accordance with ALICE standards
- Asynchronous data fetching (Ajax) and bi-directional socket (WebSockets)
- MVC engine with a "diffing" algorithm

$3

* nodejs >= v16.x

#### CentOS 8
``
yum install https://rpm.nodesource.com/pub_16.x/el/7/x86_64/nodejs-16.9.1-1nodesource.x86_64.rpm
`

#### macOS
`
brew install node
`

$3

- Chrome 88
- Firefox 85
- Edge 89
- Safari 14.1

$3

`
npm install --save @aliceo2/web-ui
``

$3

* Step-by-step tutorial: Time server using Ajax and WebSockets
* Advanced frontend demo

$3

* REST API - Serves custom REST API, supports TLS
* JSON Web Tokens - Secures HTTP requests and WebSocket messages with a JWT token
* Logging - Stores log messages in a file or pushes them to InfoLogger service
* SSO - OpenID Connect - Provides authentication using CERN SSO via OpenID Connect
* WebSocket server - Provides bi-directional communication between browsers and server using WebSocket protocol
* MySQL - MySQL client with simple CRUD queries
* Consul - Consul service with simple Read queries
* JIRA - Create JIRA issues
* Notification service - Trigger and receive notification using Kafka cluster

$3

- Template engine - MVC using hyperscript and observable model
- Components - Split and reuse elements
- Scaling the application - Scale the code of your application
- Debug - Debug the application with browser's tools
- Ajax - Asynchronously fetch data from the server
- WebSocket client - Connect to WebSocket server
- Routing - Let you manage many pages in one application
- Charts - Plot time-series

$3

* Frontend CSS
* Frontend classes overview

$3

* Development environment