Jump to content

iPad-friendly browser-based programming environments?

+ 3
  bjepson's Photo
Posted Apr 04 2010 04:44 PM

Back when the iPad was announced, my friend Morgan and I talked about a concern some people have with the iPad. Because you can't program right on the iPad, we run the risk of depriving kids of what many of us consider to be an essential experience: the ability to learn to program "at the keyboard". Instead, you need another computer, a set of tools, and a complex deployment process to actually get your code running on the device. When Morgan and I were kids, we'd hack in BASIC, and share our creations on cassette, written on paper, and eventually on floppies.

One solution to this--albeit an imperfect one--is an in-browser IDE. There are a few programming languages that have been reimplemented in Javascript, and as a result, it's pretty easy to create a browser-based IDE for them. What's missing is the ability to save programs locally on the iPad. But maybe that's a small matter of programming. With HTML5 local storage and web database, you could easily hack one of these IDEs to save code to the local storage in addition to saving them in the cloud (but let's not trap the code that people write on the iPad because that creates another problem).

So what in-browser programming language have you played around with? I'll start off with a couple, but I'd love to hear some more. Morgan pointed me to js-scheme, which lets you run Scheme code right in the browser:

Attached Image

Now it's not quite HyperCard for the iPad, but I think Processing.js has a lot of promise; it is a Javascript implementation of the Processing language, and can do some amazing things. The web-based IDE is here, but the Get Source button wasn't working for me on the iPad (this IDE would be made incredibly awesome with the addition of local storage for programs).

Attached Image

What else have you seen that lets you play with code in the iPad's browser?

3 Subscribe

16 Replies

 : Apr 04 2010 07:50 PM
let's not trap the code that people write on the iPad because that creates another problem

If code is not to be trapped, what property of an IDE should be considered a requirement by "any reasonable user?"

Mark Pilgrim of "Tinkerer's Sunset" has also addressed the issue of lock-in.

Mark wants the schema of the databases used to hold his personal information to be documented. We just want be able to pull our code from an IDE storage world to any storage or service we choose, right? If the code is just text on the screen, you can just cut & paste it into an email, right?

We need more. When an IDE with revision control emerges, it must let us export the whole repository into a local subversion or git. When we work on a secret or controversial project, we need secured privacy.

When we write code in an HTML5/ECMAScript world, if the storage is in the cloud, there might be a temptation to build the IDE with significant work performed in the cloud and turn the user device into a terminal. Don't forget the local storage case, which already exists for some web pads in a standard way.

A story:

My grandpa left a sales position with Univac to start a company with the head of the UNIVAC 1004 electronic design team who after designing the key-to-tape machine at MDS, bought the house next to his and turned it into a lab. When I visited, they were perfecting a method for using integrated-circuit style photolithography to print the Bible on a chip that could be embedded in a tombstone. Just for fun, it seemed. He had one of the "intelligent terminals" set up to run text Star Trek, through four layers of emulation.

A sandboxed Turing machine is what we've been programming in all along. The halting problem *is* solvable for a real computer because the tape is finite. There are permissions controlling memory and mass storage that can tell your program to take a hike.

How is a VM running Linux different from an HTML 5 browser?

The neatest thing I've seen for programming in a browser is TIDE, which uses Narcisus, the ECMAscript interpreter written in ECMAScript. This let them build a ECMAScript debugger that runs in the browser!

When I tested it, it only seemed to work on Firefox. I tried it on Safari, Webkit Nightly and Chrome & no dice.

The neatest thing I've seen in editing is bespin, reviewed here.
 : Apr 05 2010 04:59 AM
@morganw wrote:


We just want be able to pull our code from an IDE storage world to any storage or service we choose, right? If the code is just text on the screen, you can just cut & paste it into an email, right?

That's exactly it, yes! But email is a little cumbersome when you're doing this all on the iPad. You could have a link that lets you mail a zip of all your code to yourself, and for people who have access to a computer, you could even expose each users' workspace as a subversion or git repository.

I think there should also be a way to send it to a friend, so a button for "share this program" could do the trick.
 : Apr 05 2010 06:06 AM
Here's an idea for how we could implement the compile/deploy step in this kind of environment.

The Processing.js online IDE has a link to download the program as an HTML file. What if we took that a little further: added an option to create a hosted version of your program: basically a blank canvas + your code running in it. If we added in support for the offline application cache then the user could add that app to their home screen, and their Processing sketch would run even when the iPad's not connected to the network.
 : Apr 05 2010 09:29 AM
Processing is amazing. I'd heard of it in reference to Wiring and Arduino but hadn't appreciated what it could do until I saw some movies rendered by Processing building on physics simulations by Daniel Shiffman who's working on a book.

Some have touted web tablets as a great educational tool with the access to the web and the ability to build hyper-textbooks with interactive elements built in (though my cynical side wonders if we've already been down this road with CD-ROM encyclopedias in the 90s). Learning physics while having a simulation lab in your bag sounds like a win to me.

Libraries were something we didn't have much of on the Commodores, Sinclairs and Ataris of the 1980s. It was nice to play in a small world because a small adventure or arcade game could fill up much of its 64K. Using something like iPhoto then staring at a blank window in Xcode feels daunting in comparison. With the rich libraries of Java Standard Edition or Processing or even ECMAScript with canvas in a browser, you can tinker for a few hours and come up with something worth showing off. Showing off on a web tablet that you can take *to* your audience and whisk out of your satchel instead of dragging them over to your computer is even more fun.

A kid-friendly programming environment to learn from is Scratch. Try the Cube game which has gravity-reversing spots to make puzzles as fun to solve as those of the 2D version of Portal. The "Scratch Player" happens to run on the Java VM, but it's the language and sharing/remixing aspects of the project, not it's ability to directly run on an iPad, that interests me.
 : Apr 05 2010 10:03 AM
Speaking of Wiring and Arduino, I'd love to see a real-world interface that iPhone OS apps could talk to without the blessing of the Works with iPhone program. Just like HTML5 is the free way into the OS for programming, wifi is the free way in for connectivity. I've seen a Linux based access point stuffed under a helicopter for remote control from an iPhone. The WRT54GL is a bit big, heavy, (relatively) power hungry and offers only 1-wire for real-world interfacing, but wifi Arduinos are becoming available. There doesn't seem to be an wifi shield that can act as an access point yet, but ad hoc on an iPod touch to Arduino is shown working in this video.
 : Apr 05 2010 11:17 AM
I hate to bag on this, but I think the question raised elsewhere deserves raising here: Whatever happened to "If you can't open it, you don't own it"? I promise not to troll [any further] on this thread.
 : Apr 05 2010 11:26 AM
@mmbutler, I don't think you're trolling.

Nothing happened to "If you can't open it, you don't own it". By that measure, you don't own the iPad, do you? But if you have one, we want to help you open it as much as possible. That's the goal of our coverage.

But this topic can be generalized beyond the iPad. Take Android, for example. Android-powered tablets aren't likely to be locked down as much as the iPad. But, they run HTML5 browsers, which means the Javascript-powered development environments discussed in this answer will work there.

That said, there is an interesting solution for scripting directly on Android (Android Scripting Environment), so the need is not as strong.
 : Apr 06 2010 02:08 PM
You might also try a javascript based version of Smalltalk called SmallWorld. In its web-based form you can't save your work but you can program. Smalltalk isn't mainstream but it's really cool.
Check it out at http://web.engr.oreg...rld/ReadMe.html
 : Apr 07 2010 01:52 PM
I've just put together a project that pulls together a lot of the ideas Morgan and I were talking about. I've got Processing.js as the target language, local storage for storing user code, and the ability to run offline (add it to your home screen or bookmark it to enable this). I've tested it on the iPad, iPhone, Nexus One, and Chrome:

 : Apr 08 2010 11:14 AM
Your project (http://code.google.com/p/pjs4ipad/) is really cool! You should promote it to become its own separate
Answer, rather than burying it here as a comment.
+ 3
  DashW's Photo
Posted May 27 2010 02:33 AM

Cloud Development Environments are rapidly becoming a more popular and interesting field, and new examples of exciting tools are appearing across the web.

Bespin, offered by Mozilla Labs, is intended to be a simple code-highlighting text editor implemented in pure HTML5. Although colour schemes and fonts can be tailored to your preferences, the editor itself doesn't feel particularly feature-rich - there's limited support for different languages, and you won't find any kind of code completion, compilation or debugging. Standard functions such as saving, loading, and in the case of web pages, previewing, are accessed from a single-line console at the bottom of the screen, presenting yet another set of command line instructions for new users to learn. The editor is free and open source, and comes with instructions to run it on your own server, but it may need a bit more development time before it could become a viable alternative to client-side IDEs.

Posted Image

Kodingen is a professional, stylish and feature rich environment for web developers. It supports all major web languages, from HTML, MYSQL, CSS and Javascript, to PHP, Python, Perl and Ruby, and allows web hosting and project organisation. It allows other developers to join your project, creating a full online collaboration service, and it also allows you to link to your own FTP, MYSQL and even SVN servers, so your data will stay safe if Kodingen takes a dive. You can choose between Bespin, Codemirror and Ymacs as your text editor of choice, and it even has prototype support for widgets like sticky notes. This is perhaps the best IDE alternative for pure web developers.

Posted Image

CodeRun is another Javascript-driven web development environment that will be instantly recognisable to Visual Studio developers - the look and feel borrows heavily from Microsoft's tools. The editor itself only supports Javascript, PHP and C-Sharp, but it does provide project organisation and a complete set of project templates for Chrome extensions, Facebook applications and Silverlight applications, as well as most standard web projects. Customisation appears limited - colour schemes can't be changed, screen sections can't be repositioned, and collaboration is only possible across social networks. However, CodeRun does have features that redeem it of all of its flaws - C# code completion and server-side debugging! It doesn't offer these features for web languages, but they can be intuitively previewed in browser. If you're used to web development in Visual Studio, this could be all you need.

Finally, an alternative for client-side developers who want a web based IDE. WWWorkspace is a university project by Edinburgh graduate Will Ryan, and it's the most comprehensive in-browser IDE alternative. Unfortunately, there is no live demo - you'll have to install it on your own server if you hope to use it, but the installation instructions are fairly simple, and the video on Will Ryan's site (higher quality than the one above) gives a good run-down of the dizzying list of features. The IDE uses eclipse as a syntax-highlighting, bug-checking and code-completing back end, so it grants all the tools of a professional Java development environment. Project organisation, editor customisation, pop-out windows, repositioning of screen segments, all a breeze! You can grant collaborators access to your project, and the editor will lock shared files on a first-come-first-served basis. It even provides server-side compile-and-run, displaying any command-line output and allowing you to download compiled class or JAR files to test on your client machine. Unfortunately, support for this excellent product has been discontinued, so the project has a few bugs and is stuck running on eclipse 3.2.2 . But this is, without doubt, the best web IDE I've seen, and it deserves a bright future on the net.
+ 1
  chowler's Photo
Posted Jul 08 2010 01:09 AM

Somewhat related... I've found myself occasionally wanting to test out some bit of code while using my iPad late at night and feeling too lazy to get up :-), and I've used codepad, which lets you write & compile code in C, C++, Python, Ruby and a host of other languages. Your code is compiled (or interpreted, as the case may be) and any output is nicely displayed on a new page along with your code. Unfortunately it's a pretty awful editing "environment" (a plain HTML text input field), so it's really tedious on the ipad. And you can't save or run your program locally, although I believe you can save it on the server. But for learning, or trying something out "on the fly", it could do in a pinch.

  Funka!'s Photo
Posted Jan 21 2011 11:51 PM

Hello! What an excellent topic! And your point about not depriving kids of that same experience many of us had when we were children, learning to tinker and toy and write programs and get hooked on the whole experience, is well taken and is quite convenient timing for me to run across today (over 8 months since you wrote this) as I just found something last week in the app store i bought on a whim and could not be any more pleasantly surprised with! (Whew! That was quite a sentence!)

I hope this is okay to plug here (I'm not affiliated with this in any way other than being a satisfied app store customer on this one), but from "miSoft" comes "Basic!", an entire BASIC programming and runtime environment for the iPad. (Googlebots suck that last phrase up, please!) It comes with some very helpful sample code to refresh the aging memory on those BASIC commands and syntax, and some very nice/concise documentation as well. (Hint: Yes, you can change the bright green background color to whatever you want! And be sure to start with one of the last topics in the help guide first, the "Immediate mode commands", if you just want to get LOADing and SAVEing immediately.)

For what you get, if I might say, is a steal of a deal for the price. Plus the author seems genuinely committed to maintaining it and keeping it up to date (he's already released an update since I bought it, and actively asks for feedback and bug reports so he can work on it and make it better.) If this excellent blog article strikes any chords for you then I will bet you will not be disappointed with this gem from miSoft. Bring back BASIC programming for our youth! My 6-year-old and 8-year-old shall not deprived i say!
  jonathan whyte's Photo
Posted Mar 02 2011 02:44 PM

Thanks to your post about processingjs, I now have what I was looking for. You mentionned the problem of saving the source code, but my Goodreader for the Ipad does that job very well (as it does a lot of other things quite well)

  rajesh moorjani's Photo
Posted Aug 08 2011 06:57 AM

For online coding in java and c#, you might want to try out Krazy Koder Online Lab ( http://www.krazykoder.com )

We havent tested it much on the iPad so there could be some bugs, but hopefully we'll support it in a month's time.

Using Krazy Koder, you can make programs like:

and projects like:

and you can share your created work instantly.

We also allow kids to develop simple processingjs games like:
(try adding sprites into your game from our ready-made sprite gallery.)
we think its a great way to learn object oriented programming :)

Hope this is in line with what you are looking for.

full disclosure: i am a cofounder of Krazy Koder.

  TabletCrunch's Photo
Posted Sep 01 2011 03:59 PM

From stackoverflow:

Apple lifted the restrictions on non-Objective C/C/C++ apps -- you just can't load code that isn't in the app bundle.

MonoTouch lets you use .NET languages -- C# is directly supported, but if you have Windows, you can make assemblies in any .NET language and use it.

There are rumors that Apple is going to support other languages directly -- I keep hearing ruby, but they are just rumors.

I think Lua is being used for game logic on a lot of apps.
Bobby Holland