Wednesday, January 14, 2009

A true online programming tutorial

Here is an idea I have been mulling over for a while that would profit from your opinions and insights. I am a keen advocate of teaching computer programming to children (of all ages) and I have started to collect together a list of resources that support this goal. Note that they all require downloading and installing: already a barrier to entry for many people and difficult to do in many environments. We need something as accessible as the BASIC of the first home computer revolution if we are to grab the attention of the next generation.

How about a programming environment in the browser itself using JScript? Imagine a coding window right there in the page where the obscure HTML tags and other "magic words" could be dispensed with. Picture if you will an output window, for the inevitable "Rupert is cool!" loop demo or flying bitmaps. Can you dig it?

Imagine it looking something like this, but with the awesomeness turned up to 11:







In no particular order, here are my notes:
  • Graphics could be done using VML/SVG and some simple BASIC-like extensions Graphics.Line(0, 0, 100, 100) perhaps? Graphics make it much clearer to see what is going on, and much less dull early on.
  • Bitmap support could also be added, perhaps including an online gallery of shapes and pictures (like Scratch does so well).
  • Programs could be saved to the server for easy retrieval and organization.
  • Not sure how to protect against the code hanging (JScript is single threaded), but auto-saving would allow an [F5] refresh to restore the page if it did hang.
  • A simple collection of tutorials that inject the code into the page could allow the novice user to make a contribution almost immediately. If the page defaulted to the "Hello World" example, the user could swap "World" for "Bob" and suddenly they are programming. A uniquely low barrier to entry.
  • JScript is a real language, and by some measures the most popular language in the world. Skills learnt in these tutorials would be valuable for both amateurs and future professionals. It is C-like, which makes it highly transferable to other popular languages.
  • JScript doesn't support object orientation. I have heard it argued that people should learn the OO approach from the start rather than the more common approach of starting with procedural programming.
  • Many people argue that languages like Python and Ruby are much better learning languages, and I don't disagree, but there is still a considerable barrier to entry. Peter Norvig has a nice summary of this in the appendix of his excellent post about learning to program.
  • The HTML DOM model is an implicit part of the language (in the browser at least), but helper functions like Write and WriteLine instead of targetDiv.innerHTML might improve accessibility early on.
All comments welcome! I would be surprised if somebody hadn't done something similar somewhere.

EDIT 23 Feb 2009. Made the example work for browsers other than IE: The innerText property is IE specific, the solution is to use the "value" property.

No comments: