undefined
The next piece of road block I need to solve is to containerize the debugging process, so every debug session will be isolated from each other. Some may argue that containerize may not be the best security model for executing arbitrary code, but weak is better than nothing.
I probably don’t have too much interesting things to share here, the main idea of this method is:
- Allocate a random port on the server. This port will be used as a bridge to connect the Node debugger process and the Web UI.
- Create a container with the input code from the user.
- Start the Node debug process, running on the allocated port above.
- From the Web UI, connect to the containerized Node Debugger through WebSocket to start debugging.
- When the debug process is done, signal the server so it can stop and delete that container.
With the backend ready, I quickly came up with a Web UI prototype using React and Hooks.
Writing UI using Function Component and Hooks allows you to quickly build up something that you can actually touch and run, for the only reason: Less code to write.
When it come to a more complex UI things, like handling the communication across components, continuously manipulate the state, or messing with some external changing variables such as CodeMirror editor instance or WebSocket connection, the code messing up quickly with full of hacks and workarounds.
The main reason is because the closure nature of Hooks, variables tends to keep its original values at the time the hook being created, for example, in a useEffect, and a dependency array is something you’d be looking to. This is, however, still tricky enough, for example, there are things that I want my useEffect block being depends on but in different count of times.
useEffect(() => {
...
}, [ socket, consoleMessages ]);
In this example, the useEffect depends on socket and consoleMessages, but I only want it to to be updated on socket only once, and updated on consoleMessages changes all the time.
Eventually, I ended up with a Single Source File application – literally everything inside an index.tsx. And the development process starts to slow down, mostly because the spagetti code that coupling everywhere, time to navigate the code starts to increase as well. So I decided that it’s time for a rewrite with a better architecture.