This is a short recap of a presentation made during FITC Amsterdam 2012. Kudos for the presentation content goes to the presenter. Please use the resource links at the end of this post to get more information from the source.
Grant Skinner, owner of gskinner.com, is an internationally recognized leader in the field of rich interactive experiences. After 10 years of Flash development, he and his team has spent the past 2 years trying to deliver similar experiences with HTML5. Grant gave a really interesting presentation about his experiences with HTML5 over these past years and an overview of a set of tools and libraries that he and his team have produced during that time to help ease the development process.
So why should you as a developer care about HTLM5?
- Opportunity, there is a big hype around it and now is the time to catch the HTML5 wave
- Reach, you will have a big reach and the perception is growing rapidly
- Experience, you can leverage your Flash skills to build rich internet experiences using HTML5
- Challenge, HTML5 is still in an early stage and still has many problems, you get to take part in solving these problems, and as a developer, solving problems is what we do best.
So what issues do we still have with HTML5?
- There are still inconsistencies between browsers.
- There is a constant flow of new specifications for HTML5 and it can be tricky to keep up with all of them, for developers and for browser providers.
- Performance is still a bit behind but it is improving a lot with hardware acceleration etc.
Some of the new API:s in the HTML5 world are:
- WebGL, a graphics library for the HTML5 canvas.
- WebAudio, audio library for use with canvas and WebGL.
- WebSockets, a new communication API for web server and browser communication.
- CSS Shaders, an advanced addition to filter effects proposed by Adobe.
- ... and more ...
Gskinner.com recenlty launched technitone.com - an audio experiment that makes use of a lot of these new APIs pushing the boundaries of what can be accomplished with modern browser technologies. Definitely worth a visit.
Grant continued his presentation with an overview of a set of open source libraries and tools that he and his team created to simplify development targeting HTML5. Create JS, available at createjs.com, is a set of libraries designed to be approachable, modular, extensible and open and has the following ingredients:
- EaselJS – A flash like API for working with the HTML5 canvas element. Features a hierarchical display list, DisplayObject's (Text, Container, Stage etc), a Ticker for controlling the progress over time and much more.
- TweenJS – A javascript library for tweens and animations. Uses javascript chaining and features synched timelines, easing, sequencing, overriding, plugins etc.
- SoundJS – Web audio library focusing on usability, features pluggable target APIs, progressive enhancement etc.
- PreloadJS – Library for managing and co-ordinating loading of assets with instantiable load queues, smotthed progress, multiple connections, uses XmlHttpRequest version 2.
Apart from libraries, to get a better development experience when targeting HTML5, you need good tools. The ones shown by Grant Skinner were focusing on sprite sheet creation and animation:
- Flash CS6, Grant has been working with Adobe to be able to export sprite sheets from Flash CS6 targeting easelJS.
- Zoe, an open source tool from the CreateJS family for creating sprite sheets from SWF:s with scriptable animation etc.
A few things that Grant Skinner and the gskinner.com team are currently working on:
- Multi-surface targeting, rendering easelJS code to different rendering environmens, like canvas 2D, WebGL, SVG or even directly to the dom tree.
- EaselJS for NodeJS, render images on the server using client side code.
Grant finished his presentation with a few resources crucial to anyone who works, or would like to start working, with JavaScript:
- developer.mozilla.org – The closest thing you can find to an online API reference for JavaScript.
- caniuse.com – Lists browser support for various old and new HTML5 specifications.
- W3.org/TR – If you really want to dig into the formal core specifications of any HTML5 and CSS3 feature.
This was another great presentation by Grant Skinner, you can always see that he is very passionate about his work. He and his team are developing some really nice stuff that will prove very useful to any JavaScript developer in general, and will provide a smooth transition for the ones coming over from the Flash world in particular. And they are open sourcing all of it so that it can be leveraged and further improved by the community. That's the spirit!
Resources:
Great work came from you,. html5 music player
ReplyDelete