React frontend - HU-ICT-LAB/RobotWars GitHub Wiki
Purpose of this article
In this article you will find information about the different options of frameworks we've looked at and the design of the webapp.
What kind of technology are we going to use for the frontend?
We have looked at a few options.
- OpenWC (Open Web Components)
- Returning HTML/CSS/JS via the flask api
- React
OpenWC
The first thing we noticed is that their github page says ING used it, this instantly gives a good feeling about the technology of course. OpenWC uses LitElement which our software developer has already used before so he will be able to pick it up rather easily. OpenWC works with components for all of the individual parts in the webapp. This is a "nice to have '' since we can use components from other projects and we can reuse our own components.
Returning HTML/CSS/JS via the flask api
This will probably be the most effort since we have to do everything by hand. This will also give more coupling between our modules since everything happens on the api side. We already don't see why this is better than OpenWC so we stop researching this.
React
React looks alot like OpenWC since it also is component-based. React is a lot quicker to use than OpenWC since you don't need to use all of the life cycles. This is automatically managed in React. Since our web app will only be a small menu we don't need a lot of complicated things. React can be used to quickly make a working product. Our software developer has also used this before.
Our pick
Since React is the quickest in realising all of our needs and our software developer has the most experience with this technology, this will be our pick.
The Webapp
We would need a few simple pages where you can find information of robots, games and where you can create games. We have also added a place for live camera feed of an ongoing game(if ip is configured correctly).
WireFrame of the home page
WireFrame of the create game page
WireFrame of the game overview page
Usage of the camera feed
You need to download droidcam on your mobile device. After you did that you need to go to the game overview page and fill in the lowest ip adress / link. (http://192.168.178.11:4747/video) in the image below.
Sources
Allmer, T., Den Bakker, L., Johnson, W., Powers, B., & Schilp, P. (2021). open-wc. Open Web Components. Consulted on 5 november 2021, from https://open-wc.org/
ReactJs Team. (2021). ReactJS. Consulted on 5 november 2021, from https://reactjs.org/
Open-WC. (2021). Github open-wc. Github open-wc. Consulted on 5 november 2021, from https://github.com/open-wc/open-wc