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
  • See this question on quora: http://www.quora.com/What-JavaScript-libraries-are-recommended-for-building-simple-to-complex-interactive-diagrams
• New game libraries
  • http://craftyjs.com/
  • http://code.google.com/p/jgen/
  • https://github.com/RyanWilliams/cocos2d-javascript
  • http://gamejs.org/
  • more: http://sites.google.com/site/html5gamejam/engines
• Gesture recognition libraries
  • http://depts.washington.edu/aimgroup/proj/dollar/
  • http://depts.washington.edu/aimgroup/proj/dollar/ndollar.html
  • https://github.com/raganwald/iGesture
  • https://github.com/plainview/Jester
  • icon library to indicate gestures: http://gestureworks.com/features/open-source-gestures/
• 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
  • http://chirp.scratchr.org/dl/experimental/JsMorphic/morphic.html
  • https://github.com/AdamSpitz/lively-kernel-official
• 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/