ALICE O² Web UI Framework

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

Overview

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), authorisation 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

Backend requirements

• nodejs >= v14.16.0

CentOS 7

yum install https://rpm.nodesource.com/pub_14.x/el/7/x86_64/nodejs-14.16.1-1nodesource.x86_64.rpm

macOS

brew install node

Minimum browser version support

• Chrome 61
• Firefox 60
• Edge 80
• Safari 10.1
• Opera 47

Installation

npm install --save @aliceo2/web-ui

Getting started

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

Backend guide

• 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
• Kafka - Notifications - Trigger and receive notification using Kafka cluster

Frontend guide

• 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

References

• Frontend CSS
• Frontend classes overview

Documentation for developers

• Development environment