mirror of
https://github.com/OpenSpace/OpenSpace.git
synced 2026-02-07 03:59:31 -06:00
d64a0df5f6
Web GUI from Klas Eskilson (three new modules: webgui, webbrowser and cefwebgui) Parallel connection refactorization Wormhole server added to the main repository Transfer function editor work from Cristoffer Särevall Update ghoul
73 lines
2.3 KiB
Markdown
73 lines
2.3 KiB
Markdown
# OpenSpace WebGUI Module
|
|
|
|
## Develop
|
|
|
|
First, go get [Node.js](https://nodejs.org/en/)!
|
|
|
|
```sh
|
|
# install dependencies
|
|
npm install
|
|
# run development app
|
|
npm start
|
|
# open gui
|
|
open http://localhost:8080
|
|
```
|
|
|
|
### Components
|
|
|
|
There are several useful and reusable components to make it easier for you as the developer. Most of
|
|
these general-purpose components are in [`src/comoponents/common`](src/components/common). To see
|
|
some of them, [Storybook](https://github.com/storybooks/storybook) is a useful tool. It allows you
|
|
to see them and try them out. When you are developing common-use components, please add stories for
|
|
them.
|
|
|
|
#### Using Storybook
|
|
|
|
To start storybook, run
|
|
|
|
```sh
|
|
npm run storybook
|
|
open http://localhost:9001
|
|
```
|
|
|
|
in your favourite terminal. This will start Storybook and open it up in your browser.
|
|
|
|
To add stories, add a file called `WhateverYourComponentNameIs.story.jsx`. It will get picked up by
|
|
Storybook. The `.story.jsx` ending is the important part of the file name, as this is what the
|
|
Storybook config is looking for. See the [Storybook documentation](https://storybook.js.org/basics/introduction/)
|
|
for instructions on how to build stories.
|
|
|
|
Using Storybook, you will help
|
|
|
|
* your fellow developers understand how a component may be used, and
|
|
* yourself in writing a clear, friendly API for your components.
|
|
|
|
Please try and declare every special case in your stories, as that will further improve the
|
|
usefulness of the tool.
|
|
|
|
### Types
|
|
|
|
This is something you hear quite often:
|
|
|
|
> MEH! JavaScript is the worst, there's no types or anything. Boo!! <br> - *Some developers*
|
|
|
|
It is not true. JavaScript has lots of types, but they might be a bit scary for the developers who's into strict typing.
|
|
|
|
To make this a bit easier for y'all, this web app has support for types using the Flow system. In some files, you might see a comment looking like
|
|
|
|
```js
|
|
// @flow
|
|
```
|
|
|
|
This tells our transpiler Babel (that makes our modern JavaScript readable for all browsers) that this file should be type checked!
|
|
A type declaration looks like
|
|
|
|
```js
|
|
function stringReturner(a: string, bMightBeAnything): string {
|
|
// ^^^^^^^^ ^^^^^^^^
|
|
// The interesting parts of this code snippet is higlighted above
|
|
}
|
|
```
|
|
|
|
For more about Flow, check out https://flow.org
|