Application Architecture

The Insights application architecture is a combination of Electron, React, Redux and CSS Modules.

Application Bootstrap

The main application is built as a Webpack bundle. This is then loaded via Electron in the below sequence. Application Bootstrap

Core Technologies and Patterns

React

React provides the view layer of the application architecture. The user interface is composed of components. A component is a Javascript class that extends React.Component. A component is configured via properties that are passed in at runtime. When a component renders, a custom HTML like DSL called JSX is parsed to produce markup. This markup is used to update the React Virtual DOM, which ultimately updates the browser DOM. React Concept

Redux

Redux is a state container for React applications. It is leveraged to centralize state and provide consistency across the application as to how user events are handled. The Redux portion of the architecture is composed of:

  • The Store: Centralizes the application state across all components.
  • Reducer Functions: Responsible for processing state changes.
  • Actions: Describes the intent to change state. Redux Architecture

CSS Modules

CSS Modules are a convention for bundling the required CSS with React components. This is enabled by Webpack with the css-loader and style-loader plugins.