@aliceo2/web-ui
v2.7.3
Published
ALICE O2 Web UX framework
Downloads
4,563
Readme
ALICE O2 Web UI Framework
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 O2 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
Backend requirements
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
Minimum browser version support
- Chrome 88
- Firefox 85
- Edge 89
- Safari 14.1
Installation
npm install --save @aliceo2/web-ui
Getting started
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
- Notification service - 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