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
  • Create a drawing app with html5 canvas and javascript
  • Creating a bar graph, part 1
  • interactive canvas tutorial
  • dive into html5 – canvas – book chapter
  • canvas kitchen
• 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:
  • jison – used by coffeescript
  • PEG.js
  • canopy – ties you to his ruby-like JS.Class library
  • ANTLR‘s javascript target – not so lightweight, but has a lot of advanced functionality and features, such as being able to create better error messages
• 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:
  • Joose – See their Blok demo designer app too
  • JS.Class which I mentioned above
  • traits.js – trait library (see also jstraits). Joose supports traits, too.
  • base2 – older class library
  • Prototype, mootools, qooxdoo, and some other javascript frameworks also come with their own class system.

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
  • bullet.js
  • Box2DJS
  • JibLibJS
  • box2dnode
  • cloth simulation

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:
  • Opus-js – see the composer demo
  • Blok – rough demo for Joose, runs on google app engine

About these ads