Web-techs review

BE-CEM-MRO Web technologies review

Sylvain Fargier (BE-CEM-MRO)

Mathieu Donzé (BE-CEM-MRO)

19/04/21

Overview

  • Reduced number of technologies
    • Javascript, CSS, HTML
  • Reduced number of dependencies:
    • A single test framework for front-end and back-end
    • Lowered maintenance and learning-curve
  • Low-code oriented
    • HTML template interactions
    • templates and live documentation

Overview: general architecture

Overview: general architecture

Front-end

  • Libraries: Vue.js and bootstrap
    • lowered to the minimum
  • Tests and validation: Karma, Mocha, Chai
    • BDD and Agile oriented
    • In browser testing
  • Technologies: Javascript using JSDoc Typescript
    • Language not bound to majors (Microsoft, Facebook)
    • Doxygen like, really close to middleware C++ developments
  • Linting: eslint, jshint, tsc
    • CI integration, commands homogenization

Font-end: overview

  • Versatile set of widgets
    • Markdown editor, SSVG, Server Events, Inputs ...
    • Still growing depending on the need

Front-end: base-vue

BaseWebSite(title="Sample WebSite")
  BaseEventSource(:src="/sse" v-slot="es")
    p This is a template only website
    p receiving events: {{ es.message }}
  • Advanced widgets
    • SSVG, Markdown, DateTime, Dialogs ...
    • Inputs: supporting edit/live mode
  • Data Sources integration
    • SSE, WebSocket

Front-end: base-vue

  • To be implemented
    • Line-graph widget (in progress)
    • Additional in-template data-sources (REST, database ...)

Front-end: base-vue

Front-end: SSVG

  • "onupdate" hooks:
    • on computed, relation and direct elements
    • hardened environment support (CSP)
  • "direct" relations
    • For direct and basic interactions
    • no domain mapping
  • "auto" property type
    • Automatic domain and type adjustments

Front-end: SSVG v1.1 updates

  • And others:
    • non-interpolatable properties transitions
    • Callback context and execution environment
    • ...
  • To be implemented
    • SSVG editor (in progress, based on base-vue)
    • BE-CSS dashboard integration

Front-end: SSVG v1.1

 

Front-end: templates

Back-end

  • Framework: Node.js
    • Using express, LoDash, passport
  • Tests and validation: Mocha, Chai
    • BDD and Agile oriented
  • Technologies: Javascript using JSDoc Typescript
    • Doxygen like, really close to middleware C++ developments
  • Linting: eslint, jshint, tsc
    • CI integration, commands homogenization
  • Stateless design
    • Developped to support redundancy and load-balancing

Back-end: overview

  • Same technologies than front-end
    • No learning curve or specific skills required
  • Middleware in C++
    • Back-end is only a "bridge"
    • Integrated either using bindings or client libraries

Back-end: overview

  • Database REST API: mrest.js
    • Descriptive configuration (Json)
    • MongoDB like query syntax on a REST API
    • Automatic documentation (Swagger)
    • Tested with OracleDB and SQlite, but supports others (Redshift, MySQL ...)
    • Stateless and scalable (OpenShift)
    • Large documents streaming
    • SSO ready

Back-end: databases

Back-end: CERN Middleware

{
  endpoints: [
    { device: 'TIDVG5', property: 'Acquisition' }
  ]
}
  • To be implemented
    • Automatic swagger documentation
    • Dynamic proxy mode (creating endpoints on-demand)
    • Device write mode
  • Current Limitations
    • SSE limitation: HTTP/2 does not cope well with OpenShift, SSE over HTTP/1.1 is limited to 6 connections for a domain on Firefox and Chrome: prefer WebSockets

Back-end: CERN Middleware

  • Historical data retrieval
    • Timber/NXCALS back-end exists (uses private API, slow)

Back-end: missing pieces

Infrastructure

&

Worflow

  • OpenShift deployment
    • Descriptive deployment configurations (ex: tidvg5, n_ToF SDAQ ...)
    • Automated deployment workflow using GitLab
    • Health-checks and monitoring
    • Development environment (mro-dev project)
    • TN trusted pods (mro-dev-tn project)

Infrastructure: PaaS (OpenShift)

apiVersion: v1
kind: List
items:
- apiVersion: image.openshift.io/v1
  kind: ImageStream
  metadata:
    name: tidvg5-monitoring
// ...

Infrastructure: PaaS (OpenShift)

  • Continuous Integration: GitLab-CI
    • Automated in-browser testing (Karma, Mocha, Chai)
    • Container based
    • Tag based releases
    • Peer code-reviews

Workflow: Continuous Delivery

  • To be implemented
    • Dedicated health checks (cmw-express.js, mrest.js ...)

Workflow: Continuous Delivery

Questions ?