ReactJS Web-client based on the HoSo protocol and WebSockets
HS-WebJS, formally public-web-server, is a modern Single Page Application (SPA) powered by ReactJS and based on top of the HoSo protocol and WebSockets.
Dictated by the system requirements and driven by the project leader constraints, the following set of frameworks, libraries and technologies has been found to be optimal. Please note that the highlighted version is the one being utilized for the following project; supplementary and alternative solutions that have been evaluated during the brifieng and design phase have also been added.
- Front-end JS Framework:
ReactJS
, VueJS 3, Angular.js - Continuous Delivery:
TravisCI
, CircleCI - Continuous Integration:
TravisCI
, CircleCI - Version control workflow:
Github flow
, Git flow, Trunk based development - Programming language:
Typescript (preferred)
, Javascript - Programming language version:
ECMAScript 2015 6+
- [OPTIONAL] Database:
MongoDB
- [OPTIONAL] Web server framework:
ExpressJS
Beside the root component, the application is built with four main wrapper components
The SPA is built upon three main section/areas called panes that, from left to right, define the main user interaction with the application.
Wrapper components:
pane-
selection-roompane-
active-areapane-
detailpane-
gadget-list
note that all panes must contain the
pane-
prefix
Custom general purpose controls have been designed and provided through the coreUI
The controls-*
contains general purpose but custom designed elements to provide a richer user experience.
Custom control:
controls-
searchbarcontrols-
1ubuttoncontrols-
pagercontrols-
hero-button
note that all controls shipped with coreUI must contain the
controls-
prefix
Gadget related controls, wrappers and visualizer
The gadget-*
contains all gadget's related controls, wrapper and visualizer.
Gadget component wrappers:
gadget-
cardgadget-
detail
Gadget cards represent an effortlessly quick-way to access, view and/or edit a sensor's state
Note: gadget-card-control is a component wrapper that holds the specific sensor's compact control
Gadget detail contains the controls displayed in the detail pane - typically an expanded version of the compact control
Note: gadget-detail-control is a component wrapper that holds the specific sensor's expanded control