Migrate GUI to Typescript + React + ES6 #143
Conversation
public/flightControl/index.html
Outdated
| <link async rel="stylesheet" href="/node_modules/roboto-fontface/css/roboto/roboto-fontface.css"> | ||
| <link async rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> | ||
| <link async rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> | ||
| <link async rel="stylesheet" href="node_modules/bootstrap-material-design/dist/css/ripples.min.css"> |
There was a problem hiding this comment.
@dmz38 I was getting a failure in loading styles related to this:
Not really breaking anything, I can look at fixing it later.
There was a problem hiding this comment.
Fixed this and the style other style issues.
| @@ -12,6 +12,14 @@ export class Button extends React.Component<ButtonProps, undefined> { | |||
| super(props); | |||
| } | |||
|
|
|||
| public shouldComponentUpdate(nextProps: ButtonProps): boolean { | |||
There was a problem hiding this comment.
These are to avoid unnecessary re-rendering of large chunks of the DOM.
Makefile
Outdated
| @@ -7,7 +7,8 @@ build: build_socketio_cpp | |||
| git submodule update --init --recursive | |||
| mkdir -p build | |||
| rm -f config/gazebo/models/x340/x340.sdf | |||
| cd build; cmake ..; make | |||
| cd build; cmake ..; make; | |||
| cd public/flightControl; webpack; | |||
There was a problem hiding this comment.
Use ./node_modules/.bin/webpack to avoid having to install it globally
| @@ -28,13 +28,13 @@ void messaging_init() { | |||
| } | |||
|
|
|||
|
|
|||
| void send_message(const json &msg) { | |||
| void send_message(const string type, const json &msg) { | |||
There was a problem hiding this comment.
How is this better? Having this seems to just add more redundant code to node/socket.js
There was a problem hiding this comment.
I thought this was more desirable than defining listeners for a generic msg type and relying on the json for a specific type, but I can do it that way if you prefer.
src/gcs.cpp
Outdated
| jsonPosition.push_back(vehicles[i]->state.position.y()); | ||
| jsonPosition.push_back(vehicles[i]->state.position.z()); | ||
| jsonVehicle["position"] = jsonPosition; | ||
| jsonVehicle["position"] = { |
There was a problem hiding this comment.
Any benefit in this change? Sending vectors as 3-tuples is pretty standard. (Changing it for the purpose of typescript is not a good reason)
There was a problem hiding this comment.
Nope, I'll put it back to the way it was (we aren't using the data at the moment anyway).
There was a problem hiding this comment.
I was using it on my branch for the viewer for wanted to avoid conflicts
| value: string | ||
| } | ||
|
|
||
| export class FileSelector extends React.Component<FileSelectProps, FileSelectState> { |
There was a problem hiding this comment.
IMO if the react component doesn't really do anything but wrap an input, you probably don't need an extra component. But, either way, this component does not need to have it's own state. Use getDefaultProps instead. Having the state also prevents validation by the parent.
…steners when components are unbound, and other CR feedback.
📖 Summary
Migrating the GUI to Typescript + React + ES6.
🔍 Details
To use more modern design practices, the GUI is being migrated to a component based architecture (via React).
Typescript is being used to create tighter contracts with the backend, hopefully reducing the likelihood of changes to server dto's silently breaking the GUI.
ES6 is being used to get some nice modern features (arrow syntax)...
Some modifications to the initial design were made (see the third commit) for the sake of performance. They were necessary to avoid rendering the entire component tree with every status message (several times per second).
Installation/Setup
✔️ Testing
✔️ Verification