How does a programmer work? What does he or she do? This questions are always the hardest to explain to people that haven’t had much contact with a computer. Of course we could explain that a programmer is the person that “codes an application”, and we can show examples of applications in a PC. But what does “code an applications” mean? How do you exactly code it? This is the hardest part to explain, as even if we show code to the person we are explaining to, it requires coding knowledge, and years of practicing abstractions to understand what that code actually does.
Real Code is an application that aims to allow people understand what coding is, and how does it work by providing tangible examples that people can play with.
The idea was born as we wanted to encourage children into the wonderful world of computer programming. We needed a way to show the kids some code, allow them to play with it, and see the results immediately, without the problems of compiling, or breaking the applications, as this is one of the main things that make coding look complicated.
That was when we saw Bret Victor’s Inventing on Principle talk. We knew immediately that that was the way to go, a simple drawing, that the kids were able to manipulate at will, in a secure and simple way.
As Victor, we splitted the screen at half. The left part, was going to be a drawing in HTML5 canvas, the right part, was going to be the code producing that draw. We use the ACE editor, from ajax.org to to show the code with syntax highlighting. This framework was quite useful and it solved us many of the things we were needing in the editor of our own.
We decided to lock the editor, so code could not be manually modified, instead, when clicking on any number a slider popped up, allowing the user to modify the value by changing the slider. The same was true for strings that represented colors, where a color picker popped out.
In a last attempt to make the code of the drawing simpler, we extended the canvas, so that it supported functions for simple drawing, such as drawLine, o drawCircle, something that was hard to do, and to explain to kids, if was not done in this way. For the children, those functions where part of the canvas API, and they had always been there, as they were not able to see their definition.
The team was splitted in different locations, the PM’s José Dominguez and Claudia Virginia Gonzalez where in Laminar, Buenos Aires, as well as Alan Rodas Bonjour, one of the developer. Mariano Gigli was working from Rosario, and Miller Moreno Cano was working from Bogotá, completing the developers team.
As Alan and Mariano worked on the backend part of the application, Miller worked on prototypes for the drawing. Jose and Virginia suggested a landscape, as it would be something simple, yet modifiable enough to provide the results that we were looking for. Alan and Mariano used an SVN repository to work, and once the backend was mostly done, the code of Miller was integrated.
The result was a real fancy web application, capable of running in chrome and firefox, and that supported touchscreen monitors. Real Code was then chosen to be showed in Tecnópolis, an argentinian science and technology fair that is free for everybody. During winter vacations, a lot of kids passed by the CESSI stand at the Parque del Conocimiento (Knowledge Park) and played with the AIO computer with a touchscreen monitor that hosted Real Code.
We discover along the way, that the app was not only useful for showing code to kids, but also as a tool for ourselves. At the last steps, the drawing was modified using Real Code itself, as we have immediate feedback of how the drawing will end up looking. This is a field that we may explore in the future of the application.
By the first time, kids were able to see what a programmer sees, in an interactive, and fun way. The project was a success and further projects to engage children in the IT world may be thought.