Skip to content
No description or website provided.
TypeScript HTML Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode
app
public
src
.bettercodehub.yml
.gitignore
LICENSE
README.MD
package.json
stryker.conf.js
tsconfig.json
tslint.json
yarn.lock

README.MD

Hyperion Web

Circle CI BCH compliance Mutation testing badge

This is the web front-end to Hyperion. Hyperion is an application to monitor a 'Smart Meter' that follows the Dutch "Smart Meter" Requirements, or DSMR for short.

Building

There are two ways to build the Hyperion frontend.

For development

Just run

npm install
API_HOST=http://your-hyperion-instance npm run start

For production

Just run

npm install
npm run build

About the code

Hyperion Web is written in TypeScript using the React library.

Design

The code is structured according to the "Presentational and Container Components" pattern.

In short, there are two main classes of React components:

  1. Container components.
    • Are concerned with how things work.
    • May contain both presentational and container components** inside but usually don’t have any DOM markup of their own except for some wrapping divs, and never have any styles.
    • Provide the data and behavior to presentational or other container components.
    • Call Flux actions and provide these as callbacks to the presentational components.
    • Are often stateful, as they tend to serve as data sources.
    • Are usually generated using higher order components such as connect() from React Redux, createContainer() from Relay, or Container.create() from Flux Utils, rather than written by hand.
    • Examples: UserPage, FollowersSidebar, StoryContainer, FollowedUserList.
  2. Presentational components.
    • Are concerned with how things look.
    • May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.
    • Often allow containment via this.props.children.
    • Have no dependencies on the rest of the app, such as Flux actions or stores.
    • Don’t specify how the data is loaded or mutated.
    • Receive data and callbacks exclusively via props.
    • Rarely have their own state (when they do, it’s UI state rather than data).
    • Are written as functional components unless they need state, lifecycle hooks, or performance optimizations.
    • Examples: Page, Sidebar, Story, UserInfo, List.

License

Hyperion Web is licensed under the MIT License. See the LICENSE file for details.

You can’t perform that action at this time.