An online code editor and visual debugger which automatically selects and displays examples of values flowing through your code as you type it
Alfie was originally designed for the Advent of Code, an algorithmic code challenge that occurs every year during December. Algorithmic problems are suitable for Alfie as the problems often involve simple data types such as numbers and strings.
Professional developers are often skeptical about online IDEs and one key concern is integration with their workflow. If the Alfie editor did not come with many of the features developers are so used to, it would be a hard sell. This meant that we spent a lot of time building out editor features rather than improving the runtime visualisation.
Alfie was good with number and strings, but it can be difficult to visualise complex objects. One goal of Alfie was to keep the runtime data as closley connected the source code as possible. We did this by showing the runtime values immedatley to the right of the line of code they came from. This means that each piece of data visualized can only take up a single line. More complex data structures would not fit elegantly.
Algorithmic problems often involve very large datasets. In the case of Advent of Code, users were provided a few small datasets for testing and debugging of the solution. A second large dataset was used to find the actual solution. Alfie shined when debugging the solution with the small dataset. However, the large dataset would take drastically longer than just running the code in Node. We wanted users to be able to use Alfie to debug and develop their solution as well as find the final answer to the problem. After some trial and error we believe we struck a good balance between usefulness, usability, and speed by optimising the transpiler to only trace what we deemed to be useful. For example, we wouldn't trace the 1,000,000th iteration of a loop.
Visualising how data is flowing through your the internals of your application is extermly useful. Alfie currently works well for what it was designed for (algorithmic problems), but we feel like the core concepts could be incorporated into a tool for building fully featured web applications. Advanced debugging tools and runtime analysis are perfect for advanced developer and low code tools. Here are a few ideas where an Alfie-like visualisation could be useful: