Browser-Based IDEs (programming environments)

As I wrote about earlier, HTML5 (Javascript, Canvas, WebGL, etc.) is allowing people to create rich, interactive applications that run in your browser and don’t require flash or java. Cloud computing (such as Google App Engine and others) and AJAX are also allowing us to run things in our browser that before were typically run on the desktop because they require quickly saving and retrieving a bunch of info. Google docs, gmail, etc.

So it’s not so surprising that there are now even some programming environments starting to emerge that you can run and develop from inside your browser. These are websites where you can edit code, run your application, and sometimes even instantly share your application for others to try. This is much more convenient than the typical process of downloading and installing a huge IDE such as Eclipse or Netbeans, and then compiling and packaging and distributing/hosting an application on your own.  Browser-based environments are also nice for students at schools, because they typically are not given permission to download and install software on their own, but can run these tools in the browser, as long as they aren’t blocked by IT.  I imagine it won’t be too long before we start seeing kid-friendly browser-based IDEs start to appear.

UPDATED LIST (December, 2011)

This mostly lists browser-based development tools, but also a few desktop applications that help you create HTML5 applications or animations/games:

• HTML5 animation design tools (with a timeline like the flash designer)
• https://www.mugeda.com/ – recently announced
• http://editroom.splatcollision.com/
• http://mozillapopcorn.org/  - supplement videos with events on a timeline
• (desktop app, preview version is free) http://labs.adobe.com/technologies/edge/
• (desktop app, $199) http://www.sencha.com/products/animator
• (mac only app, $30) http://tumultco.com/hype/
• visual designers for websites
• http://eenox.net/home  - design mobile-friendly websites
• http://www.drupalgardens.com/  - lets you visually edit all the css/style properties
• http://maqetta.org/  - visual studio-like IDE for dojo user interfaces
• programming / IDEs
• http://c9.io/ - Cloud 9
• http://eclipse.org/orion/
• http://www.akshell.com/ide/
• http://www.erbix.com/js/
• http://www.pageforest.com/
• html5 game programming
• http://www.playmycode.com/ (uses a language based on Ruby called Quby)
• http://pixieengine.com/ (coffeescript)
• (desktop app) http://www.scirra.com/construct2
• mobile app creation
• http://www.appsbar.com/
• other mobile app builder/services: http://bit.ly/sdHaUX
• web page development – edit HTML/CSS/JS files on a server
• https://kodingen.com/
• http://www.coderun.com/
• I switched from Kodingen to DropBox for sharing web pages (including saved Adobe Edge projects): http://www.dropbox.com/help/16
• html/css/javascript editors – quickly run & share snippets
• http://jsfiddle.net/
• http://jsdo.it/
• http://jsbin.com/
• animation programming – processingjs.org
• http://sketchpad.cc/
• http://p.altcanvas.com/
• alternative languages for javascript – some of which have online editors/compilers:
• https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
• see also the jswiki: https://github.com/bebraw/jswiki
• announced but not available yet
• http://www.animatable.com/
• http://www.thepixeljet.com/preview/
• http://html5.yoyogames.com/
• http://www.automatoon.com/ – will be re-released at teachtoon.com

OLD NOTES:

Here are some browser-based coding environments I know about. All are free and most are open source.

• [Some updates in July 2011, over a year since this was originally posted:]
• Cloud9 IDE – create server-side node.js javascript apps in this browser-based development environment
• Erbix - another Javascript App editor
• Akshell – and another Javascript application editor
• Kodingen – edit php/html/css/etc. files on the server via the browser (I used this in my web development class)
• Maqetta – visual HTML5 editor, builds on the dojo toolkit
• SketchPad.cc – etherpad + processing.js (I used this in my html5 class)
• Zeon.js – still early in development, not open source – analyzes javascript source code for issues
• other javascript/html/css online editors: jsFiddle, jsdo.it, jsbin
• browser-based game development sites: Pixie (coffeescript), Play My Code (uses a ruby-like language called quby)
• Alternative languages that compile to javascript - a huge list, some of which let you edit and compile scripts in the browser.
• HasCanvas – an IDE for Processing.js. Processing is a very popular java-based development environment, with a free IDE you can download. Processing.js is a port of that to javascript. With either one, you can create animations and artwork and so forth. HasCanvas has a weird interface – hover over the arrows on the left side to show the source code for any animation, and use your mouse wheel to scroll. Click Browse to see other scripts.
• Bespin – [replaced by Ace editor, used in cloud9 IDE listed above] an editor from Mozilla that you can use either on their site, or embed into your own site.
• CodeRun – Develop ASP.NET, php and Ajax applications in your browser. Not open source.
• App Inventor for Android – This is unique in that it has a visual designer, along with a visual blocks-based language for creating applications (similar to that in Lego Mindstorms and Scratch). From this description it does appear to be web-based, although you use it to develop applications that run on an Android cell phone, not the browser. Here’s a course that used the tool last fall, along with the beginnings of a textbook. Unfortunately, it’s still only in private testing and not available to the public. I’ve signed up to use it with students in my multimedia development course this fall. If that works out I’ll post all the resources and videos online, just like all my courses.
• There are also many programming command line interpreters (repls – read-eval-print loop) that work in the browser, such as Lord of the REPLs (lotrepls), which lets you try many different languages out.
• Some other browser-based IDEs: Ares (Palm WebOS development), Zembly (discontinued when Sun was bought out by Oracle), Yahoo Application Platform and Yahoo Pipes, Glowday Google widget designer…