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:

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.

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:

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.

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
Posted in android, development, html5, opensource, programming, software, Uncategorized
4 comments on “A Snapshot of the HTML5/Javascript Universe
  1. HackTalk says:

    Shell of the Future v0.9.0.2 Released…

    This was a really good post I mentioned it on my blog…

  2. OMG, what great list. I was looking for something just like this.

  3. Nick says:

    Excellent excellent article. Sencha is an excellent framework, although the yearly commercial license fee…well…you could pay someone to roll your own code for a lot less. Another great upcoming framework for ipad is iscroll by cubiq.

  4. […] et librairies JavaScript et CSS ainsi que du nouveau standard 3D WebGL, deviendra la plateforme du futur pour le développement d’applications graphiques interactives à valeur […]

Comments are closed.

%d bloggers like this: