Developing Interactive, Scalable HTML5 Apps on the Cheap: Serverless, Unhosted, No Backend, BAAS, PAAS, Oh My
I’ve written before how HTML5 is the platform of the future for developing interactive educational apps, and you can even develop (code) in your browser (or chromebook) now. Well, the future is here, and HTML5 is still looking to be the best option, but there are some wrinkles. One is the slow pace of multimedia support in HTML5, in particular audio (a counterexample is 3D, in the form of WebGL, which is coming along faster than I expected). Two other things are actually good, but still challenging problems – 1) the explosion of HTML5 and Javascript frameworks: Meteor.js, AngularJS, Ember, Backbone, CanJS, Knockout, yadda yadda yadda (I’m particularly excited about Meteor, but none of these frameworks seem to have “ease of use” in their vocabulary, and accessibility is usually an afterthought, if considered at all – Dojo being one exception), and 2) the explosion of languages that compile to JavaScript: Coffeescript, Dart, TypeScript, yadda yadda yadda (Dart is one that interests me at the moment).
But one problem in particular has been my biggest hurdle, which I discuss more here: the cost of scalable hosting. With “old-fashioned” desktop apps or single-user applets or web animations or games, you can fire and forget it. Develop your app or site, slap it up on the web, and people download it or visit it and use it. Static web hosting is practically free (like this WordPress blog). However, if you want social features, persistence (database), or other things like that, you need to have a database or other backend at minimum, and it needs to be able to scale. I’ve always had my hopes up for Drupal - it is still my favorite go-to solution for social but non-interactive web applications, and several folks are using Drupal as a backend for HTML5 or mobile apps, but it is not so easy or so cheap to scale up. A lighter weight alternative to Drupal, perhaps built on node.js and MongoDB, has not yet emerged.
The Serverless, Unhosted, No Backend Options
Anyway, so, one hurdle to developing interactive educational HTML5 applications on the web is the cost of scalability. Web hosting is cheap (or even free) at the beginning, but can quickly spiral out of control and sometimes lock you into a proprietary platform (like google appengine). I could get a grant, but what about when the funding runs out? I could beg for money by posting my ugly mug at the top of every page like Jimmy Wales did on Wikipedia, but I’m not a sadist. I’m not a venture capitalist/entrepreneur, and unfortunately, I’m not at a university that supports or provides web application hosting (I used to be able to just run apps off the computer under my desk as an undergrad, grad, and professor, or by running cheap virtual private servers for as little as $15/year when scaling up wasn’t much of a concern).
Here are some sites that describe lower-cost, open source, and scalable cloud hosting solutions, by either letting visitors host their own data (in their browser’s local cache, or on dropbox or google drive or another site), or by using a cheaper backend-as-a-service that your front-end connects to. [Really, none of these (except WebP2P) are completely "serverless", and many do not eliminate the costs, either, but it is progress.] Various terms have been used for some of these concepts: serverless, no backend, unhosted, and there are also new and cheaper cloud hosting services that provide a backend-as-a-service (BAAS) or a platform-as-a-service (PAAS).
- No Backend – “a new approach to build data driven apps without thinking backend.” See the solutions and examples listed.
- Unhosted – “freedom from web 2.0′s monopoly platforms” – came before the “No Backend” movement and looks to be completely open source and not tied to one third-party platform. Their site also lists various tools and example apps that let users control their own data.
- Nimbusbase is an interesting option that uses Google Drive or Dropbox to store your user’s data.
- And here’s a sample PouchDB & CouchDB-based conference scheduling app that also works offline. (Just as some have stated a mantra that we should develop HTML5 applications “mobile first“, some have also stated that we should try to develop with “offline first” support, too, and to that I would also add “accessibility first“)
- WebP2P (peer-to-peer) is an effort that builds on top of WebRTC (real-time communication) to allow for truly serverless web apps – apps that connect from browser to browser. It is still very new, and only supported by bleeding edge versions of Chrome and Firefox (although there is a WebRTC datachannel polyfill to fill in some of the functionality for other browsers). See the WebP2P mailing list and WebRCT Google+ page for more info and examples.
- ShareIt, based on DirtyShare, is a proof of concept that allows you to share files from your browser
- PeerJS wraps the WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer data API.
- Open Peer is another WebRTC-based P2P Protocol & Specification
- GrimWire is a RESTful Browser OS that does Peer-to-peer over WebRTC. It is built on the Local framework, which allows you to securely run user applications on the page using Web Workers.
- KadOH (Kademlia Over HTTP) is a framework to build P2P applications for browsers and node.js. By implementing the basis of the Kademlia DHT used for decentralized peer-to-peer networks.
- hackview is a webRTC based multi-person video chat with a collaborative editor
- There are several other WebRCT based video chat apps and demos: appRTC is a basic demo, veckon is more polished, conversat.io adds a lunar lander game for you to play while waiting for others to join you, and the folks at Mozilla have a widget to embed video chat into your own website.
- There are various WebRCT SIP/VOIP gateways becoming available.
- The AirTheremin uses WebRTC and the Web Audio API to let you control sounds using gestures in front of your webcam
- Data URIs – New browsers support very long URLs, and you can actually store quite a bit of data in it, such as text or even an image.
- Shortly is a serverless pastebin service that uses this technique
- Jot is a note-taking app that also lets you encrypt your notes with a password through a client-side javascript encryption library
- The webSemantics Data to URI Converter will convert your image to a data URL
- DataURL will similarly convert files or images to data URLs for embedding in HTML or CSS files
- Back toward more server-centered strategies, the Backend-as-a-Service (BAAS) and Platform-as-a-Service (PAAS) Wikipedia pages list several cloud hosting providers, none of which really solve the cost issue, because you still have to pay for scaling up, but they can be cheaper on the whole than prior solutions.
- OpenShift by RedHat is an open source PAAS that I have found very interesting, and it appears to be very reasonably priced (and free for the entry level). You can host anything with it, node.js, Drupal, Java, etc.
- The BAAS market appears to be a very hot topic at the moment (see this BAAS ecosystem map), especially after one provider, Parse, was bought out by Facebook. But Apstrata is one that looks interesting, because you only pay by the number of users you have (under 500 is free), and it is made to work with Dojo Toolkit (and other options), which as I mentioned is accessible and also incredibly full-featured.
For an older article that hinted on this “serverless” trend, see Why The Future Of Software And Apps Is Serverless, and a newer article explores the No Backend movement in more detail: NoBackend: Front-End First Web Development.
Some Exciting New HTML5/Javascript Projects
This an update of sorts on some things happening in the HTML5/Javascript world. First, here are some previous posts on this topic, to catch you up to speed:
- What is the Platform of the Future for Developing Interactive Graphical Educational Software? – I argue for HTML5/Javascript, since Java and Flash do not run on (all) mobile/tablet platforms
- A Snapshot of the HTML5/Javascript Universe – a listing of various open source projects, libraries, and tools available to use
- Browser-Based IDEs – this is the future, I believe – doing coding in the browser. Some updates are discussed below (cloud9 IDE, and a web-based version of eclipse)
Some Exciting New HTML5/Javascript and Related Projects
Here are some interesting new software projects and libraries and tools I’ve run across since my previous HTML5 post:
- Mobl
- http://www.mobl-lang.org/ and https://github.com/mobl
- Mobl is a new language that compiles down to javascript. It has a great number of interesting features, including static typing, IDE integration (Eclipse), reactive programming (binding), data persistence (the creator of Mobl Zef Hemel also created persistence.js), and it automatically converts synchronous to asynchronous code. This project is still under active development, but a great deal has already been implemented.
- Other Javascript-based languages and compilers
- Here is a long list: https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS Coffeescript is the most popular, but it sticks to the boundaries of what javascript handles (so no asynchronous macros or static typing or other big changes, for example)
- Modkit
- http://www.modk.it/software
- Modkit is basically a version of the Scratch graphical programming environment, but it works in the browser. Not yet released, but coming soon.
- WireIt
- http://neyric.github.com/wireit/ and https://github.com/neyric/wireit
- WireIt is a YUI-based library for creating graphical interfaces or libraries that are like draggable nodes or concept maps, except the nodes aren’t merely bubbles or text, they can be editors or controls or whatever.
- HTML5 Canvas libraries
- This is a rapidly evolving area as well. Any graphical, educational animation or simulation is going to revolve around the (relatively) new <canvas> tag in HTML5. There are several new canvas libraries out there, but there isn’t yet one clearly superior option that has the best of all the features of these libraries. Another factor is that the javascript universe is split between jquery and non-jquery libraries (jquery mobile is emerging as a top option for the non-canvas parts of an application interface). Some of these rely on jquery and some do not:
- CAAT http://labs.hyperandroid.com/animation and https://github.com/hyperandroid/CAAT/
- Unveil.js https://github.com/michael/unveil – Has support for not using up the processor when it is not needed
- easeljs http://easeljs.com/ – Created to be like flash with display lists and so forth, by flash developers. Works with jquery I believe.
- doodle.js http://lamberta.posterous.com/doodle-js and https://github.com/biilly/doodle-js
- artisan.js http://artisanjs.com/ and https://github.com/davidbrooks/Artisan
- sprite.js https://github.com/batiste/sprite.js
- https://github.com/dkln/canvas_library
- gury https://github.com/rsandor/gury – Works with jquery
- Javascript diagramming/flowchart libraries
- New game libraries
- Gesture recognition libraries
- Browser-based IDEs
- The Cloud9 IDE is under heavy development, and they’ve now opened up beta access to the hosted version of their javascript (node.js) based development environment. Their Ace editor component is available now as a separate project, as well, which has combined with Mozilla’s skywriter editor project.
- In June or so, look for an initial release of a web-based version of the Eclipse IDE, codenamed Orion
- 3D Multiuser World
- It has long been a holy grail of the edtech world to have a multi-user virtual world for students and teachers to use. There already is Second Life (and it’s mono-based open source clone OpenSim) and Open Wonderland (java-based), but now with WebGL, it’s possible to create such a thing that works in the browser, and Katalabs has done so, releasing a prototype of their open source virtual world software called Kataspace. Requires a recent version of firefox or chrome – see the Learning WebGL site for more info on WebGL.
- BASIC in the browser
- Some various compilers/editors for basic or visual-basic like languages that work in the browser:
- Pex: http://www.pexforfun.com/Page.aspx#learn/
- qb.js: QBASIC in the browser http://stevehanov.ca/blog/index.php?id=92
- Smalltalk/Squeak in the browser
- Proper
- http://quasipartikel.at/proper/
- Proper is a semantic text editor that works in the browser. See also other related libraries like substance, data, and unveil: https://github.com/michael
- Real-time Collaboration/Editing
- IBM just announced the Open Cooperative Web Framework, which uses Dojo and other libraries for real-time collaboration in the browser. Targeted for things like collaborating during a conference.
- Tutto is a real-time collaborative javascript shell, using websockets: http://tobyho.com/Tutti_-_Multiple_Browser_Interactive_Javascript_Shell
- Realie is a web-based real-time collaborative editor, similar to etherpad. Unlike etherpad, it is coded with node.js and websockets: http://laktek.com/2010/05/25/real-time-collaborative-editing-with-websockets-node-js-redis/
- Here are some other browser-based collaborative real-time editors: http://en.wikipedia.org/wiki/Collaborative_real-time_editor#Browser-based
- Java Projects
- These are not javascript at all but I thought I’d share them:
- Visage http://code.google.com/p/visage/ open source port of JavaFX, which declarative markup for creating user interfaces
- Openxion http://code.google.com/p/openxion/ Openxion is a java-based port of Hypercard (more accurately, hypercard’s language hypertalk). It is a command-line tool, it doesn’t support the graphical stuff (cards, etc.) hypercard did. Interestly, when javascript first came out it was touted as a ‘hypercard for the web’, but really it isn’t even close to what hypercard could do.
- Wireframes and Mockups, Sketches
- There are several new browser-based tools for visually designing interfaces (fake interfaces), some of which are HTML5-based or else Flash: http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/
- Some open source ones include: http://www.k-sketch.org/ http://www.mdaines.com/plumb/ http://dub.washington.edu:2007/projects/sketchwizard/
- OpenSocial/widget development tools
- Socialtext has an HTML5 widget builder: http://www.readwriteweb.com/enterprise/2010/12/socialtext-introduces-html5-ba.php
- Exo is a competitor to Socialtext, and they also have a web-based IDE: http://exoplatform.com/company/en/resource-viewer/Video-Demo/building-web-app-with-exo-platform-3-ide
- Others
- UJam is a site that lets you put together or record your own music from inside the browser: http://www.ujam.com/
- and of course there are several other html5-based ‘web 2.0′ tools for creating other stuff in the browser, like Aviary for image editing: http://www.aviary.com/
Review of Rushkoff’s Program or Be Programmed
Since at least the invention of BASIC and Logo in the 1960s, people, such as Seymour Papert, have made an argument that anyone can and should learn to how to program, and even make their own software applications. The argument is that we should think of it as a new literacy, a 4th “R” of sorts – computational thinking, or multimedia authoring, or just simply, programming. For me, it’s about knowing more than just how to make a powerpoint presentation or a web page, for example, and learning how to make an interactive animation or game or simulation and so forth. I’ve blogged about it before (Programming: The New Literacy) and wrote a chapter on the topic (Toward a Nation of Educoders).
The most recent work in this area is a short book by Douglas Rushkoff titled Program or Be Programmed, and it was originally a short talk (here’s the video, along with a newer video made after the book).
So I went into the book expecting to agree with most of the points. I’ve only gotten through the beginning pages so far and I do agree with many points, but there are also some problematic ones, especially relating to Rushkoff’s ideas about education and learning (which is not the focus of the book), and philosophy of technology.
Quotes
First here are some quotes from the early part of the book to get an idea, including some relating to education:
p.7 “When human beings acquired language, we learned not justhow to listen but how to speak. When we gained literacy, we learned not just how to read but how to write. And as we move into an increasingly digital reality, we must learn not just howto use programs but how to make them. In the emerging, highly programmed landscape ahead,you will either create the software or you will be the software. It’s really that simple: Program, or be programmed. Choose theformer, and you gain access to the control panel of civilization.”
p.8 “the people programmingthem take on an increasingly important role in shaping our world and how it works”
pp. 12-13 “The Axial Age invention of the twenty-two-letteralphabet did not lead to a society of literate Israelite readers,but a society of hearers, who would gather in the town squareto listen to the Torah scroll read to them by a rabbi. Yes, it wasbetter than being ignorant slaves, but it was a result far short ofthe medium’s real potential.Likewise, the invention of the printing press in theRenaissance led not to a society of writers but one of readers”
p. 13 “Computers and networks finally offer us the ability towrite. And we do write with them on our websites, blogs,and social networks. But the underlying capability of thecomputer era is actually programming—which almost none of us knows how to do.”
So far so good. Now on education:
p. 15 “elementary school boards adopt “laptop” curriculums lessbecause they believe that they’ll teach better than because they fear their students will miss out on something if theydon’t.”
This sounds like the same argument Larry Cuban made before (see this post), that schools only get educational technology and software to be “hip” and “with the times.”
Thoughts
The book seems to not be based on any research-guided understanding of how people learn. It’s very centered on a model of a disembodied brain controlling our behavior (see my previous post on embodied cognition), and he also seems to share Nicholas Carr’s assertion that technologies like Google are making us stupid:
“Our brains adapt to different situations.” “The outsourcing of our memory to machines expands the amount of data to which we have access, but degrades our brain’s own ability to remember things.”
A recent article surveyed numerous scholars and the majority of them thought Nicholas Carr was wrong – Google and similar tools are helping make us smarter.
He also completely buys into the digital natives vs. digital immigrants idea (refuted by many), including the idea that the brains of digital natives are “wired” differently:
p.32 “A brain learning on computers ends up wired differently than a brain learning on textbooks.”
Rushkoff argues that technology is a part of us and an extension of us, and yet he somehow simultaneously argues that we shouldn’t stay connected with technology:
p. 37 “She is already violating the first command by maintaining an “always on” relationship to her devices and networks.“
Rushkoff keeps mentioning the Torah and religion over and over again, and the role of technologies/media in shaping religion (sort of an extreme version of Eric Havelock’s Preface to Plato and others’ ideas I guess (like most of these types of books & journalism, there are little to no citations).
He is also probably of the belief that online education is inherently inferior to face to face education (which is not the case, see these meta-analyses and other potential misconceptions about learning and technology):
pp.41-42 “But those back-and-forth exchanges are occurring at a distance. They are better than nothing—particularly for people in unique situations—but they are not a replacement for real interaction.”
Basically, I’ve seen this type of book so many times I can’t count. It’s a book about some new X, from the perspective of some person who has never done X, doesn’t like X, or was born long before X. X might be video games, it might be open education, it might be embodied cognition, distance learning, educational technology, open access research and scholarship, web 2.0, etc.
A Snapshot of the HTML5/Javascript Universe
This is a follow-up to “What’s the Platform of the Future for Developing Interactive Graphical Educational Software?“, which I argued is HTML5, especially since java applets and flash don’t work or aren’t well supported on mobile and emerging tablet platforms (like the ipad and android tablets). I’m lumping many things under the “HTML5″ moniker, including the HTML5 Canvas element, WebGL for 3D, and various Javascript and CSS frameworks and libraries, even though most of the latter weren’t designed for HTML5 in particular.
Here’s a taste of the current tools and frameworks out there for developers interested in learning more about this platform. Probably the first thing you have to decide though, is are you more interested in running your HTML5 app on mobile phones and tablets (iPhone and iPad’s iOS, Android, and to some extent Blackberry and Palm), or in a regular desktop browser (Firefox, Chrome, Safari, IE…), or both? Some tools for mobile web app development are listed below.
Keeping Up with the HTML5/Javascript/CSS Universe
First, here are some places to keep up with this rapidly evolving field:
- http://twitter.com/edtechdev/html5 – A list of folks and organizations that develop javascript & html5 related things
- Learning WebGL – for keeping up with 3D developments
- Some discussion groups: http://groups.google.com/group/iphonewebdev , sitepoint forum, codingforums, etc.
- The Changelog – They have a regular podcast which often features interviews with developers of HTML tools such as some of the ones listed below (Sencha Touch, Coffeescript, etc.)
- There are several other javascript and css and html5 news sites and blogs out there, too, such as Badass Javascript.
General Javascript Application Frameworks & UI Toolkits
- JQuery – most popular and almost universal javascript framework. It lets you ‘select’ elements in the DOM to operate on, in a very functional way. See numerous jquery tutorials, books and plugins and jquery.ui. Has a little mobile support (touch/swipe).
- YUI – very java-like user interface toolkit from Yahoo, very complete and accessible. They have started adding mobile support (touch/swipe/etc).
- See this comparison of javascript frameworks for others such as Sproutcore, Dojo, qooxdoo, mootools, etc. Some other frameworks listed on that page actually involve coding in Java (or another language) which is converted to javascript, such as GWT and pyjamas.
- JS Optimizers – to compress/obfuscate and combine into one file your js code see Google Closure Compiler, YUI Compressor, JSMIN
- Mobile application frameworks – these frameworks are specifically for creating mobile applications (iphone/ipad/android) using javascript/html5, although usually that doesn’t include the canvas yet, and also unfortunately most of their demos work ONLY on mobile platforms, not on the desktop. The main problem is that on the desktop with a mouse you can click and drag and drop, whereas on mobile/tablets with no mouse you touch and swipe and so forth instead. One decision you also need to make is, do you want to access native elements of the mobile platform (like camera, tilt sensor, etc.). If so, see the first two options (PhoneGap and Appcelerator). The latter options often work with PhoneGap, too.
- PhoneGap – has an open source permissive license. They support Blackberry and Palm and Symbian and so forth, as well as iOS and Android. They create a native webview wrapper for your HTML5 app, so that you can access native things such as the camera or sensors.
- Titanium from Appcelerator – also has an open source permissive license, for fast, native mobile apps developed with javascript/html5 that can access native sensors and so forth, too. See their kitchen sink demo and other demos.
- Sencha Touch – built off of ExtJS and JQTouch – any app you develop with it either needs to be GPL or else you have to pay for a commercial license from them. Can work with PhoneGap, they have some nice demos, esp. for the iPad.
- Ansca Mobile – Corona SDK, better for game development, commercial license.
- appMobi – commercial, too, I believe
- Rhomobile – you actually develop in Ruby and it converts it to a javascript/html5 mobile app
HTML5 Canvas & Javascript Drawing / SVG Libraries
There are hundreds of html5 canvas demos out there if you search around. Again, unfortunately many canvas demos do not work as well on mobile or tablet platforms, or lack interaction support (drag or swipe or whatever). The harmony demo listed below is one exception. Android 2.2 will incorporate a much faster v8 javascript engine from google, and future versions of the webkit browser used by most mobile/tablet devices will hopefully add support for 3D with webgl, too. See the WebGL / game development stuff in a later section below.
- Canvas tutorials
- ProcessingJS – nice drawing library and development environment for creating animations and visualizations. This is a port by John Resig, inventor of JQuery, and others of the original java-based processing library to javascript. There are numerous sites that let you code your processingjs program from within your browser (see “browser-based IDEs” below), such as hascanvas and jsdo.it.
- canto.js – improved canvas api, very jquery-like, includes some turtle graphics (logo-like) commands. See also this turtle graphics in javascript page.
- ExCanvas – for making canvas work in internet explorer (IE 9 will support it I believe)
- Raphael – Javascript SVG, vector graphics, library – very nice demos
- RGraph – graphing library
- flot – javascript plotting library
- bluff – graphing library
- Javascript InfoVis Toolkit
- three.js – canvas-based 3d engine (not using webgl as the ones below)
- Painting/Sketching demos
- Harmony – by mrdoob, who also created the above three.js. This is a very nice demo which also works on mobile/tablet platforms, with touch support.
- Canvas Painter
- sketchpad
Alternate Languages/Parsers/Class systems for Javascript/CSS/HTML
As I mentioned in the previous post, one potential downside of the HTML5 platform (at least from a beginner’s perspective), is that you are stuck with the javascript language (as well as HTML and CSS). Well, that’s not always the case now. There are alternate languages that compile to javascript (like coffeescript) or css (like Sass and Compass) or even HTML (like HAML). Javascript, in a sense, is the new C. Many of the types of tools we used to mainly see in Java-land are also now available in javascript, such as parser generators.
- Coffeescript – alternate language that compiles to javascript. It is still mostly like javascript, but adds some things that make your code much more concise.
- Sass and Compass – alternative to CSS – adds some smarter features to CSS like variables and so forth
- HAML – alternate to HTML, not as popular perhaps, or as needed as the above two, since there are 2000 HTML WYSIWYG editors out there.
- Javascript parser generators – if you want to create your own DSL or language:
- Actionscript to javascript – see Jangaroo and Gordon
- If you want a more ruby or java-like class system (inheritance, traits, mixins, design by contract,etc.) to use rather than javascript’s built-in prototype object system, see:
Server-Side Javascript
Javascript is no longer a language that only runs in the browser. It has become a first class language for the server / desktop, too. Just run “node myscript.js” for example like you would any other kind of script on a server or linux box. Coffeescript works with node.js on the server or desktop, too.
- node.js – Uses Google’s fast V8 javascript runtime.
- narwhal – an alternative to node.js
- CommonJS – a standard library for javascript, mainly meant for the server-side at this point. node.js and narwhal implement commonjs.
- npm – a package manager for node.js, similar to gem for ruby
- I’m still waiting to see a drupal-like content management system built all in javascript.
- Jake – a build tool for javascript (like make, rake, etc.)
- WebSockets – a new HTML5 feature that allows for better persistent server-client connections. You’ll find some demos around of multiplayer games and web pages that use websockets, and on github there are node.js websocket server examples. You need the Chrome browser or Safari or Firefox 4 beta.
- ExpressJS – server-side web application framework
Javascript Game Development, 3D & Physics Engines
Further evidence that javascript is the real deal, you can do 3D and interactive games with it. To run the WebGL stuff you’ll need a recent build of the Chrome (or Chromium) browser or Firefox, see the Learning WebGL FAQ section.
- Spritely – nice sprite engine
- gameQuery – 2D engine
- Akihabara – for creating arcade-like games
- jsGameSoup
- Copperlicht – WebGL 3D game engine
- GLGE – another WebGL game engine
- SceneJS – WebGL scenegraph library, see also the interactive, editable demos
- C3DL – Canvas 3D library
- Dextrose Aves Engine – commercial game engine in development, see this video talk
- tinygames – see their work (building off of karma edu and so forth) to create educational html5-based games (math only apparently).
- Physics Engines & Demos
Browser-based Development Environments
- See my earlier post Browser-Based IDEs, but also these:
- jsdo.it – Has built-in support for javascript libraries such as processing, jquery, etc., and you can share/fork/rate code. jsFiddle is a similar tool.
- http://sketchpad.cc/ along with hascanvas and others work with processingjs for creating animations
- I mentioned it in the previous post, but the bespin editor continues to evolve and improve. It now supports code completion using jsctags.
- GUI Designers – really nothing out there that is finished and free and open source (see Ext Designer for a commercial option), other than of course free WYSIWYG HTML designers, but see these rough demos:
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)
- 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
- animation programming – processingjs.org
- 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…
Need Much Much More “D” in Education R & D
I already blogged about this matter 3 years ago in a post entitled “The State of Educational Research & Development.” But a few recent things made me think of it again:
- @newsweek tweeted for us to tell them our thoughts on the American education system in 6 words or less. My first thought was that “education needs more r&d”, because as my previous post mentioned – medicine and engineering and related areas spend 5-10% on research, whereas in education that percentage is closer to 0.01%. And most of that miniscule amount is spent on basic research, not development. NSF doesn’t even fund much K-12 or higher education curriculum or software development anymore.
- The U.S. department of education recently released its National Educational Technology Plan for 2010, authored by many researchers with whom I am familiar. I’ve only scanned it so far, but I haven’t seen much emphasis on development, just research. The only development ideas I’ve seen so far are very top-driven solutions, the “Grand Challenges” described in the end section on R&D: for example a huge tutoring system, a system for delivering assessments, a school data sharing and mining system, etc. I’m not seeing any bottom-driven or domain-specific ideas or more specific solutions. I posted a comment on that page similar to this post.
- Tony Bates blogged about “the state of e-learning in 2009” and noted:
My biggest disappointment this year…has been with open educational resources…what are we getting? Digitally recorded 50 minute classroom lectures and digital textbooks. What we are not getting are materials designed from scratch for multiple use…And there is still so little of it. What I would like to see are many thousands of short modules
- Also as I wrote in another earlier post on “50 examples of the need to improve college teaching,” software is key. The National Center for Academic Transformation (NCAT) has helped people redesign their college courses to be much more effective and efficient and cost less. The key to that is the use of interactive software: “successful course redesign that improves student learning while reducing instructional costs is heavily dependent upon high-quality, interactive learning materials” (ref). That may work well for common, large enrollment courses for which there is already a bunch of software available, but what about the rest of the courses? What about all of K-12, too?
- I recently wrote a chapter titled “Toward a Nation of Educoders” about how if we could make it easier for students and teachers to develop interactive software (such as animations and games and interactive websites), perhaps this would help alleviate this problem, make it less formidable and daunting, financially and timewise. This is related to the “computational thinking” (pdf) and “computational literacy” push seen in computer science. We should look at programming as the new 4th “R”, a new literacy that students and teachers need in today’s world. A couple years ago I blogged about this and an article by Marc Prensky: “Programming: The New Literacy.”
What’s the Platform of the Future for Developing Interactive Graphical Educational Software?
So, what is the platform of choice for folks who want to create interactive graphical educational software (see for example all the stuff at PHET and NLVM). Currently, there are two primary options: Flash and Java Applets. I’m not covering in this post web applications, which can still use just about anything you want: PHP, Java, Ruby, Python, .NET, etc., or business/office/administrative software which can either be web apps or desktop apps coded in C++/Java/.NET/Python, etc., or 3D desktop games, usually coded in C++/Java/.NET/Python. I’m centered on interactive, graphical educational software like you see all over the web now.
The PHET project, for example, uses both java and flash. These haven’t always been the main options, however, and I suspect it will change again in the near future. Here’s a short history of some of the development tools I’ve leaned on for educational software development over the past 15 years:
- early 90s – hypercard / supercard, Perl/CGI for web apps
- late 90s – java, visual basic, real basic, PHP emerges for web apps, javascript in the browser
- early 00s – by this time, commercial options no longer cut it for me, too many bugs, ignored feature requests, too expensive, vendor lock-in – free and open source is king: python, java (later open sourced), C#/vb.net (esp. the Mono open source clone). Unfortunately there is no alternative to the commercial, proprietary flash, which becomes king of RIAs (rich internet applications) instead of java applets.
- late 00s – by this time, desktop apps no longer cut it. RIA is king for creating interactive graphical educational apps – java and JVM languages like scala, and still no real alternative to flash (there is javafx, but it hasn’t largely caught on yet, and just about all the demos so far require you to download the app (JNLP) rather than run in the browser, despite support for JNLP applets). The move to RIA means no more Mono/.NET since it doesn’t run in the browser – support for silverlight is weak/non-existent on many browsers/platforms. And no python, although perhaps one day browsers will support it as an alternative language to javascript. I’m not holding my breath on that though. Mono/.NET is emerging again now in 3D virtual world space, however, because it is the basis for Second Life / OpenSim, and its only open source competitor, the java-based Project Wonderland is no longer supported by Oracle, who bought out Sun. The project is continuing outside of Oracle, but it’s future is unclear.
- early and late 10s? – This is the question of this post. Mobile platforms can no longer be ignored, and that means no java. Actually android is essentially java (dalvik), but standard java applets do not work. Flash is only just now being ported to work on android, and it may become available for the iphone as well, although Apple is hostile to it (as well as java). Since google doesn’t support browser applets (even android applets), and Apple wants total control of their platform, Flash is only increasing its dominance and importance.
HTML5
Since Oracle bought out Sun, and there is no support nor any planned support for java on the android and iphone platforms, it appears the only open source alternative for the future of RIA apps may be HTML5. But that cannot be used for creating the kind of highly interactive graphical educational software that you can create in java and flash. For this to work in HTML5, it would require WebGL, a 3D (OpenGL ES) canvas for HTML5. WebGL still does not work out of the box on any mobile platform, but it has been or is being ported to work on WebKit (the browser engine for Palm’s WebOS and the iphone web browser) as well as android. Currently, to run WebGL you need to grab a nightly build of Firefox, WebKit, or Google Chrome (I’m trying out the last one). Official builds will have likely have built-in support for WebGL come November 2010 or so perhaps (Firefox 4). Here are some more resources on WebGL:
- Learning WebGL – blog
- Vladimir Vukićević, blog of the main developer for the canvas control, and porting it to android. He did similar work on the mono platform earlier.
- Planet WebGL – aggregator
- Blender to WebGL exporter
- Copperlicht – sample 3D engine for WebGL
- WebGL Wiki – User Contributions (other libraries)
- O3D is an open source google project (they also support WebGL), that is essentially a 3D canvas with a more javascript-friendly API. It seems to be better for static 3D scenes with less interactivity. It is also NOT supported on android or other mobile platforms.
The main drawback to the HTML5 platform is that javascript is the only language supported. That’s not a problem for me, personally, I’ve been using javascript since when it was called livescript. But my interest also is in programming languages/tools that make it easier for students, teachers, and other non-CS types to develop interactive educational software, as discussed in this chapter (pdf). A workaround for now would be to create a to-javascript compiler for alternate languages, as has already been done for java with the GWT project (which has various WebGL controls in development: WGT, GWT-G3D, GWTGL, GWT-WebGL), but in the long run it would be best if a common runtime were developed for WebKit and Firefox to support other languages than javascript, but then we are just re-inventing java and the JVM. So I don’t dismiss the java platform at all just yet, but it’s definitely not having a good year so far
New Software and Hardware Releases
Just a round-up of some major software releases happening:
- Java 6 update 10 – a new version of java that is more lightweight and quicker to load applets.
- The 6.5 version of the Java development environment Netbeans is due out next month, or you can grab the release candidate now.
- Ubuntu Intrepid – the next version of Ubuntu will be released this week.
- OpenOffice 3.0, a free open source alternative to Microsoft Office, was released. You can now open and edit pdf files using openoffice extensions.
- A new version of the Arduino circuit board (Duemilanove) was also released.
The Rise and Fall of Visual Basic
I’ve extolled before those application development tools that hit that sweet spot of being both beginner-friendly and powerful enough to develop real applications, including Hypercard/Supercard (now out of date) and Visual Basic:
- Reminiscing about HyperCard
- Programming: The New Literacy
- Why Johnny Can’t Code
- The Spectrum of Computational Development Tools
But I’ve now run across a nice article explaining the history and current state of Visual Basic (and Visual Basic .NET), entitled “The Rise and Fall of Visual Basic.” Little did I know VB was first announced right down the road from me in 1991 in Atlanta. Visual Basic doesn’t have the best reputation among self-proclaimed serious coders (see below), but the article’s a nice read. VB.NET usage is now diminishing in part because it is not different enough from C#, and the designers lost sight of VB as a layman’s ‘application construction kit’ that it originally was, although it is still easier for beginners to develop .NET apps in VB.NET than C#.
VB.NET is still going strong though, just not as strong as Java or C#:
Java now leads with 45% market share(developers using Java some of the time), followed by C/C++ at 40%, C# at 32%, and Visual Basic at 21%.
From my perspective though (for those interested in developing educational software), the main insurmountable obstacle of Visual Basic .NET is that it can’t do applets (that work in any browser on any platform), like you can with with Java platform or Flash. There are other obstacles, too, like the fact that VB.NET is closed and proprietary and .NET works on Windows only, but there is a free, open source, cross-platform VB.NET compiler available from the Mono project. And yes there is Silverlight for developing browser-based .NET applications, and Mono’s open source clone Moonlight, but that’s more limiting that what you can do with Java applets or Flash animations/games.
Randy Pausch
Via an announcement at the SIGSCE blog comes news that Randy Pausch, who you may know from his famous ‘last lecture‘ last year, has passed away. He created the Alice 3D programming environment for beginners, and there is a Randy Pausch Memorial Fund to continue its development.
For an update on Seymour Papert, creator of the Logo programming language and many other books and ideas, who was injured a year and a half ago, see “In search of a beautiful mind.”


