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
OpenSpace WebGUI Module
Develop
First, go get Node.js!
# 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. To see
some of them, 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
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
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!!
- 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
// @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
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