Development: Frontend - zhaw-timetable/zhawo GitHub Wiki
Content
Overview
The frontend is a PWA that was built using:
-
React to build reusable components with JSX.
-
Flux To handle the application data.
-
Adapters to comunicate with Backend API
-
Service Worker to cache all data received from HTTP fetch requests and to allow users to install ZHAWo as a Progressive Web App (PWA).
React
React was originally developed by Facebook and is one of the most popular UI libraries in web development. It is based on reusable components built with JSX, a syntax extension to JavaScript.
Flux
To handle the application data we chose to use the Flux design pattern \cite{Flux}. Using the Flux pattern ensures a unidirectional data flow from view components through actions into a single dispatcher into data stores, where the application data such as timetables and menu plans is handled. In Flux, the dispatcher is a singleton that directs the flow of data to ensure that updates do not cascade, which would lead to unpredictable behavior. When a user interacts with a React view, the view sends an action through the dispatcher, which notifies the stores that hold the application’s data. When the stores change state, the view gets notified and changes accordingly Flux.
Adapters
The data such as timetables, menu plans or lists of free rooms are provided by the backend REST API.
Service Worker
All data received from HTTP fetch requests is cached using a service worker. In addition to offline caching, the service worker also allows users to install ZHAWo as a Progressive Web App (PWA) to either their desktop or their phones home screen.