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.
First, here are some places to keep up with this rapidly evolving field:
- 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.)
- YUI – very java-like user interface toolkit from Yahoo, very complete and accessible. They have started adding mobile support (touch/swipe/etc).
- JS Optimizers – to compress/obfuscate and combine into one file your js code see Google Closure Compiler, YUI Compressor, JSMIN
- 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.
- 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
- Canvas tutorials
- ExCanvas – for making canvas work in internet explorer (IE 9 will support it I believe)
- RGraph – graphing library
- bluff – graphing library
- three.js – canvas-based 3d engine (not using webgl as the ones below)
- Painting/Sketching demos
- 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.
- narwhal – an alternative to node.js
- npm – a package manager for node.js, similar to gem for ruby
- 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
- Spritely – nice sprite engine
- gameQuery – 2D engine
- Akihabara – for creating arcade-like games
- 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:
- 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: