Frances: A tool for learning code generation and execution

About

Frances¹ is a web-based visualization tool for code generation and execution. It graphically illustrates key differences between familiar high-level languages and unfamiliar low-level languages and also illustrates how familiar high-level programs behave on real architectures. Key to this tool is the use of a simple web interface that requires no setup, easing course adoption hurdles. We also include several features that further enhance its usefulness in a classroom setting. These features include graphical relationships between high-level code and machine code, clearly illustrated step by step machine state transitions, color coding to make instruction behavior clear, and illustration of pointers.

Frances has already been used in classroom settings where it showed benefits. Most notably, in our experimental setting, students with no computer architecture course experience were able to complete lessons using Frances with no guidance.

How to Use?

You can start using Frances by just clicking the link on the left that will take you to our web-based tool. No installation is necessary. When you follow these links you should see an interface that looks similar to the figure below. We have also made some lessons available that make use of Frances.

Figure 1: Example usage of Frances. Left side shows user input code and legend. Middle part shows the corresponding assembly code. Right side shows the machine state.

Main Features

We have designed Frances to help students understand low-level languages, language translation (code generation), and computer architecture by showing how familiar high-level code maps to low-level code and how that low-level code behaves on a target architecture. To enable these goals, Frances

• presents a visualization of the low-level code that maintains actual target code ordering,
• differentiates between types of run-time paths in the low-level code,
• color codes instruction blocks by their high-level control constructs,
• shows how each individual machine instruction impacts the machine state,
• displays the components of the system state in a logical organization, illustrating several important concepts,
• allows for both forward and backward stepping through program steps, which allows students to revisit complicated steps and processes,
• color codes individual parts of the machine state making the impact of each instruction clear, and
• clearly illustrates difficult concepts surrounding addresses (e.g. pointers and stack) using color coded arrows.

Contact and Feedback

If you find any problems, would like to see any features added, or just have general comments, please email us at frances@iastate.edu. Also, we are very interested to hear who is using our tool and in what ways. This will help us develop future versions of this tool.

¹ We named the tool Frances in honor of Frances E. Allen. She received the Turning award for pioneering contributions to the theory and practice of optimizing compiler techniques that laid the foundation for modern optimizing compilers and automatic parallel execution.